npm - @qite/tide-booking-component - Versions diffs - 1.4.110 → 1.4.112 - Mend

@qite/tide-booking-component 1.4.110 → 1.4.112

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 (58) hide show

package/build/build-cjs/index.js CHANGED Viewed

@@ -13,9 +13,9 @@ var reactRedux = require('react-redux');
 var toolkit = require('@reduxjs/toolkit');
 var reactRouter = require('react-router');
 require('react-dom');
-var flat = require('flat');
-var formik = require('formik');
 var produce = require('immer');
+var formik = require('formik');
+var flat = require('flat');
 var uuid = require('uuid');
 function _interopDefaultLegacy(e) {
@@ -77,8 +77,8 @@ function _mergeNamespaces(n, m) {
 var React__default = /*#__PURE__*/ _interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/ _interopNamespace(React);
 var JsonURL__default = /*#__PURE__*/ _interopDefaultLegacy(JsonURL);
-var flat__default = /*#__PURE__*/ _interopDefaultLegacy(flat);
 var produce__default = /*#__PURE__*/ _interopDefaultLegacy(produce);
+var flat__default = /*#__PURE__*/ _interopDefaultLegacy(flat);
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -7086,7 +7086,7 @@ function getLocale(code) {
 var getPriceDifferenceText = function (price, currencyCode) {
   return price > 0 ? '+ '.concat(formatPrice$3(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$3(Math.abs(price), currencyCode));
 };
-function format(text, args) {
+function format$1(text, args) {
   return text.replace(/{([0-9]+)}/g, function (match, index) {
     return typeof args[index] == 'undefined' ? match : args[index];
   });
@@ -13055,7 +13055,7 @@ PERFORMANCE OF THIS SOFTWARE.
   };
   var ENDPOINT_BOOKABLE_DATES = ENDPOINT$8 + '/bookable-dates';
   var ENDPOINT_PRICE_DETAILS$1 = ENDPOINT$8 + '/price-details';
-  var ENDPOINT_BOOK = ENDPOINT$8 + '/book';
+  var ENDPOINT_BOOK$1 = ENDPOINT$8 + '/book';
   var ENDPOINT_UPDATE = ENDPOINT$8 + '/update';
   var ENDPOINT_AGENTS = ENDPOINT$8 + '/agents';
   var ENDPOINT_AVAILABLE_ALLOTMENTS = function (eventId, productCode) {
@@ -13160,7 +13160,7 @@ PERFORMANCE OF THIS SOFTWARE.
     return post(url, apiKey, body, config.token, signal, true, languageCode);
   };
   var book = function (config, request, signal, languageCode) {
-    var url = '' + config.host + ENDPOINT_BOOK;
+    var url = '' + config.host + ENDPOINT_BOOK$1;
     var apiKey = config.apiKey;
     var body = JSON.stringify(request);
     return post(url, apiKey, body, config.token, signal, true, languageCode);
@@ -13683,6 +13683,7 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT_EXCURSIONS = ENDPOINT + '/excursions';
   var ENDPOINT_FLIGHTS = ENDPOINT + '/flights';
   var ENDPOINT_PRICE_DETAILS = ENDPOINT + '/price-details';
+  var ENDPOINT_BOOK = ENDPOINT + '/book';
   var ENDPOINT_ITINERARY = ENDPOINT + '/itinerary';
   var ENDPOINT_ENTRY = function (magicLinkCode) {
     return ENDPOINT + '/entry/' + magicLinkCode;
@@ -13727,6 +13728,12 @@ PERFORMANCE OF THIS SOFTWARE.
     var body = JSON.stringify(request);
     return post(url, apiKey, body, config.token, signal, true);
   };
+  var bookPackagingEntry = function (config, request, signal) {
+    var url = '' + config.host + ENDPOINT_BOOK;
+    var apiKey = config.apiKey;
+    var body = JSON.stringify(request);
+    return post(url, apiKey, body, config.token, signal, true);
+  };
   exports.AllotmentType = AllotmentType;
   exports.ContactForm = ContactForm;
@@ -13750,6 +13757,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.availableCountries = availableCountries;
   exports.availableFlights = availableFlights;
   exports.book = book;
+  exports.bookPackagingEntry = bookPackagingEntry;
   exports.bookableDates = bookableDates;
   exports.changeEntryAgentSurcharge = changeEntryAgentSurcharge;
   exports.confirm = confirm;
@@ -13814,9 +13822,16 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.validateVoucher = validateVoucher;
 })(build);
+var tideConnection = {
+  // host: 'https://localhost:44341',
+  host: 'https://preview-tide.tidesoftware.be',
+  apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
+  catalogueIds: [1],
+  officeId: 1
+};
 function buildTideClientConfig(settings) {
-  var HOST = (settings === null || settings === void 0 ? void 0 : settings.apiUrl) || process.env.REACT_APP_BOOKING_HOST;
-  var API_KEY = (settings === null || settings === void 0 ? void 0 : settings.apiKey) || process.env.REACT_APP_BOOKING_API_KEY;
+  var HOST = (settings === null || settings === void 0 ? void 0 : settings.apiUrl) || tideConnection.host;
+  var API_KEY = (settings === null || settings === void 0 ? void 0 : settings.apiKey) || tideConnection.apiKey;
   var token = selectAgentToken();
   if (lodash.isNil(HOST)) {
     throw Error('Environment variable "HOST" was not set.');
@@ -20687,7 +20702,7 @@ var setOfficeId = ((_a$3 = bookingSlice.actions), _a$3.setOfficeId),
   setBookingAttributes = _a$3.setBookingAttributes,
   setCalculateDeposit = _a$3.setCalculateDeposit,
   setShowCommission = _a$3.setShowCommission,
-  setBookingNumber = _a$3.setBookingNumber,
+  setBookingNumber$1 = _a$3.setBookingNumber,
   setIsRetry = _a$3.setIsRetry,
   setFetchingPackage = _a$3.setFetchingPackage,
   setIsFetching = _a$3.setIsFetching,
@@ -20703,7 +20718,7 @@ var setOfficeId = ((_a$3 = bookingSlice.actions), _a$3.setOfficeId),
   setAgentAdressId = _a$3.setAgentAdressId,
   setBookingRemarks = _a$3.setBookingRemarks,
   setVoucherCodes = _a$3.setVoucherCodes,
-  setCurrentStep = _a$3.setCurrentStep,
+  setCurrentStep$1 = _a$3.setCurrentStep,
   setPackageAirlineGroups = _a$3.setPackageAirlineGroups,
   setPackageAirportGroups = _a$3.setPackageAirportGroups,
   setFlights = _a$3.setFlights,
@@ -20833,7 +20848,7 @@ var BookingPanel = function (_a) {
     StepIndicatorsComponent = _a.StepIndicatorsComponent;
   return React__default['default'].createElement(
     'div',
-    { className: 'booking__panel' },
+    { className: 'booking__panel__wrapper' },
     React__default['default'].createElement(StepIndicatorsComponent, { currentStep: currentStep, stepLabels: stepLabels }),
     React__default['default'].createElement(
       'div',
@@ -20954,37 +20969,27 @@ var Message = function (_a) {
   );
 };
-var Confirmation = function () {
-  var dispatch = useAppDispatch();
-  var settings = React.useContext(SettingsContext);
-  var navigate = settings.skipRouter ? function () {} : reactRouter.useNavigate();
-  var bookingNumber = reactRedux.useSelector(selectBookingNumber);
-  var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
-  var isOption = reactRedux.useSelector(selectIsOption);
-  React.useEffect(
-    function () {
-      if (!bookingNumber) {
-        if (settings.skipRouter) {
-          dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-        } else {
-          navigate(
-            ''
-              .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
-              .concat(settings.error.pathSuffix, '?')
-              .concat(bookingQueryString)
-          );
-        }
-      }
-    },
-    [bookingNumber]
-  );
-  var translations = reactRedux.useSelector(selectTranslations);
-  var encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);
+function format(str, args) {
+  // Simple format function: replaces {0}, {1}, ... with args
+  return str.replace(/\{(\d+)\}/g, function (match, number) {
+    return typeof args[number] !== 'undefined' ? String(args[number]) : match;
+  });
+}
+var SharedConfirmation = function (_a) {
+  var bookingNumber = _a.bookingNumber,
+    isOption = _a.isOption,
+    isOffer = _a.isOffer,
+    translations = _a.translations,
+    companyContactPhone = _a.companyContactPhone,
+    companyContactEmail = _a.companyContactEmail,
+    _b = _a.homeUrl,
+    homeUrl = _b === void 0 ? '/' : _b;
+  var encodedMailSubject = encodeURI(translations.MAIL_SUBJECT);
   var titleText = isOption
-    ? format(translations.CONFIRMATION.TITLE_TEXT_OPTION, [bookingNumber])
-    : settings.isOffer
-    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
-    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
+    ? format(translations.TITLE_TEXT_OPTION, [bookingNumber])
+    : isOffer
+    ? format(translations.TITLE_TEXT_OFFER, [bookingNumber])
+    : format(translations.TITLE_TEXT_BOOKING, [bookingNumber]);
   return React__default['default'].createElement(
     'div',
     { className: 'form form__booking--message', id: 'booking--confirmation' },
@@ -21002,25 +21007,31 @@ var Confirmation = function () {
             {
               type: 'success',
               title: titleText,
-              actionComponent: React__default['default'].createElement(
-                'div',
-                { className: 'sm' },
-                React__default['default'].createElement(
-                  'a',
-                  { href: 'tel://'.concat(settings.companyContactPhone), className: 'sm__icon' },
-                  React__default['default'].createElement(Icon, { name: 'tel' })
-                ),
-                React__default['default'].createElement(
-                  'a',
-                  { href: 'mailto://'.concat(settings.companyContactEmail), className: 'sm__icon' },
-                  React__default['default'].createElement(Icon, { name: 'mail' })
-                ),
-                React__default['default'].createElement(
-                  'a',
-                  { href: '/', className: 'sm__icon' },
-                  React__default['default'].createElement(Icon, { name: 'home' })
-                )
-              )
+              actionComponent:
+                companyContactPhone || companyContactEmail
+                  ? React__default['default'].createElement(
+                      'div',
+                      { className: 'sm' },
+                      companyContactPhone &&
+                        React__default['default'].createElement(
+                          'a',
+                          { href: 'tel://'.concat(companyContactPhone), className: 'sm__icon' },
+                          React__default['default'].createElement(Icon, { name: 'tel' })
+                        ),
+                      companyContactEmail &&
+                        React__default['default'].createElement(
+                          'a',
+                          { href: 'mailto://'.concat(companyContactEmail), className: 'sm__icon' },
+                          React__default['default'].createElement(Icon, { name: 'mail' })
+                        ),
+                      homeUrl &&
+                        React__default['default'].createElement(
+                          'a',
+                          { href: homeUrl, className: 'sm__icon' },
+                          React__default['default'].createElement(Icon, { name: 'home' })
+                        )
+                    )
+                  : undefined
             },
             !isOption
               ? React__default['default'].createElement(
@@ -21029,25 +21040,23 @@ var Confirmation = function () {
                   React__default['default'].createElement(
                     'p',
                     null,
-                    translations.CONFIRMATION.MESSAGE_TEXT1,
+                    translations.MESSAGE_TEXT1,
                     React__default['default'].createElement('br', null),
-                    settings.isOffer ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING
+                    isOffer ? translations.MESSAGE_TEXT2_OFFER : translations.MESSAGE_TEXT2_BOOKING
                   ),
-                  React__default['default'].createElement(
-                    'p',
-                    null,
-                    translations.CONFIRMATION.QUESTIONS_TEXT1,
-                    ' ',
+                  companyContactEmail &&
                     React__default['default'].createElement(
-                      'a',
-                      {
-                        href: 'mailto:'.concat(settings.companyContactEmail, '?subject=').concat(encodedMailSubject),
-                        title: translations.CONFIRMATION.QUESTIONS_ALT
-                      },
-                      translations.CONFIRMATION.QUESTIONS_TEXT2
-                    ),
-                    translations.CONFIRMATION.QUESTIONS_TEXT3
-                  )
+                      'p',
+                      null,
+                      translations.QUESTIONS_TEXT1,
+                      ' ',
+                      React__default['default'].createElement(
+                        'a',
+                        { href: 'mailto:'.concat(companyContactEmail, '?subject=').concat(encodedMailSubject), title: translations.QUESTIONS_ALT },
+                        translations.QUESTIONS_TEXT2
+                      ),
+                      translations.QUESTIONS_TEXT3
+                    )
                 )
               : undefined
           )
@@ -21057,6 +21066,42 @@ var Confirmation = function () {
   );
 };
+var Confirmation = function () {
+  var dispatch = useAppDispatch();
+  var settings = React.useContext(SettingsContext);
+  var navigate = settings.skipRouter ? function () {} : reactRouter.useNavigate();
+  var bookingNumber = reactRedux.useSelector(selectBookingNumber);
+  var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
+  var isOption = reactRedux.useSelector(selectIsOption);
+  var translations = reactRedux.useSelector(selectTranslations);
+  React.useEffect(
+    function () {
+      if (!bookingNumber) {
+        if (settings.skipRouter) {
+          dispatch(setCurrentStep$1(OPTIONS_FORM_STEP));
+        } else {
+          navigate(
+            ''
+              .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
+              .concat(settings.error.pathSuffix, '?')
+              .concat(bookingQueryString)
+          );
+        }
+      }
+    },
+    [bookingNumber]
+  );
+  return React__default['default'].createElement(SharedConfirmation, {
+    bookingNumber: bookingNumber,
+    isOption: isOption,
+    isOffer: settings.isOffer,
+    translations: translations.CONFIRMATION,
+    companyContactPhone: settings.companyContactPhone,
+    companyContactEmail: settings.companyContactEmail,
+    homeUrl: settings.basePath || '/'
+  });
+};
 var Error$1 = function () {
   var dispatch = useAppDispatch();
   var settings = React.useContext(SettingsContext);
@@ -22717,9 +22762,9 @@ var FlightOptionsForm = function () {
   var handleSubmit = function (e) {
     if (settings.skipRouter) {
       if (settings.roomOptions.isHidden) {
-        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+        dispatch(setCurrentStep$1(OPTIONS_FORM_STEP));
       } else {
-        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+        dispatch(setCurrentStep$1(ROOM_OPTIONS_FORM_STEP));
       }
     } else {
       if (settings.roomOptions.isHidden) {
@@ -22800,7 +22845,7 @@ var FlightOptionsForm = function () {
   var filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
   var resultCount = filteredGroups.length;
   var goPrevious = function () {
-    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+    dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
   };
   return React__default['default'].createElement(
     React__default['default'].Fragment,
@@ -24851,9 +24896,9 @@ var OptionsForm = function () {
   var handleSubmit = function (e) {
     if (settings.skipRouter) {
       if (travelersFirstStep) {
-        dispatch(setCurrentStep(SUMMARY_STEP));
+        dispatch(setCurrentStep$1(SUMMARY_STEP));
       } else {
-        dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+        dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
       }
     } else {
       if (travelersFirstStep) {
@@ -24962,9 +25007,9 @@ var OptionsForm = function () {
   }, []);
   var goPrevious = function () {
     if (settings.roomOptions.isHidden) {
-      dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+      dispatch(setCurrentStep$1(FLIGHT_OPTIONS_FORM_STEP));
     } else {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      dispatch(setCurrentStep$1(ROOM_OPTIONS_FORM_STEP));
     }
   };
   var previousUrl = settings.roomOptions.isHidden
@@ -25416,11 +25461,11 @@ var RoomOptionsForm = function () {
   var isLoading = reactRedux.useSelector(selectIsFetchingProductOptions);
   var rooms = buildSelectableRooms(packageRooms, settings.accommodations, settings.regimes, accommodationViews);
   var goPrevious = function () {
-    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+    dispatch(setCurrentStep$1(FLIGHT_OPTIONS_FORM_STEP));
   };
   var handleSubmit = function (e) {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      dispatch(setCurrentStep$1(OPTIONS_FORM_STEP));
     } else {
       navigate(
         ''
@@ -26658,7 +26703,7 @@ var Summary = function () {
       : _e[0];
   if (!travelerFormValues) {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+      dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
     } else {
       navigate(''.concat(!settings.skipBasePathInRouting ? settings.basePath : '', '?').concat(bookingQueryString));
     }
@@ -26728,12 +26773,12 @@ var Summary = function () {
           case 2:
             bookingResponse = _b.sent();
             // Booking successfull
-            dispatch(setBookingNumber(bookingResponse.number));
+            dispatch(setBookingNumber$1(bookingResponse.number));
             if (bookingResponse.paymentUrl) {
               window.location.href = bookingResponse.paymentUrl;
             } else {
               if (settings.skipRouter) {
-                dispatch(setCurrentStep(CONFIRMATION_STEP));
+                dispatch(setCurrentStep$1(CONFIRMATION_STEP));
               } else {
                 navigate(
                   ''
@@ -26747,7 +26792,7 @@ var Summary = function () {
           case 3:
             _b.sent();
             if (settings.skipRouter) {
-              dispatch(setCurrentStep(ERROR_STEP));
+              dispatch(setCurrentStep$1(ERROR_STEP));
             } else {
               navigate(
                 ''
@@ -26855,7 +26900,7 @@ var Summary = function () {
     dispatch(fetchPriceDetails());
   };
   var goPrevious = function () {
-    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+    dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
   };
   var translations = reactRedux.useSelector(selectTranslations);
   return React__default['default'].createElement(
@@ -27455,6 +27500,185 @@ var Summary = function () {
   );
 };
+function isValidEmail(email) {
+  return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(email);
+}
+function getAge(birthDateText, startDateText) {
+  var birthDate = new Date(birthDateText);
+  var startDate = new Date(startDateText);
+  var age = startDate.getFullYear() - birthDate.getFullYear();
+  var m = startDate.getMonth() - birthDate.getMonth();
+  if (m < 0 || (m === 0 && startDate.getDate() < birthDate.getDate())) {
+    age--;
+  }
+  return age;
+}
+var validateForm = function (values, agentRequired, bookingType, translations, formFields, mainBookerFormFields) {
+  var errors = {};
+  var isFormFieldPresent = function (type) {
+    var _a;
+    return (_a =
+      formFields === null || formFields === void 0
+        ? void 0
+        : formFields.some(function (f) {
+            return f.type === type;
+          })) !== null && _a !== void 0
+      ? _a
+      : true;
+  };
+  var isMainBookerFormFieldPresent = function (type) {
+    var _a;
+    return (_a =
+      mainBookerFormFields === null || mainBookerFormFields === void 0
+        ? void 0
+        : mainBookerFormFields.some(function (f) {
+            return f.type === type;
+          })) !== null && _a !== void 0
+      ? _a
+      : true;
+  };
+  var formatTravelerField = function (room, pax, field) {
+    return values.rooms.length > 1
+      ? format$1(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [room, pax, field])
+      : format$1(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_FIELD, [pax, field]);
+  };
+  var formatTravelerIsNoAdult = function (room, pax) {
+    return values.rooms.length > 1
+      ? format$1(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_ADULT, [room, pax])
+      : format$1(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT, [pax]);
+  };
+  var formatTravelerIsNoChild = function (room, pax) {
+    return values.rooms.length > 1
+      ? format$1(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_CHILD, [room, pax])
+      : format$1(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD, [pax]);
+  };
+  values.rooms.forEach(function (r, rIndex) {
+    return r.adults.forEach(function (adult, index) {
+      if (lodash.isEmpty(adult.gender) && isFormFieldPresent('gender')) {
+        lodash.set(
+          errors,
+          'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.GENDER)
+        );
+      }
+      if (lodash.isEmpty(adult.firstName) && isFormFieldPresent('firstName')) {
+        lodash.set(
+          errors,
+          'rooms['.concat(rIndex, '].adults[').concat(index, '].firstName'),
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
+        );
+      }
+      if (lodash.isEmpty(adult.lastName) && isFormFieldPresent('lastName')) {
+        lodash.set(
+          errors,
+          'rooms['.concat(rIndex, '].adults[').concat(index, '].lastName'),
+          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.LAST_NAME)
+        );
+      }
+      if (isFormFieldPresent('birthDate')) {
+        if (lodash.isEmpty(adult.birthDate)) {
+          lodash.set(
+            errors,
+            'rooms['.concat(rIndex, '].adults[').concat(index, '].birthDate'),
+            formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
+          );
+        } else if (values.startDate) {
+          var age = getAge(adult.birthDate, values.startDate);
+          if (age <= CHILD_MAX_AGE) {
+            lodash.set(errors, 'rooms['.concat(rIndex, '].adults[').concat(index, '].birthDate'), formatTravelerIsNoAdult(rIndex + 1, index + 1));
+          }
+        }
+      }
+    });
+  });
+  values.rooms.forEach(function (r, rIndex) {
+    return r.children.forEach(function (child, index) {
+      if (lodash.isEmpty(child.gender) && isFormFieldPresent('gender')) {
+        lodash.set(
+          errors,
+          'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.GENDER)
+        );
+      }
+      if (lodash.isEmpty(child.firstName) && isFormFieldPresent('firstName')) {
+        lodash.set(
+          errors,
+          'children['.concat(index, '].firstName'),
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
+        );
+      }
+      if (lodash.isEmpty(child.lastName) && isFormFieldPresent('lastName')) {
+        lodash.set(
+          errors,
+          'rooms['.concat(rIndex, '].children[').concat(index, '].lastName'),
+          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.LAST_NAME)
+        );
+      }
+      if (isFormFieldPresent('birthDate')) {
+        if (lodash.isEmpty(child.birthDate)) {
+          lodash.set(
+            errors,
+            'rooms['.concat(rIndex, '].children[').concat(index, '].birthDate'),
+            formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
+          );
+        } else if (values.startDate) {
+          var age = getAge(child.birthDate, values.startDate);
+          if (age > CHILD_MAX_AGE) {
+            lodash.set(
+              errors,
+              'rooms['.concat(rIndex, '].children[').concat(index, '].birthDate'),
+              formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1)
+            );
+          }
+        }
+      }
+    });
+  });
+  if (values.mainBookerId < 0) {
+    errors.mainBookerId = translations.TRAVELERS_FORM.VALIDATION.NO_MAIN_BOOKER_SELECTED;
+  }
+  if (bookingType != 'b2b' || (mainBookerFormFields === null || mainBookerFormFields === void 0 ? void 0 : mainBookerFormFields.length)) {
+    if (lodash.isEmpty(values.street) && isMainBookerFormFieldPresent('street')) {
+      errors.street = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.STREET]);
+    }
+    if (lodash.isEmpty(values.houseNumber) && isMainBookerFormFieldPresent('houseNumber')) {
+      errors.houseNumber = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.HOUSE_NUMBER]);
+    }
+    if (lodash.isEmpty(values.zipCode) && isMainBookerFormFieldPresent('zipCode')) {
+      errors.zipCode = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.ZIPCODE]);
+    }
+    if (lodash.isEmpty(values.place) && isMainBookerFormFieldPresent('place')) {
+      errors.place = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.CITY]);
+    }
+    if (isMainBookerFormFieldPresent('email')) {
+      if (lodash.isEmpty(values.email)) {
+        errors.email = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.EMAIL]);
+      } else if (isValidEmail(values.email)) {
+        errors.email = translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_IS_INVALID;
+      }
+      if (lodash.isEmpty(values.emailConfirmation)) {
+        errors.emailConfirmation = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.REPEAT_EMAIL]);
+      } else if (values.emailConfirmation !== values.email) {
+        errors.emailConfirmation = translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_DOES_NOT_MATCH;
+      }
+    }
+    if (lodash.isEmpty(values.country) && isMainBookerFormFieldPresent('country')) {
+      errors.country = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.COUNTRY]);
+    }
+    if (lodash.isEmpty(values.phone) && isMainBookerFormFieldPresent('phone')) {
+      errors.phone = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
+    }
+  } else {
+    if (lodash.isEmpty(values.phone)) {
+      errors.phone = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
+    }
+  }
+  if (agentRequired && !values.travelAgentId) {
+    errors.travelAgentId = translations.TRAVELERS_FORM.VALIDATION.AGENT_IS_REQUIRED;
+  }
+  return errors;
+};
 var LabeledInput = function (_a) {
   var name = _a.name,
     type = _a.type,
@@ -27522,6 +27746,144 @@ var LabeledSelect = function (_a) {
   );
 };
+var normalize = function (v) {
+  return v == null ? '' : String(v);
+};
+var parseCombined = function (raw, countries) {
+  var value = normalize(raw).trim();
+  if (!value) return { prefix: '', number: '' };
+  // Try to match a known prefix at the start. Prefer longest match.
+  var sorted = __spreadArray([], countries, true).sort(function (a, b) {
+    return b.phonePrefix.length - a.phonePrefix.length;
+  });
+  var hit = sorted.find(function (c) {
+    return value.startsWith(c.phonePrefix);
+  });
+  if (hit) {
+    var rest = value
+      .slice(hit.phonePrefix.length)
+      .trim()
+      .replace(/^[-\s]+/, '');
+    return { prefix: hit.phonePrefix, number: rest };
+  }
+  // Fallback: split on first space if it looks like a +prefix number
+  var m = value.match(/^(\+\d{1,4})[\s-]*(.*)$/);
+  if (m) return { prefix: m[1], number: m[2] };
+  return { prefix: '', number: value };
+};
+var PhoneInput = function (_a) {
+  var name = _a.name,
+    required = _a.required,
+    value = _a.value,
+    label = _a.label,
+    placeholder = _a.placeholder,
+    extraClassName = _a.extraClassName,
+    hasError = _a.hasError,
+    countries = _a.countries,
+    countryIso2 = _a.countryIso2,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur;
+  // Derive initial state from `value`
+  var initialCountry = countries.find(function (c) {
+    return c.iso2 === countryIso2;
+  });
+  var initial = React.useMemo(
+    function () {
+      return parseCombined(normalize(value), countries);
+    },
+    [value, countries]
+  );
+  var _b = React.useState(initial.prefix),
+    prefix = _b[0],
+    setPrefix = _b[1];
+  var _c = React.useState(initial.number),
+    number = _c[0],
+    setNumber = _c[1];
+  // Keep state in sync if the parent changes `value`
+  React.useEffect(
+    function () {
+      var parsed = !prefix && !number && initialCountry ? { prefix: initialCountry.phonePrefix, number: '' } : parseCombined(normalize(value), countries);
+      if (parsed.prefix) setPrefix(parsed.prefix);
+      if (parsed.number) setNumber(parsed.number);
+    },
+    [value, countries, countryIso2]
+  );
+  var emitCombinedChange = function (e, nextPrefix, nextNumber) {
+    // Combine with a space, unless the number already starts with a dash or space
+    var combined = nextPrefix && nextNumber ? lodash.compact([nextPrefix, nextNumber]).join(' ') : null;
+    onChange === null || onChange === void 0
+      ? void 0
+      : onChange(__assign(__assign({}, e), { type: 'change', target: { name: name, value: combined }, currentTarget: { name: name, value: combined } }));
+  };
+  var handleCountryBlur = function (e) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+  var onCountryChange = function (e) {
+    var next = e.target.value;
+    setPrefix(next);
+    emitCombinedChange(e, next, number);
+  };
+  var onPhoneChange = function (e) {
+    var cleaned = e.target.value.replace(/[^\d\s-]/g, '');
+    setNumber(cleaned);
+    emitCombinedChange(e, prefix, cleaned);
+  };
+  var handleNumberBlur = function (e) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+  // Ensure the select shows a reasonable default when prefix is empty
+  var selectValue = prefix || '';
+  return React__default['default'].createElement(
+    'label',
+    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
+    label && React__default['default'].createElement('span', { className: 'form__label' }, lodash.compact([label, required && '*']).join(' ')),
+    React__default['default'].createElement(
+      'div',
+      { className: 'phone-input' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'dropdown' },
+        React__default['default'].createElement(
+          'select',
+          {
+            'aria-label': label ? ''.concat(label, ' \u2013 country code') : 'Country calling code',
+            name: ''.concat(name, '__country'),
+            value: selectValue,
+            onBlur: handleCountryBlur,
+            onChange: onCountryChange
+          },
+          React__default['default'].createElement('option', { value: '', disabled: true }),
+          countries === null || countries === void 0
+            ? void 0
+            : countries.map(function (option) {
+                return React__default['default'].createElement(
+                  'option',
+                  { key: option.iso2, value: option.phonePrefix },
+                  option.name,
+                  ' (',
+                  option.phonePrefix,
+                  ')'
+                );
+              })
+        )
+      ),
+      React__default['default'].createElement('input', {
+        'aria-label': label ? ''.concat(label, ' \u2013 number') : 'Phone number',
+        name: ''.concat(name, '__number'),
+        type: 'tel',
+        inputMode: 'tel',
+        required: required,
+        className: 'form__input',
+        placeholder: placeholder,
+        onChange: onPhoneChange,
+        onBlur: handleNumberBlur,
+        value: number
+      }),
+      React__default['default'].createElement('input', { type: 'hidden', name: name, value: lodash.compact([prefix, number]).join(' ') })
+    )
+  );
+};
 var hasVisibleError = function (formik, key) {
   return lodash.get(formik.errors, key) && lodash.get(formik.touched, key);
 };
@@ -27667,323 +28029,6 @@ var TypeAheadInput = function (_a) {
   );
 };
-function isValidEmail(email) {
-  return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(email);
-}
-function getAge(birthDateText, startDateText) {
-  var birthDate = new Date(birthDateText);
-  var startDate = new Date(startDateText);
-  var age = startDate.getFullYear() - birthDate.getFullYear();
-  var m = startDate.getMonth() - birthDate.getMonth();
-  if (m < 0 || (m === 0 && startDate.getDate() < birthDate.getDate())) {
-    age--;
-  }
-  return age;
-}
-var validateForm = function (values, agentRequired, bookingType, translations, formFields, mainBookerFormFields) {
-  var errors = {};
-  var isFormFieldPresent = function (type) {
-    var _a;
-    return (_a =
-      formFields === null || formFields === void 0
-        ? void 0
-        : formFields.some(function (f) {
-            return f.type === type;
-          })) !== null && _a !== void 0
-      ? _a
-      : true;
-  };
-  var isMainBookerFormFieldPresent = function (type) {
-    var _a;
-    return (_a =
-      mainBookerFormFields === null || mainBookerFormFields === void 0
-        ? void 0
-        : mainBookerFormFields.some(function (f) {
-            return f.type === type;
-          })) !== null && _a !== void 0
-      ? _a
-      : true;
-  };
-  var formatTravelerField = function (room, pax, field) {
-    return values.rooms.length > 1
-      ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_FIELD, [room, pax, field])
-      : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_FIELD, [pax, field]);
-  };
-  var formatTravelerIsNoAdult = function (room, pax) {
-    return values.rooms.length > 1
-      ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_ADULT, [room, pax])
-      : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT, [pax]);
-  };
-  var formatTravelerIsNoChild = function (room, pax) {
-    return values.rooms.length > 1
-      ? format(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_CHILD, [room, pax])
-      : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD, [pax]);
-  };
-  values.rooms.forEach(function (r, rIndex) {
-    return r.adults.forEach(function (adult, index) {
-      if (lodash.isEmpty(adult.gender) && isFormFieldPresent('gender')) {
-        lodash.set(
-          errors,
-          'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
-          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.GENDER)
-        );
-      }
-      if (lodash.isEmpty(adult.firstName) && isFormFieldPresent('firstName')) {
-        lodash.set(
-          errors,
-          'rooms['.concat(rIndex, '].adults[').concat(index, '].firstName'),
-          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
-        );
-      }
-      if (lodash.isEmpty(adult.lastName) && isFormFieldPresent('lastName')) {
-        lodash.set(
-          errors,
-          'rooms['.concat(rIndex, '].adults[').concat(index, '].lastName'),
-          formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.LAST_NAME)
-        );
-      }
-      if (isFormFieldPresent('birthDate')) {
-        if (lodash.isEmpty(adult.birthDate)) {
-          lodash.set(
-            errors,
-            'rooms['.concat(rIndex, '].adults[').concat(index, '].birthDate'),
-            formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
-          );
-        } else if (values.startDate) {
-          var age = getAge(adult.birthDate, values.startDate);
-          if (age <= CHILD_MAX_AGE) {
-            lodash.set(errors, 'rooms['.concat(rIndex, '].adults[').concat(index, '].birthDate'), formatTravelerIsNoAdult(rIndex + 1, index + 1));
-          }
-        }
-      }
-    });
-  });
-  values.rooms.forEach(function (r, rIndex) {
-    return r.children.forEach(function (child, index) {
-      if (lodash.isEmpty(child.gender) && isFormFieldPresent('gender')) {
-        lodash.set(
-          errors,
-          'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
-          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.GENDER)
-        );
-      }
-      if (lodash.isEmpty(child.firstName) && isFormFieldPresent('firstName')) {
-        lodash.set(
-          errors,
-          'children['.concat(index, '].firstName'),
-          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.FIRST_NAME)
-        );
-      }
-      if (lodash.isEmpty(child.lastName) && isFormFieldPresent('lastName')) {
-        lodash.set(
-          errors,
-          'rooms['.concat(rIndex, '].children[').concat(index, '].lastName'),
-          formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.LAST_NAME)
-        );
-      }
-      if (isFormFieldPresent('birthDate')) {
-        if (lodash.isEmpty(child.birthDate)) {
-          lodash.set(
-            errors,
-            'rooms['.concat(rIndex, '].children[').concat(index, '].birthDate'),
-            formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE)
-          );
-        } else if (values.startDate) {
-          var age = getAge(child.birthDate, values.startDate);
-          if (age > CHILD_MAX_AGE) {
-            lodash.set(
-              errors,
-              'rooms['.concat(rIndex, '].children[').concat(index, '].birthDate'),
-              formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1)
-            );
-          }
-        }
-      }
-    });
-  });
-  if (values.mainBookerId < 0) {
-    errors.mainBookerId = translations.TRAVELERS_FORM.VALIDATION.NO_MAIN_BOOKER_SELECTED;
-  }
-  if (bookingType != 'b2b' || (mainBookerFormFields === null || mainBookerFormFields === void 0 ? void 0 : mainBookerFormFields.length)) {
-    if (lodash.isEmpty(values.street) && isMainBookerFormFieldPresent('street')) {
-      errors.street = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.STREET]);
-    }
-    if (lodash.isEmpty(values.houseNumber) && isMainBookerFormFieldPresent('houseNumber')) {
-      errors.houseNumber = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.HOUSE_NUMBER]);
-    }
-    if (lodash.isEmpty(values.zipCode) && isMainBookerFormFieldPresent('zipCode')) {
-      errors.zipCode = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.ZIPCODE]);
-    }
-    if (lodash.isEmpty(values.place) && isMainBookerFormFieldPresent('place')) {
-      errors.place = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.CITY]);
-    }
-    if (isMainBookerFormFieldPresent('email')) {
-      if (lodash.isEmpty(values.email)) {
-        errors.email = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.EMAIL]);
-      } else if (isValidEmail(values.email)) {
-        errors.email = translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_IS_INVALID;
-      }
-      if (lodash.isEmpty(values.emailConfirmation)) {
-        errors.emailConfirmation = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.REPEAT_EMAIL]);
-      } else if (values.emailConfirmation !== values.email) {
-        errors.emailConfirmation = translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_EMAIL_DOES_NOT_MATCH;
-      }
-    }
-    if (lodash.isEmpty(values.country) && isMainBookerFormFieldPresent('country')) {
-      errors.country = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.COUNTRY]);
-    }
-    if (lodash.isEmpty(values.phone) && isMainBookerFormFieldPresent('phone')) {
-      errors.phone = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
-    }
-  } else {
-    if (lodash.isEmpty(values.phone)) {
-      errors.phone = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
-    }
-  }
-  if (agentRequired && !values.travelAgentId) {
-    errors.travelAgentId = translations.TRAVELERS_FORM.VALIDATION.AGENT_IS_REQUIRED;
-  }
-  return errors;
-};
-var normalize = function (v) {
-  return v == null ? '' : String(v);
-};
-var parseCombined = function (raw, countries) {
-  var value = normalize(raw).trim();
-  if (!value) return { prefix: '', number: '' };
-  // Try to match a known prefix at the start. Prefer longest match.
-  var sorted = __spreadArray([], countries, true).sort(function (a, b) {
-    return b.phonePrefix.length - a.phonePrefix.length;
-  });
-  var hit = sorted.find(function (c) {
-    return value.startsWith(c.phonePrefix);
-  });
-  if (hit) {
-    var rest = value
-      .slice(hit.phonePrefix.length)
-      .trim()
-      .replace(/^[-\s]+/, '');
-    return { prefix: hit.phonePrefix, number: rest };
-  }
-  // Fallback: split on first space if it looks like a +prefix number
-  var m = value.match(/^(\+\d{1,4})[\s-]*(.*)$/);
-  if (m) return { prefix: m[1], number: m[2] };
-  return { prefix: '', number: value };
-};
-var PhoneInput = function (_a) {
-  var name = _a.name,
-    required = _a.required,
-    value = _a.value,
-    label = _a.label,
-    placeholder = _a.placeholder,
-    extraClassName = _a.extraClassName,
-    hasError = _a.hasError,
-    countries = _a.countries,
-    countryIso2 = _a.countryIso2,
-    onChange = _a.onChange,
-    onBlur = _a.onBlur;
-  // Derive initial state from `value`
-  var initialCountry = countries.find(function (c) {
-    return c.iso2 === countryIso2;
-  });
-  var initial = React.useMemo(
-    function () {
-      return parseCombined(normalize(value), countries);
-    },
-    [value, countries]
-  );
-  var _b = React.useState(initial.prefix),
-    prefix = _b[0],
-    setPrefix = _b[1];
-  var _c = React.useState(initial.number),
-    number = _c[0],
-    setNumber = _c[1];
-  // Keep state in sync if the parent changes `value`
-  React.useEffect(
-    function () {
-      var parsed = !prefix && !number && initialCountry ? { prefix: initialCountry.phonePrefix, number: '' } : parseCombined(normalize(value), countries);
-      if (parsed.prefix) setPrefix(parsed.prefix);
-      if (parsed.number) setNumber(parsed.number);
-    },
-    [value, countries, countryIso2]
-  );
-  var emitCombinedChange = function (e, nextPrefix, nextNumber) {
-    // Combine with a space, unless the number already starts with a dash or space
-    var combined = nextPrefix && nextNumber ? lodash.compact([nextPrefix, nextNumber]).join(' ') : null;
-    onChange === null || onChange === void 0
-      ? void 0
-      : onChange(__assign(__assign({}, e), { type: 'change', target: { name: name, value: combined }, currentTarget: { name: name, value: combined } }));
-  };
-  var handleCountryBlur = function (e) {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  };
-  var onCountryChange = function (e) {
-    var next = e.target.value;
-    setPrefix(next);
-    emitCombinedChange(e, next, number);
-  };
-  var onPhoneChange = function (e) {
-    var cleaned = e.target.value.replace(/[^\d\s-]/g, '');
-    setNumber(cleaned);
-    emitCombinedChange(e, prefix, cleaned);
-  };
-  var handleNumberBlur = function (e) {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  };
-  // Ensure the select shows a reasonable default when prefix is empty
-  var selectValue = prefix || '';
-  return React__default['default'].createElement(
-    'label',
-    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
-    label && React__default['default'].createElement('span', { className: 'form__label' }, lodash.compact([label, required && '*']).join(' ')),
-    React__default['default'].createElement(
-      'div',
-      { className: 'phone-input' },
-      React__default['default'].createElement(
-        'div',
-        { className: 'dropdown' },
-        React__default['default'].createElement(
-          'select',
-          {
-            'aria-label': label ? ''.concat(label, ' \u2013 country code') : 'Country calling code',
-            name: ''.concat(name, '__country'),
-            value: selectValue,
-            onBlur: handleCountryBlur,
-            onChange: onCountryChange
-          },
-          React__default['default'].createElement('option', { value: '', disabled: true }),
-          countries === null || countries === void 0
-            ? void 0
-            : countries.map(function (option) {
-                return React__default['default'].createElement(
-                  'option',
-                  { key: option.iso2, value: option.phonePrefix },
-                  option.name,
-                  ' (',
-                  option.phonePrefix,
-                  ')'
-                );
-              })
-        )
-      ),
-      React__default['default'].createElement('input', {
-        'aria-label': label ? ''.concat(label, ' \u2013 number') : 'Phone number',
-        name: ''.concat(name, '__number'),
-        type: 'tel',
-        inputMode: 'tel',
-        required: required,
-        className: 'form__input',
-        placeholder: placeholder,
-        onChange: onPhoneChange,
-        onBlur: handleNumberBlur,
-        value: number
-      }),
-      React__default['default'].createElement('input', { type: 'hidden', name: name, value: lodash.compact([prefix, number]).join(' ') })
-    )
-  );
-};
 function createTraveler(traveler, followNumber, personTranslation, isCompact) {
   if (isCompact) {
     return {
@@ -27994,27 +28039,27 @@ function createTraveler(traveler, followNumber, personTranslation, isCompact) {
       gender: '',
       age: traveler.age || 30
     };
-  } else {
-    return {
-      id: traveler.id,
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
   }
+  return {
+    id: traveler.id,
+    firstName: '',
+    lastName: '',
+    birthDate: '',
+    gender: ''
+  };
 }
-function createInitialValues(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
+function createInitialValuesFromRooms(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
+  var _a, _b, _c;
   var followNumber = { number: 1 };
   var initialValues = {
     startDate: startDate,
-    rooms: formRooms.map(function (r) {
+    rooms: formRooms.map(function (room) {
       return {
-        adults: r.adults.map(function (x) {
-          return createTraveler(x, followNumber, personTranslation, isCompact);
+        adults: room.adults.map(function (traveler) {
+          return createTraveler(traveler, followNumber, personTranslation, isCompact);
         }),
-        children: r.children.map(function (x) {
-          return createTraveler(x, followNumber, personTranslation, isCompact);
+        children: room.children.map(function (traveler) {
+          return createTraveler(traveler, followNumber, personTranslation, isCompact);
         })
       };
     }),
@@ -28031,344 +28076,334 @@ function createInitialValues(formRooms, startDate, agentAdressId, personTranslat
     travelAgentId: agentAdressId !== null && agentAdressId !== void 0 ? agentAdressId : 0,
     travelAgentName: ''
   };
-  if (initialValues.rooms && initialValues.rooms.length && initialValues.rooms[0].adults && initialValues.rooms[0].adults.length) {
+  if (
+    (_c = (_b = (_a = initialValues.rooms) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.adults) === null || _c === void 0
+      ? void 0
+      : _c[0]
+  ) {
     initialValues.mainBookerId = initialValues.rooms[0].adults[0].id;
   }
   return initialValues;
 }
-var TravelersForm = function () {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  var dispatch = useAppDispatch();
-  var settings = React.useContext(SettingsContext);
-  var navigate = settings.skipRouter ? function () {} : reactRouter.useNavigate();
-  var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
-  var startDate = reactRedux.useSelector(selectStartDate);
-  var formRooms = reactRedux.useSelector(selectFormRooms);
-  var bookingType = reactRedux.useSelector(selectBookingType);
-  var agents = reactRedux.useSelector(selectAgents);
-  var agentAdressId = reactRedux.useSelector(selectAgentAdressId);
-  var translations = reactRedux.useSelector(selectTranslations);
-  var travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
-  var isUnavailable = reactRedux.useSelector(selectIsUnavailable);
-  var bookingAttributes = reactRedux.useSelector(selectBookingAttributes);
-  var isFetching = reactRedux.useSelector(selectIsFetching);
-  var hasMounted = reactRedux.useSelector(selectHasMounted);
-  var countries = reactRedux.useSelector(selectCountries);
-  var useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
-  var showAllCountries = !!settings.travellers.showAllCountries;
-  var initialValues =
-    (_a = reactRedux.useSelector(selectTravelersFormValues)) !== null && _a !== void 0
-      ? _a
-      : createInitialValues(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
-  var _k = React.useState((_b = settings.agentRequired) !== null && _b !== void 0 ? _b : false),
-    showAgents = _k[0],
-    setShowAgents = _k[1];
-  var _l = React.useState(!settings.agentAdressId && !settings.hideAgentSelection),
-    showAgentSelection = _l[0],
-    setShowAgentSelection = _l[1];
-  var typeaheadAgents =
-    (_c = lodash.sortBy(
-      agents === null || agents === void 0
+function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, agentAdressId) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+  console.log('editablePackagingEntry?.pax:', editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.pax);
+  var pax =
+    (_a = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.pax) !== null && _a !== void 0 ? _a : [];
+  var rooms = editablePackagingEntry.rooms.map(function (room) {
+    var roomPax = pax.filter(function (x) {
+      return room.paxIds.includes(x.id);
+    });
+    return {
+      adults: roomPax.map(function (roomTraveler) {
+        var _a, _b;
+        return {
+          id: roomTraveler.id,
+          firstName: (_a = roomTraveler.firstName) !== null && _a !== void 0 ? _a : '',
+          lastName: (_b = roomTraveler.lastName) !== null && _b !== void 0 ? _b : '',
+          birthDate: roomTraveler.dateOfBirth ? dateFns.format(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
+          gender: ''
+        };
+      }),
+      children: []
+    };
+  });
+  var values = createInitialValuesFromRooms(
+    rooms.map(function (room) {
+      return { adults: room.adults, children: room.children };
+    }),
+    (_c =
+      (_b = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.lines) === null || _b === void 0
         ? void 0
-        : agents.map(function (x) {
-            return {
-              key: ''.concat(x.id),
-              value: ''.concat(x.name, ' (').concat(x.postalCode, ' ').concat(x.location, ')'),
-              text: ''.concat(x.name, ' (').concat(x.postalCode, ' ').concat(x.location, ')')
-            };
-          }),
-      'value'
-    )) !== null && _c !== void 0
-      ? _c
-      : [];
-  var _m = React.useState(typeaheadAgents),
-    filteredAgents = _m[0],
-    setFilteredAgents = _m[1];
-  var formik$1 = useCompactForm
-    ? formik.useFormik({
-        initialValues: initialValues,
-        validate: function (values) {},
-        onSubmit: function (values) {
-          dispatch(setFormValues(values));
-          dispatch(fetchPriceDetails());
-          if (settings.skipRouter) {
-            dispatch(setCurrentStep(SUMMARY_STEP));
-          } else {
-            navigate(
-              ''
-                .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
-                .concat(settings.summary.pathSuffix, '?')
-                .concat(bookingQueryString)
-            );
-          }
-        }
-      })
-    : formik.useFormik({
-        initialValues: initialValues,
-        validate: function (values) {
-          return validateForm(
-            values,
-            settings.agentRequired,
-            bookingType,
-            translations,
-            settings.travellers.formFields,
-            settings.travellers.mainBookerFormFields
-          );
-        },
-        onSubmit: function (values) {
-          dispatch(setFormValues(values));
-          dispatch(fetchPackage());
-          if (settings.skipRouter) {
-            if (travelersFirstStep) {
-              dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
-            } else {
-              dispatch(setCurrentStep(SUMMARY_STEP));
-            }
-          } else {
-            if (travelersFirstStep) {
-              navigate(
-                ''
-                  .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
-                  .concat(settings.flightOptions.pathSuffix, '?')
-                  .concat(bookingQueryString)
-              );
-            } else {
-              navigate(
-                ''
-                  .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
-                  .concat(settings.summary.pathSuffix, '?')
-                  .concat(bookingQueryString)
-              );
-            }
-          }
-        }
+        : _b[0]) === null || _c === void 0
+      ? void 0
+      : _c.from,
+    agentAdressId
+  );
+  values.rooms = rooms;
+  values.mainBookerId =
+    (_j =
+      (_e =
+        (_d = pax.find(function (x) {
+          return x.isMainBooker;
+        })) === null || _d === void 0
+          ? void 0
+          : _d.id) !== null && _e !== void 0
+        ? _e
+        : (_h = (_g = (_f = rooms[0]) === null || _f === void 0 ? void 0 : _f.adults) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0
+        ? void 0
+        : _h.id) !== null && _j !== void 0
+      ? _j
+      : -1;
+  var address = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.address;
+  values.street = (_k = address === null || address === void 0 ? void 0 : address.street) !== null && _k !== void 0 ? _k : '';
+  values.houseNumber = (_l = address === null || address === void 0 ? void 0 : address.houseNumber) !== null && _l !== void 0 ? _l : '';
+  values.box = (_m = address === null || address === void 0 ? void 0 : address.box) !== null && _m !== void 0 ? _m : '';
+  values.zipCode = (_o = address === null || address === void 0 ? void 0 : address.zipCode) !== null && _o !== void 0 ? _o : '';
+  values.place = (_p = address === null || address === void 0 ? void 0 : address.place) !== null && _p !== void 0 ? _p : '';
+  values.country = (_q = address === null || address === void 0 ? void 0 : address.country) !== null && _q !== void 0 ? _q : '';
+  values.phone = (_r = address === null || address === void 0 ? void 0 : address.phone) !== null && _r !== void 0 ? _r : '';
+  values.email = (_s = address === null || address === void 0 ? void 0 : address.email) !== null && _s !== void 0 ? _s : '';
+  values.emailConfirmation = (_t = address === null || address === void 0 ? void 0 : address.email) !== null && _t !== void 0 ? _t : '';
+  values.travelAgentId =
+    (_v = (_u = address === null || address === void 0 ? void 0 : address.travelAgentId) !== null && _u !== void 0 ? _u : agentAdressId) !== null &&
+    _v !== void 0
+      ? _v
+      : 0;
+  return values;
+}
+function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values) {
+  var _a;
+  var travelers = values.rooms.flatMap(function (room) {
+    return __spreadArray(__spreadArray([], room.adults, true), room.children, true);
+  });
+  console.log('Applying form values:', values);
+  console.log('editablePackagingEntry:', editablePackagingEntry);
+  return __assign(__assign({}, editablePackagingEntry), {
+    pax: ((_a = editablePackagingEntry.pax) !== null && _a !== void 0 ? _a : []).map(function (pax) {
+      var _a, _b;
+      var traveler = travelers.find(function (x) {
+        return x.id === pax.id;
       });
-  React.useEffect(function () {
-    dispatch(fetchPriceDetails());
-  }, []);
-  React.useEffect(
+      if (!traveler) return pax;
+      return __assign(__assign({}, pax), {
+        firstName: (_a = traveler.firstName) !== null && _a !== void 0 ? _a : '',
+        lastName: (_b = traveler.lastName) !== null && _b !== void 0 ? _b : '',
+        dateOfBirth: traveler.birthDate || null,
+        isMainBooker: traveler.id === values.mainBookerId
+      });
+    }),
+    address: __assign(__assign({}, editablePackagingEntry.address), {
+      street: values.street,
+      houseNumber: values.houseNumber,
+      box: values.box,
+      zipCode: values.zipCode,
+      place: values.place,
+      country: values.country,
+      travelAgentId: values.travelAgentId,
+      phone: values.phone,
+      email: values.email
+    })
+  });
+}
+var SharedTravelersForm = function (_a) {
+  var _b, _c, _d, _e, _f, _g;
+  var formik = _a.formik,
+    translations = _a.translations,
+    travellersSettings = _a.travellersSettings,
+    countries = _a.countries,
+    agents = _a.agents,
+    bookingType = _a.bookingType,
+    agentAdressId = _a.agentAdressId,
+    _h = _a.travelersFirstStep,
+    travelersFirstStep = _h === void 0 ? false : _h,
+    _j = _a.isUnavailable,
+    isUnavailable = _j === void 0 ? false : _j,
+    _k = _a.useCompactForm,
+    useCompactForm = _k === void 0 ? false : _k,
+    _l = _a.showAllCountries,
+    showAllCountries = _l === void 0 ? false : _l,
+    _m = _a.showAgentSelection,
+    showAgentSelection = _m === void 0 ? false : _m,
+    _o = _a.initialShowAgents,
+    initialShowAgents = _o === void 0 ? false : _o,
+    renderPreviousButton = _a.renderPreviousButton,
+    onBookingTypeChange = _a.onBookingTypeChange;
+  var _p = React.useState(initialShowAgents),
+    showAgents = _p[0],
+    setShowAgents = _p[1];
+  var typeaheadAgents = React.useMemo(
     function () {
       var _a;
-      if (
-        !((_a = bookingAttributes === null || bookingAttributes === void 0 ? void 0 : bookingAttributes.rooms) === null || _a === void 0
+      return (_a = lodash.sortBy(
+        agents === null || agents === void 0
           ? void 0
-          : _a.length) ||
-        isFetching
-      )
-        return;
-      if (!hasMounted) {
-        dispatch(setHasMounted(true));
-        return;
-      }
-      var fetchAll = function () {
-        return __awaiter(void 0, void 0, void 0, function () {
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                dispatch(setIsFetching(true));
-                _a.label = 1;
-              case 1:
-                _a.trys.push([1, , 4, 5]);
-                return [4 /*yield*/, dispatch(fetchPackage())];
-              case 2:
-                _a.sent();
-                return [4 /*yield*/, dispatch(fetchPriceDetails())];
-              case 3:
-                _a.sent();
-                return [3 /*break*/, 5];
-              case 4:
-                dispatch(setIsFetching(false));
-                return [7 /*endfinally*/];
-              case 5:
-                return [2 /*return*/];
-            }
-          });
-        });
-      };
-      fetchAll();
-    },
-    [bookingAttributes === null || bookingAttributes === void 0 ? void 0 : bookingAttributes.rooms]
-  );
-  // Update URL querystring when form data changes
-  React.useEffect(
-    function () {
-      if (settings.skipRouter || !travelersFirstStep) return;
-      var params = new URLSearchParams(bookingQueryString);
-      params.delete('rooms');
-      var roomsString = formik$1.values.rooms
-        .map(function (room) {
-          var adults = room.adults ? room.adults.length : 0;
-          var childAges =
-            room.children && room.children.length
-              ? room.children
-                  .map(function (c) {
-                    return c.age;
-                  })
-                  .join(',')
-              : '';
-          return 'adults:'.concat(adults, ',childAges:(').concat(childAges, ')');
-        })
-        .map(function (s) {
-          return '('.concat(s, ')');
-        })
-        .join(',');
-      var query = params.toString();
-      if (query) {
-        query += '&rooms=('.concat(roomsString, ')');
-      } else {
-        query = 'rooms=('.concat(roomsString, ')');
-      }
-      var newUrl = ''.concat(window.location.pathname, '?').concat(query);
-      navigate(newUrl, { replace: true });
-    },
-    [formik$1.values]
-  );
-  React.useEffect(
-    function () {
-      if (agents && settings.affiliateSlug) {
-        var agent_1 = agents.find(function (x) {
-          return x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug;
-        });
-        if (!agent_1) return;
-        var formValues = produce__default['default'](formik$1.values, function (values) {
-          (values.travelAgentId = Number(agent_1.id)), (values.travelAgentName = agent_1.name);
-        });
-        formik$1.setValues(formValues, false);
-        dispatch(setFormValues(formValues));
-        setShowAgentSelection(false);
-      }
+          : agents.map(function (agent) {
+              return {
+                key: ''.concat(agent.id),
+                value: ''
+                  .concat(agent.name)
+                  .concat(agent.postalCode || agent.location ? ' ('.concat(lodash.compact([agent.postalCode, agent.location]).join(' '), ')') : ''),
+                text: ''
+                  .concat(agent.name)
+                  .concat(agent.postalCode || agent.location ? ' ('.concat(lodash.compact([agent.postalCode, agent.location]).join(' '), ')') : '')
+              };
+            }),
+        'value'
+      )) !== null && _a !== void 0
+        ? _a
+        : [];
     },
-    [agents, settings.affiliateSlug]
+    [agents]
   );
-  var handleMainBookerChange = function (e) {
-    var id = parseInt(e.currentTarget.value);
-    formik$1.setFieldValue('mainBookerId', id);
+  var _q = React.useState(typeaheadAgents),
+    filteredAgents = _q[0],
+    setFilteredAgents = _q[1];
+  var flatErrors = flat__default['default'](formik.errors);
+  var errorKeys = Object.keys(flatErrors).filter(function (key) {
+    return lodash.get(formik.touched, key);
+  });
+  var hasVisibleError = function (key) {
+    return lodash.get(formik.errors, key) && lodash.get(formik.touched, key);
   };
   var mainBooker =
-    (_d = formik$1.values.rooms.find(function (r) {
-      return r.adults.find(function (traveler) {
-        return traveler.id === formik$1.values.mainBookerId;
+    (_b = formik.values.rooms.find(function (room) {
+      return room.adults.find(function (traveler) {
+        return traveler.id === formik.values.mainBookerId;
       });
-    })) === null || _d === void 0
+    })) === null || _b === void 0
       ? void 0
-      : _d.adults.find(function (traveler) {
-          return traveler.id === formik$1.values.mainBookerId;
+      : _b.adults.find(function (traveler) {
+          return traveler.id === formik.values.mainBookerId;
         });
+  var countryOptions = __spreadArray(
+    [{ key: 'empty', value: undefined, label: translations.TRAVELERS_FORM.SELECT_COUNTRY }],
+    showAllCountries
+      ? (_c =
+          countries === null || countries === void 0
+            ? void 0
+            : countries.map(function (country) {
+                return { key: country.iso2, value: country.iso2, label: country.name };
+              })) !== null && _c !== void 0
+        ? _c
+        : []
+      : (_e =
+          (_d = travellersSettings === null || travellersSettings === void 0 ? void 0 : travellersSettings.countries) === null || _d === void 0
+            ? void 0
+            : _d.map(function (country) {
+                return { key: country.iso2, value: country.iso2, label: country.name };
+              })) !== null && _e !== void 0
+      ? _e
+      : [
+          { key: 'be', value: 'be', label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM },
+          { key: 'nl', value: 'nl', label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS },
+          { key: 'fr', value: 'fr', label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE }
+        ],
+    true
+  );
+  var handleMainBookerChange = function (event) {
+    formik.setFieldValue('mainBookerId', parseInt(event.currentTarget.value, 10));
+  };
   var handleAgentChange = function (value) {
-    var filteredAgents = typeaheadAgents.filter(function (x) {
-      return x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1;
-    });
-    setFilteredAgents(filteredAgents);
-    formik$1.setFieldValue('travelAgentName', value);
+    setFilteredAgents(
+      typeaheadAgents.filter(function (x) {
+        return x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1;
+      })
+    );
+    formik.setFieldValue('travelAgentName', value);
   };
   var handleAgentSelect = function (key) {
     var _a;
     var agent = typeaheadAgents.find(function (x) {
       return x.key === key;
     });
-    formik$1.setValues(
-      __assign(__assign({}, formik$1.values), {
+    formik.setValues(
+      __assign(__assign({}, formik.values), {
         travelAgentId: Number(agent === null || agent === void 0 ? void 0 : agent.key),
         travelAgentName: (_a = agent === null || agent === void 0 ? void 0 : agent.value) !== null && _a !== void 0 ? _a : ''
       })
     );
-    var bookingType = 'b2b2c';
-    if (agentAdressId && agentAdressId != 0) {
-      bookingType = 'b2b';
-    }
-    dispatch(setBookingType(bookingType));
+    onBookingTypeChange === null || onBookingTypeChange === void 0 ? void 0 : onBookingTypeChange(agentAdressId && agentAdressId !== 0 ? 'b2b' : 'b2b2c');
   };
   var handleAgentClear = function () {
-    formik$1.setValues(__assign(__assign({}, formik$1.values), { travelAgentId: 0, travelAgentName: '' }));
-    dispatch(setBookingType('b2c'));
+    formik.setValues(__assign(__assign({}, formik.values), { travelAgentId: 0, travelAgentName: '' }));
+    onBookingTypeChange === null || onBookingTypeChange === void 0 ? void 0 : onBookingTypeChange('b2c');
+  };
+  var toggleAgent = function (value) {
+    setShowAgents(value);
+    if (!value) {
+      handleAgentClear();
+      setFilteredAgents([]);
+    }
   };
   var handleAddTraveler = function (roomIndex) {
-    var rooms = __spreadArray([], formik$1.values.rooms, true);
-    var newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
+    var rooms = __spreadArray([], formik.values.rooms, true);
+    var newAdult = { id: Date.now(), firstName: '', lastName: '', birthDate: '', gender: '' };
     rooms[roomIndex] = __assign(__assign({}, rooms[roomIndex]), { adults: __spreadArray(__spreadArray([], rooms[roomIndex].adults, true), [newAdult], false) });
-    formik$1.setFieldValue('rooms', rooms);
+    formik.setFieldValue('rooms', rooms);
   };
   var handleRemoveTraveler = function (roomIndex, travelerIndex) {
-    var rooms = __spreadArray([], formik$1.values.rooms, true);
+    var rooms = __spreadArray([], formik.values.rooms, true);
     var adults = __spreadArray([], rooms[roomIndex].adults, true);
-    if (adults.length <= 1) {
-      return;
-    }
+    if (adults.length <= 1) return;
     adults.splice(travelerIndex, 1);
     rooms[roomIndex] = __assign(__assign({}, rooms[roomIndex]), { adults: adults });
-    formik$1.setFieldValue('rooms', rooms);
+    formik.setFieldValue('rooms', rooms);
   };
   var handleAddRoom = function () {
-    var rooms = __spreadArray([], formik$1.values.rooms, true);
-    var newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
-    rooms.push({ adults: [newAdult], children: [] });
-    formik$1.setFieldValue('rooms', rooms);
+    var rooms = __spreadArray([], formik.values.rooms, true);
+    rooms.push({ adults: [{ id: Date.now(), firstName: '', lastName: '', birthDate: '', gender: '' }], children: [] });
+    formik.setFieldValue('rooms', rooms);
   };
   var handleRemoveRoom = function (roomIndex) {
-    var rooms = __spreadArray([], formik$1.values.rooms, true);
+    var rooms = __spreadArray([], formik.values.rooms, true);
     rooms.splice(roomIndex, 1);
-    formik$1.setFieldValue('rooms', rooms);
+    formik.setFieldValue('rooms', rooms);
   };
-  var toggleAgent = function (value) {
-    setShowAgents(value);
-    if (!value) {
-      handleAgentClear();
-      setFilteredAgents([]);
-    }
-  };
-  var goPrevious = function () {
-    dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-  };
-  var flatErrors = flat__default['default'](formik$1.errors);
-  var errorKeys = Object.keys(flatErrors).filter(function (key) {
-    return lodash.get(formik$1.touched, key);
-  });
-  var hasVisibleError = function (key) {
-    return lodash.get(formik$1.errors, key) && lodash.get(formik$1.touched, key);
+  var renderGenderControl = function (name, value) {
+    return React__default['default'].createElement(
+      'div',
+      { className: buildClassName(['form__group', hasVisibleError(name) && 'form__group--error']) },
+      React__default['default'].createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
+      React__default['default'].createElement(
+        'div',
+        { className: 'radiobutton-group' },
+        [
+          ['m', translations.TRAVELERS_FORM.MALE_GENDER],
+          ['f', translations.TRAVELERS_FORM.FEMALE_GENDER]
+        ].map(function (_a) {
+          var gender = _a[0],
+            label = _a[1];
+          return React__default['default'].createElement(
+            'div',
+            { className: 'radiobutton', key: gender },
+            React__default['default'].createElement(
+              'label',
+              { className: 'radiobutton__label' },
+              React__default['default'].createElement('input', {
+                type: 'radio',
+                className: 'radiobutton__input',
+                name: name,
+                onChange: formik.handleChange,
+                onBlur: formik.handleBlur,
+                value: gender,
+                checked: value.gender === gender
+              }),
+              label
+            )
+          );
+        })
+      )
+    );
   };
   var getControl = function (type, value, name) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     switch (type) {
-      case 'gender': {
-        return React__default['default'].createElement(GenderControl, { translations: translations, value: value, formik: formik$1, name: name });
-      }
-      case 'firstName': {
+      case 'gender':
+        return React__default['default'].createElement(GenderControl, { translations: translations, value: value, formik: formik, name: name });
+      case 'firstName':
         return React__default['default'].createElement(LabeledInput, {
           hasError: hasVisibleError(name),
           extraClassName: 'form__group--md-33',
           label: translations.TRAVELERS_FORM.FIRST_NAME,
           required: true,
           name: name,
-          onChange: formik$1.handleChange,
-          onBlur: formik$1.handleBlur,
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
           value: value.firstName
         });
-      }
-      case 'lastName': {
+      case 'lastName':
         return React__default['default'].createElement(LabeledInput, {
           hasError: hasVisibleError(name),
           extraClassName: 'form__group--md-33',
           label: translations.TRAVELERS_FORM.LAST_NAME,
           required: true,
           name: name,
-          onChange: formik$1.handleChange,
-          onBlur: formik$1.handleBlur,
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
           value: value.lastName
         });
-      }
-      case 'birthDate': {
+      case 'birthDate':
         return React__default['default'].createElement(LabeledInput, {
           type: 'date',
           hasError: hasVisibleError(name),
@@ -28376,71 +28411,35 @@ var TravelersForm = function () {
           label: translations.TRAVELERS_FORM.BIRTHDATE,
           required: true,
           name: name,
-          onChange: formik$1.handleChange,
-          onBlur: formik$1.handleBlur,
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
           value: value.birthDate
         });
-      }
-      case 'country': {
+      case 'country':
         return React__default['default'].createElement(LabeledSelect, {
           hasError: hasVisibleError('country'),
           label: translations.TRAVELERS_FORM.COUNTRY,
           required: true,
           name: 'country',
-          onChange: formik$1.handleChange,
-          onBlur: formik$1.handleBlur,
-          value: formik$1.values.country,
-          options: __spreadArray(
-            [
-              {
-                key: 'empty',
-                value: undefined,
-                label: translations.TRAVELERS_FORM.SELECT_COUNTRY
-              }
-            ],
-            showAllCountries
-              ? (_a =
-                  countries === null || countries === void 0
-                    ? void 0
-                    : countries.map(function (country) {
-                        return {
-                          key: country.iso2,
-                          value: country.iso2,
-                          label: country.name
-                        };
-                      })) !== null && _a !== void 0
-                ? _a
-                : []
-              : (_d =
-                  (_c = (_b = settings.travellers) === null || _b === void 0 ? void 0 : _b.countries) === null || _c === void 0
-                    ? void 0
-                    : _c.map(function (country) {
-                        return {
-                          key: country.iso2,
-                          value: country.iso2,
-                          label: country.name
-                        };
-                      })) !== null && _d !== void 0
-              ? _d
-              : [],
-            true
-          )
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: formik.values.country,
+          options: countryOptions
         });
-      }
-      case 'phone': {
+      case 'phone':
         return React__default['default'].createElement(PhoneInput, {
-          countries: (_f = (_e = settings.travellers) === null || _e === void 0 ? void 0 : _e.countries) !== null && _f !== void 0 ? _f : [],
-          countryIso2: formik$1.values.country,
+          countries:
+            (_a = travellersSettings === null || travellersSettings === void 0 ? void 0 : travellersSettings.countries) !== null && _a !== void 0 ? _a : [],
+          countryIso2: formik.values.country,
           hasError: hasVisibleError('phone'),
           label: translations.TRAVELERS_FORM.PHONE,
           required: true,
           name: 'phone',
-          onChange: formik$1.handleChange,
-          onBlur: formik$1.handleBlur,
-          value: formik$1.values.phone
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: formik.values.phone
         });
-      }
-      case 'email': {
+      case 'email':
         return React__default['default'].createElement(
           React__default['default'].Fragment,
           null,
@@ -28451,9 +28450,9 @@ var TravelersForm = function () {
             label: translations.TRAVELERS_FORM.EMAIL,
             required: true,
             name: 'email',
-            onChange: formik$1.handleChange,
-            onBlur: formik$1.handleBlur,
-            value: formik$1.values.email
+            onChange: formik.handleChange,
+            onBlur: formik.handleBlur,
+            value: formik.values.email
           }),
           React__default['default'].createElement(LabeledInput, {
             type: 'email',
@@ -28462,14 +28461,173 @@ var TravelersForm = function () {
             label: translations.TRAVELERS_FORM.REPEAT_EMAIL,
             required: true,
             name: 'emailConfirmation',
-            onChange: formik$1.handleChange,
-            onBlur: formik$1.handleBlur,
-            value: formik$1.values.emailConfirmation
+            onChange: formik.handleChange,
+            onBlur: formik.handleBlur,
+            value: formik.values.emailConfirmation
           })
         );
-      }
+      case 'street':
+        return React__default['default'].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
+        });
+      case 'houseNumber':
+        return React__default['default'].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
+        });
+      case 'box':
+        return React__default['default'].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
+        });
+      case 'zipCode':
+        return React__default['default'].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
+        });
+      case 'place':
+        return React__default['default'].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
+        });
+      default:
+        return null;
     }
   };
+  var renderRoomLabel = function (room) {
+    var _a, _b;
+    return lodash
+      .compact([
+        room.adults.length,
+        room.adults.length === 1 && ' '.concat(translations.TRAVELERS_FORM.ADULT),
+        room.adults.length > 1 && ' '.concat(translations.TRAVELERS_FORM.ADULTS),
+        ((_a = room.adults) === null || _a === void 0 ? void 0 : _a.length) && ((_b = room.children) === null || _b === void 0 ? void 0 : _b.length) && ', ',
+        room.children.length,
+        room.children.length === 1 && ' '.concat(translations.TRAVELERS_FORM.CHILD),
+        room.children.length > 1 && ' '.concat(translations.TRAVELERS_FORM.CHILDREN)
+      ])
+      .join('');
+  };
+  var renderTravelerFields = function (travelerValues, namePrefix, isAdult, roomIndex, travelerIndex) {
+    var _a;
+    if (useCompactForm) {
+      return React__default['default'].createElement(
+        'div',
+        { className: 'form__row' },
+        React__default['default'].createElement(LabeledInput, {
+          hasError: hasVisibleError(''.concat(namePrefix, '.age')),
+          extraClassName: 'form__group--md-33',
+          label: translations.TRAVELERS_FORM.AGE,
+          required: true,
+          name: ''.concat(namePrefix, '.age'),
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: travelerValues.age
+        })
+      );
+    }
+    if (
+      (_a = travellersSettings === null || travellersSettings === void 0 ? void 0 : travellersSettings.formFields) === null || _a === void 0
+        ? void 0
+        : _a.length
+    ) {
+      return React__default['default'].createElement(
+        'div',
+        { className: 'travelers-form__grid' },
+        travellersSettings.formFields.map(function (field, index) {
+          return React__default['default'].createElement(
+            'div',
+            { key: index, className: 'control control--'.concat(field.type) },
+            getControl(field.type, travelerValues, ''.concat(namePrefix, '.').concat(field.type))
+          );
+        })
+      );
+    }
+    return React__default['default'].createElement(
+      React__default['default'].Fragment,
+      null,
+      React__default['default'].createElement('div', { className: 'form__row' }, renderGenderControl(''.concat(namePrefix, '.gender'), travelerValues)),
+      React__default['default'].createElement(
+        'div',
+        { className: 'form__row' },
+        React__default['default'].createElement(LabeledInput, {
+          hasError: hasVisibleError(''.concat(namePrefix, '.firstName')),
+          extraClassName: 'form__group--md-33',
+          label: translations.TRAVELERS_FORM.FIRST_NAME,
+          required: true,
+          name: ''.concat(namePrefix, '.firstName'),
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: travelerValues.firstName
+        }),
+        React__default['default'].createElement(LabeledInput, {
+          hasError: hasVisibleError(''.concat(namePrefix, '.lastName')),
+          extraClassName: 'form__group--md-33',
+          label: translations.TRAVELERS_FORM.LAST_NAME,
+          required: true,
+          name: ''.concat(namePrefix, '.lastName'),
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: travelerValues.lastName
+        }),
+        React__default['default'].createElement(LabeledInput, {
+          type: 'date',
+          hasError: hasVisibleError(''.concat(namePrefix, '.birthDate')),
+          extraClassName: 'form__group--md-33',
+          label: translations.TRAVELERS_FORM.BIRTHDATE,
+          required: true,
+          name: ''.concat(namePrefix, '.birthDate'),
+          onChange: formik.handleChange,
+          onBlur: formik.handleBlur,
+          value: travelerValues.birthDate
+        })
+      ),
+      travelersFirstStep &&
+        isAdult &&
+        formik.values.rooms[roomIndex].adults.length > 1 &&
+        React__default['default'].createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'cta cta--secondary',
+            onClick: function () {
+              return handleRemoveTraveler(roomIndex, travelerIndex);
+            }
+          },
+          translations.TRAVELERS_FORM.REMOVE_TRAVELER
+        )
+    );
+  };
   return React__default['default'].createElement(
     'form',
     {
@@ -28477,687 +28635,238 @@ var TravelersForm = function () {
       name: 'booking--travellers',
       id: 'booking--travellers',
       noValidate: true,
-      onSubmit: formik$1.handleSubmit,
-      onReset: formik$1.handleReset
+      onSubmit: formik.handleSubmit,
+      onReset: formik.handleReset
     },
-    useCompactForm
-      ? React__default['default'].createElement(
+    React__default['default'].createElement(
+      'div',
+      { className: 'form__travelers__wrapper' },
+      formik.values.rooms.map(function (room, roomIndex) {
+        return React__default['default'].createElement(
           'div',
-          { className: 'form__travelers__wrapper' },
-          formik$1.values.rooms.map(function (room, rIndex) {
+          { key: roomIndex },
+          formik.values.rooms.length > 1 &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__region' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', roomIndex + 1),
+                React__default['default'].createElement('p', { className: 'form__region-label' }, renderRoomLabel(room))
+              ),
+              !useCompactForm &&
+                travelersFirstStep &&
+                formik.values.rooms.length > 1 &&
+                React__default['default'].createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'cta cta--secondary',
+                    onClick: function () {
+                      return handleRemoveRoom(roomIndex);
+                    }
+                  },
+                  'Verwijder reisgezelschap'
+                )
+            ),
+          room.adults.map(function (travelerValues, index) {
             return React__default['default'].createElement(
               'div',
-              { key: rIndex },
-              formik$1.values.rooms.length > 1 &&
+              { className: 'form__region', key: travelerValues.id },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.TRAVELER, ' ', index + 1),
+                React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
                 React__default['default'].createElement(
                   'div',
-                  { className: 'form__region' },
+                  { className: 'radiobutton' },
                   React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', rIndex + 1),
-                    React__default['default'].createElement(
-                      'p',
-                      { className: 'form__region-label' },
-                      lodash
-                        .compact([
-                          room.adults.length,
-                          room.adults.length === 1 && ' '.concat(translations.TRAVELERS_FORM.ADULT),
-                          room.adults.length > 1 && ' '.concat(translations.TRAVELERS_FORM.ADULTS),
-                          room.adults && room.adults.length && room.children && room.children.length && ', ',
-                          room.children.length,
-                          room.children.length === 1 && ' '.concat(translations.TRAVELERS_FORM.CHILD),
-                          room.children.length > 1 && ' '.concat(translations.TRAVELERS_FORM.CHILDREN)
-                        ])
-                        .join('')
-                    )
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('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
                   )
+                )
+              ),
+              renderTravelerFields(travelerValues, 'rooms['.concat(roomIndex, '].adults[').concat(index, ']'), true, roomIndex, index)
+            );
+          }),
+          room.children.map(function (travelerValues, index) {
+            return React__default['default'].createElement(
+              'div',
+              { className: 'form__region', key: travelerValues.id },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default['default'].createElement(
+                  'h5',
+                  { className: 'form__region-heading' },
+                  translations.TRAVELERS_FORM.TRAVELER,
+                  ' ',
+                  room.adults.length + index + 1
                 ),
-              room.adults.map(function (travelerValues, index) {
-                return React__default['default'].createElement(
-                  'div',
-                  { className: 'form__region', key: travelerValues.id },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.TRAVELER, ' ', index + 1),
-                    React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'radiobutton' },
-                      React__default['default'].createElement(
-                        'label',
-                        { className: 'radiobutton__label' },
-                        React__default['default'].createElement('input', {
-                          type: 'radio',
-                          name: 'mainBookerId',
-                          onChange: handleMainBookerChange,
-                          onBlur: formik$1.handleBlur,
-                          value: travelerValues.id,
-                          checked: formik$1.values.mainBookerId === travelerValues.id,
-                          className: 'radiobutton__input'
-                        }),
-                        translations.TRAVELERS_FORM.MAIN_BOOKER
-                      )
-                    )
-                  ),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__row' },
-                    React__default['default'].createElement(LabeledInput, {
-                      hasError: hasVisibleError('rooms['.concat(rIndex, '].adults[').concat(index, '].age')),
-                      extraClassName: 'form__group--md-33',
-                      label: translations.TRAVELERS_FORM.AGE,
-                      required: true,
-                      name: 'rooms['.concat(rIndex, '].adults[').concat(index, '].age'),
-                      onChange: formik$1.handleChange,
-                      onBlur: formik$1.handleBlur,
-                      value: travelerValues.age
-                    })
-                  )
-                );
-              }),
-              room.children.map(function (travelerValues, index) {
-                return React__default['default'].createElement(
-                  'div',
-                  { className: 'form__region', key: travelerValues.id },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default['default'].createElement(
-                      'h5',
-                      { className: 'form__region-heading' },
-                      translations.TRAVELERS_FORM.TRAVELER,
-                      ' ',
-                      room.adults.length + index + 1
-                    ),
-                    React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.CHILD)
-                  ),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__row' },
-                    React__default['default'].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$1.handleChange,
-                      onBlur: formik$1.handleBlur,
-                      value: travelerValues.age
-                    })
-                  )
-                );
-              })
+                React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.CHILD)
+              ),
+              renderTravelerFields(travelerValues, 'rooms['.concat(roomIndex, '].children[').concat(index, ']'), false, roomIndex, index)
             );
-          })
-        )
-      : React__default['default'].createElement(
-          React__default['default'].Fragment,
-          null,
-          React__default['default'].createElement(
+          }),
+          !useCompactForm &&
+            travelersFirstStep &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__region' },
+              React__default['default'].createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cta cta--select',
+                  onClick: function () {
+                    return handleAddTraveler(roomIndex);
+                  }
+                },
+                translations.TRAVELERS_FORM.ADD_TRAVELER
+              )
+            )
+        );
+      }),
+      !useCompactForm &&
+        (bookingType !== 'b2b' ||
+          ((_f = travellersSettings === null || travellersSettings === void 0 ? void 0 : travellersSettings.mainBookerFormFields) === null || _f === void 0
+            ? void 0
+            : _f.length))
+        ? React__default['default'].createElement(
             'div',
-            { className: 'form__travelers__wrapper' },
-            formik$1.values.rooms.map(function (room, rIndex) {
-              return React__default['default'].createElement(
-                'div',
-                { key: rIndex },
-                formik$1.values.rooms.length > 1 &&
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__region-header' },
+              React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.MAIN_BOOKER),
+              React__default['default'].createElement(
+                'p',
+                { className: 'form__region-label' },
+                lodash
+                  .compact([
+                    lodash
+                      .compact([
+                        mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName,
+                        mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName
+                      ])
+                      .join(' '),
+                    (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
+                      dateFns.format(dateFns.parse(mainBooker.birthDate, 'yyyy-MM-dd', new Date()), 'dd-MM-yyyy')
+                  ])
+                  .join(', ')
+              )
+            ),
+            (
+              (_g = travellersSettings === null || travellersSettings === void 0 ? void 0 : travellersSettings.mainBookerFormFields) === null || _g === void 0
+                ? void 0
+                : _g.length
+            )
+              ? React__default['default'].createElement(
+                  'div',
+                  { className: 'main-booker-form__grid' },
+                  travellersSettings.mainBookerFormFields.map(function (field, index) {
+                    return React__default['default'].createElement(
+                      'div',
+                      { key: index, className: 'control control--'.concat(field.type) },
+                      getControl(field.type, {}, field.type)
+                    );
+                  })
+                )
+              : React__default['default'].createElement(
+                  React__default['default'].Fragment,
+                  null,
                   React__default['default'].createElement(
                     'div',
-                    { className: 'form__region' },
+                    { className: 'form__twocolumn' },
                     React__default['default'].createElement(
                       'div',
-                      { className: 'form__region-header' },
-                      React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', rIndex + 1),
+                      { className: 'form__twocolumn-column' },
                       React__default['default'].createElement(
-                        'p',
-                        { className: 'form__region-label' },
-                        lodash
-                          .compact([
-                            room.adults.length,
-                            room.adults.length === 1 && ' '.concat(translations.TRAVELERS_FORM.ADULT),
-                            room.adults.length > 1 && ' '.concat(translations.TRAVELERS_FORM.ADULTS),
-                            room.adults && room.adults.length && room.children && room.children.length && ', ',
-                            room.children.length,
-                            room.children.length === 1 && ' '.concat(translations.TRAVELERS_FORM.CHILD),
-                            room.children.length > 1 && ' '.concat(translations.TRAVELERS_FORM.CHILDREN)
-                          ])
-                          .join('')
+                        'div',
+                        { className: 'form__row' },
+                        React__default['default'].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
+                        }),
+                        React__default['default'].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
+                        }),
+                        React__default['default'].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
+                        })
                       )
                     ),
-                    travelersFirstStep &&
-                      formik$1.values.rooms.length > 1 &&
-                      React__default['default'].createElement(
-                        'button',
-                        {
-                          type: 'button',
-                          className: 'cta cta--secondary',
-                          onClick: function () {
-                            return handleRemoveRoom(rIndex);
-                          }
-                        },
-                        'Verwijder reisgezelschap'
-                      )
-                  ),
-                room.adults.map(function (travelerValues, index) {
-                  var _a;
-                  return React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region', key: travelerValues.id },
                     React__default['default'].createElement(
                       'div',
-                      { className: 'form__region-header' },
-                      React__default['default'].createElement(
-                        'h5',
-                        { className: 'form__region-heading' },
-                        translations.TRAVELERS_FORM.TRAVELER,
-                        ' ',
-                        index + 1
-                      ),
-                      React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
+                      { className: 'form__twocolumn-column' },
                       React__default['default'].createElement(
                         'div',
-                        { className: 'radiobutton' },
-                        React__default['default'].createElement(
-                          'label',
-                          { className: 'radiobutton__label' },
-                          React__default['default'].createElement('input', {
-                            type: 'radio',
-                            name: 'mainBookerId',
-                            onChange: handleMainBookerChange,
-                            onBlur: formik$1.handleBlur,
-                            value: travelerValues.id,
-                            checked: formik$1.values.mainBookerId === travelerValues.id,
-                            className: 'radiobutton__input'
-                          }),
-                          translations.TRAVELERS_FORM.MAIN_BOOKER
-                        )
+                        { className: 'form__row' },
+                        React__default['default'].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
+                        }),
+                        React__default['default'].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
+                        }),
+                        React__default['default'].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: countryOptions
+                        })
                       )
-                    ),
-                    ((_a = settings.travellers.formFields) === null || _a === void 0 ? void 0 : _a.length)
-                      ? React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'travelers-form__grid' },
-                            settings.travellers.formFields.map(function (field, fIndex) {
-                              return React__default['default'].createElement(
-                                'div',
-                                { key: fIndex, className: 'control control--'.concat(field.type) },
-                                getControl(field.type, travelerValues, 'rooms['.concat(rIndex, '].adults[').concat(index, '].').concat(field.type))
-                              );
-                            })
-                          )
-                        )
-                      : React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default['default'].createElement(
-                              'div',
-                              {
-                                className: buildClassName([
-                                  'form__group',
-                                  hasVisibleError('rooms['.concat(rIndex, '].adults[').concat(index, '].gender')) && 'form__group--error'
-                                ])
-                              },
-                              React__default['default'].createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'radiobutton-group' },
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default['default'].createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default['default'].createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
-                                      onChange: formik$1.handleChange,
-                                      onBlur: formik$1.handleBlur,
-                                      value: 'm',
-                                      checked: travelerValues.gender === 'm'
-                                    }),
-                                    translations.TRAVELERS_FORM.MALE_GENDER
-                                  )
-                                ),
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default['default'].createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default['default'].createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
-                                      onChange: formik$1.handleChange,
-                                      onBlur: formik$1.handleBlur,
-                                      value: 'f',
-                                      checked: travelerValues.gender === 'f'
-                                    }),
-                                    translations.TRAVELERS_FORM.FEMALE_GENDER
-                                  )
-                                )
-                              )
-                            )
-                          ),
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.firstName
-                            }),
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.lastName
-                            }),
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.birthDate
-                            })
-                          ),
-                          travelersFirstStep &&
-                            room.adults.length > 1 &&
-                            React__default['default'].createElement(
-                              'button',
-                              {
-                                type: 'button',
-                                className: 'cta cta--secondary',
-                                onClick: function () {
-                                  return handleRemoveTraveler(rIndex, index);
-                                }
-                              },
-                              translations.TRAVELERS_FORM.REMOVE_TRAVELER
-                            )
-                        )
-                  );
-                }),
-                room.children.map(function (travelerValues, index) {
-                  var _a;
-                  return React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region', key: travelerValues.id },
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'form__region-header' },
-                      React__default['default'].createElement(
-                        'h5',
-                        { className: 'form__region-heading' },
-                        translations.TRAVELERS_FORM.TRAVELER,
-                        ' ',
-                        room.adults.length + index + 1
-                      ),
-                      React__default['default'].createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.CHILD)
-                    ),
-                    ((_a = settings.travellers.formFields) === null || _a === void 0 ? void 0 : _a.length)
-                      ? React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'travelers-form__grid' },
-                            settings.travellers.formFields.map(function (field, fIndex) {
-                              return React__default['default'].createElement(
-                                'div',
-                                { key: fIndex, className: 'control control--'.concat(field.type) },
-                                getControl(field.type, travelerValues, 'rooms['.concat(rIndex, '].children[').concat(index, '].').concat(field.type))
-                              );
-                            })
-                          )
-                        )
-                      : React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default['default'].createElement(
-                              'div',
-                              {
-                                className: buildClassName([
-                                  'form__group',
-                                  hasVisibleError('rooms['.concat(rIndex, '].children[').concat(index, '].gender')) && 'form__group--error'
-                                ])
-                              },
-                              React__default['default'].createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'radiobutton-group' },
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default['default'].createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default['default'].createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
-                                      onChange: formik$1.handleChange,
-                                      onBlur: formik$1.handleBlur,
-                                      value: 'm',
-                                      checked: travelerValues.gender === 'm'
-                                    }),
-                                    translations.TRAVELERS_FORM.MALE_GENDER
-                                  )
-                                ),
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default['default'].createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default['default'].createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
-                                      onChange: formik$1.handleChange,
-                                      onBlur: formik$1.handleBlur,
-                                      value: 'f',
-                                      checked: travelerValues.gender === 'f'
-                                    }),
-                                    translations.TRAVELERS_FORM.FEMALE_GENDER
-                                  )
-                                )
-                              )
-                            )
-                          ),
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.firstName
-                            }),
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.lastName
-                            }),
-                            React__default['default'].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$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: travelerValues.birthDate
-                            })
-                          )
-                        )
-                  );
-                }),
-                travelersFirstStep &&
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region' },
-                    React__default['default'].createElement(
-                      'button',
-                      {
-                        type: 'button',
-                        className: 'cta cta--select',
-                        onClick: function () {
-                          return handleAddTraveler(rIndex);
-                        }
-                      },
-                      translations.TRAVELERS_FORM.ADD_TRAVELER
-                    )
-                  )
-              );
-            }),
-            bookingType != 'b2b' ||
-              ((_f = (_e = settings.travellers) === null || _e === void 0 ? void 0 : _e.mainBookerFormFields) === null || _f === void 0 ? void 0 : _f.length)
-              ? React__default['default'].createElement(
-                  'div',
-                  { className: 'form__region' },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.MAIN_BOOKER),
-                    React__default['default'].createElement(
-                      'p',
-                      { className: 'form__region-label' },
-                      lodash
-                        .compact([
-                          lodash
-                            .compact([
-                              mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName,
-                              mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName
-                            ])
-                            .join(' '),
-                          (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
-                            dateFns.format(dateFns.parse(mainBooker.birthDate, 'yyyy-MM-dd', new Date()), 'dd-MM-yyyy')
-                        ])
-                        .join(', ')
                     )
                   ),
-                  React__default['default'].createElement(
-                    React__default['default'].Fragment,
-                    null,
-                    (
-                      (_h = (_g = settings.travellers) === null || _g === void 0 ? void 0 : _g.mainBookerFormFields) === null || _h === void 0
-                        ? void 0
-                        : _h.length
-                    )
-                      ? React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'main-booker-form__grid' },
-                            settings.travellers.mainBookerFormFields.map(function (field, fIndex) {
-                              return React__default['default'].createElement(
-                                'div',
-                                { key: fIndex, className: 'control control--'.concat(field.type) },
-                                getControl(field.type, {}, field.type)
-                              );
-                            })
-                          )
-                        )
-                      : React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__twocolumn' },
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'form__twocolumn-column' },
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'form__row' },
-                                React__default['default'].createElement(LabeledInput, {
-                                  hasError: hasVisibleError('street'),
-                                  extraClassName: 'form__group--50 form__group--sm-60',
-                                  label: translations.TRAVELERS_FORM.STREET,
-                                  required: true,
-                                  name: 'street',
-                                  onChange: formik$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.street
-                                }),
-                                React__default['default'].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$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.houseNumber
-                                }),
-                                React__default['default'].createElement(LabeledInput, {
-                                  hasError: hasVisibleError('box'),
-                                  extraClassName: 'form__group--20',
-                                  label: translations.TRAVELERS_FORM.POST_BOX,
-                                  name: 'box',
-                                  onChange: formik$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.box
-                                })
-                              )
-                            ),
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'form__twocolumn-column' },
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'form__row' },
-                                React__default['default'].createElement(LabeledInput, {
-                                  hasError: hasVisibleError('zipCode'),
-                                  extraClassName: 'form__group--40 form__group--sm-20',
-                                  label: translations.TRAVELERS_FORM.ZIPCODE,
-                                  required: true,
-                                  name: 'zipCode',
-                                  onChange: formik$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.zipCode
-                                }),
-                                React__default['default'].createElement(LabeledInput, {
-                                  hasError: hasVisibleError('place'),
-                                  extraClassName: 'form__group--60 form__group--sm-40',
-                                  label: translations.TRAVELERS_FORM.CITY,
-                                  required: true,
-                                  name: 'place',
-                                  onChange: formik$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.place
-                                }),
-                                React__default['default'].createElement(LabeledSelect, {
-                                  hasError: hasVisibleError('country'),
-                                  extraClassName: 'form__group--sm-40',
-                                  label: translations.TRAVELERS_FORM.COUNTRY,
-                                  required: true,
-                                  name: 'country',
-                                  onChange: formik$1.handleChange,
-                                  onBlur: formik$1.handleBlur,
-                                  value: formik$1.values.country,
-                                  options: __spreadArray(
-                                    [
-                                      {
-                                        key: 'empty',
-                                        value: undefined,
-                                        label: translations.TRAVELERS_FORM.SELECT_COUNTRY
-                                      }
-                                    ],
-                                    showAllCountries
-                                      ? (_j =
-                                          countries === null || countries === void 0
-                                            ? void 0
-                                            : countries.map(function (country) {
-                                                return {
-                                                  key: country.iso2,
-                                                  value: country.iso2,
-                                                  label: country.name
-                                                };
-                                              })) !== null && _j !== void 0
-                                        ? _j
-                                        : []
-                                      : [
-                                          {
-                                            key: 'be',
-                                            value: 'be',
-                                            label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM
-                                          },
-                                          {
-                                            key: 'nl',
-                                            value: 'nl',
-                                            label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS
-                                          },
-                                          {
-                                            key: 'fr',
-                                            value: 'fr',
-                                            label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE
-                                          }
-                                        ],
-                                    true
-                                  )
-                                })
-                              )
-                            )
-                          ),
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default['default'].createElement(LabeledInput, {
-                              hasError: hasVisibleError('phone'),
-                              extraClassName: 'form__group--md-33',
-                              label: translations.TRAVELERS_FORM.PHONE,
-                              required: true,
-                              name: 'phone',
-                              onChange: formik$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: formik$1.values.phone
-                            }),
-                            React__default['default'].createElement(LabeledInput, {
-                              type: 'email',
-                              hasError: hasVisibleError('email'),
-                              extraClassName: 'form__group--md-33',
-                              label: translations.TRAVELERS_FORM.EMAIL,
-                              required: true,
-                              name: 'email',
-                              onChange: formik$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: formik$1.values.email
-                            }),
-                            React__default['default'].createElement(LabeledInput, {
-                              type: 'email',
-                              hasError: hasVisibleError('emailConfirmation'),
-                              extraClassName: 'form__group--md-33',
-                              label: translations.TRAVELERS_FORM.REPEAT_EMAIL,
-                              required: true,
-                              name: 'emailConfirmation',
-                              onChange: formik$1.handleChange,
-                              onBlur: formik$1.handleBlur,
-                              value: formik$1.values.emailConfirmation
-                            })
-                          )
-                        )
-                  )
-                )
-              : React__default['default'].createElement(
-                  'div',
-                  { className: 'form__region' },
                   React__default['default'].createElement(
                     'div',
                     { className: 'form__row' },
@@ -29167,81 +28876,125 @@ var TravelersForm = function () {
                       label: translations.TRAVELERS_FORM.PHONE,
                       required: true,
                       name: 'phone',
-                      onChange: formik$1.handleChange,
-                      onBlur: formik$1.handleBlur,
-                      value: formik$1.values.phone
+                      onChange: formik.handleChange,
+                      onBlur: formik.handleBlur,
+                      value: formik.values.phone
+                    }),
+                    React__default['default'].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
+                    }),
+                    React__default['default'].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
                     })
                   )
-                ),
-            showAgentSelection &&
+                )
+          )
+        : !useCompactForm
+        ? React__default['default'].createElement(
+            'div',
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].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
+              })
+            )
+          )
+        : null,
+      !useCompactForm &&
+        showAgentSelection &&
+        React__default['default'].createElement(
+          'div',
+          { className: 'form__region' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__region-header' },
+            React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
+            React__default['default'].createElement(
+              'div',
+              { className: 'checkbox', id: 'cbxChooseOffice' },
               React__default['default'].createElement(
-                'div',
-                { className: 'form__region' },
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'form__region-header' },
-                  React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'checkbox', id: 'cbxChooseOffice' },
-                    React__default['default'].createElement(
-                      'label',
-                      { className: 'checkbox__label' },
-                      React__default['default'].createElement('input', {
-                        type: 'checkbox',
-                        name: 'booking--mainbooker',
-                        defaultChecked: showAgents,
-                        onClick: function () {
-                          return toggleAgent(!showAgents);
-                        },
-                        className: 'checkbox__input'
-                      }),
-                      translations.TRAVELERS_FORM.CHOOSE_OFFICE
-                    )
-                  )
-                ),
-                showAgents &&
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'form__row form__row--choose-office' },
-                    React__default['default'].createElement(
-                      'div',
-                      { className: buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error']) },
-                      React__default['default'].createElement(TypeAheadInput, {
-                        value: formik$1.values.travelAgentName,
-                        options: filteredAgents,
-                        onChange: handleAgentChange,
-                        onSelect: handleAgentSelect,
-                        onClear: handleAgentClear,
-                        name: 'travelAgentName',
-                        placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER
-                      })
-                    )
-                  )
+                'label',
+                { className: 'checkbox__label' },
+                React__default['default'].createElement('input', {
+                  type: 'checkbox',
+                  name: 'booking--mainbooker',
+                  checked: showAgents,
+                  onChange: function () {
+                    return toggleAgent(!showAgents);
+                  },
+                  className: 'checkbox__input'
+                }),
+                translations.TRAVELERS_FORM.CHOOSE_OFFICE
               )
+            )
           ),
-          errorKeys.length > 0 &&
+          showAgents &&
             React__default['default'].createElement(
               'div',
-              { className: 'form__region form__region--errors' },
+              { className: 'form__row form__row--choose-office' },
               React__default['default'].createElement(
                 'div',
-                { className: 'form__row' },
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'form__group' },
-                  React__default['default'].createElement('p', { className: 'form__error-heading' }, translations.TRAVELERS_FORM.VALIDATION_MESSAGE, ':'),
-                  React__default['default'].createElement(
-                    'ul',
-                    { className: 'list' },
-                    errorKeys.map(function (key) {
-                      return React__default['default'].createElement('li', { key: key }, lodash.get(flatErrors, key));
-                    })
-                  )
-                )
+                { className: buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error']) },
+                React__default['default'].createElement(TypeAheadInput, {
+                  value: formik.values.travelAgentName,
+                  options: filteredAgents,
+                  onChange: handleAgentChange,
+                  onSelect: handleAgentSelect,
+                  onClear: handleAgentClear,
+                  name: 'travelAgentName',
+                  placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER
+                })
               )
             )
-        ),
+        )
+    ),
+    !useCompactForm &&
+      errorKeys.length > 0 &&
+      React__default['default'].createElement(
+        'div',
+        { className: 'form__region form__region--errors' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'form__row' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__group' },
+            React__default['default'].createElement('p', { className: 'form__error-heading' }, translations.TRAVELERS_FORM.VALIDATION_MESSAGE, ':'),
+            React__default['default'].createElement(
+              'ul',
+              { className: 'list' },
+              errorKeys.map(function (key) {
+                return React__default['default'].createElement('li', { key: key }, lodash.get(flatErrors, key));
+              })
+            )
+          )
+        )
+      ),
     travelersFirstStep &&
       React__default['default'].createElement(
         'div',
@@ -29255,14 +29008,204 @@ var TravelersForm = function () {
     React__default['default'].createElement(
       'div',
       { className: 'booking__navigator' },
-      !travelersFirstStep && settings.skipRouter
+      renderPreviousButton === null || renderPreviousButton === void 0 ? void 0 : renderPreviousButton(),
+      React__default['default'].createElement(
+        'button',
+        { type: 'submit', title: translations.STEPS.NEXT, className: 'cta' + (isUnavailable ? ' cta--disabled' : '') },
+        translations.STEPS.NEXT
+      )
+    )
+  );
+};
+var TravelersForm = function () {
+  var _a, _b;
+  var dispatch = useAppDispatch();
+  var settings = React.useContext(SettingsContext);
+  var navigate = settings.skipRouter ? function () {} : reactRouter.useNavigate();
+  var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
+  var startDate = reactRedux.useSelector(selectStartDate);
+  var formRooms = reactRedux.useSelector(selectFormRooms);
+  var bookingType = reactRedux.useSelector(selectBookingType);
+  var agents = reactRedux.useSelector(selectAgents);
+  var agentAdressId = reactRedux.useSelector(selectAgentAdressId);
+  var translations = reactRedux.useSelector(selectTranslations);
+  var travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
+  var isUnavailable = reactRedux.useSelector(selectIsUnavailable);
+  var bookingAttributes = reactRedux.useSelector(selectBookingAttributes);
+  var isFetching = reactRedux.useSelector(selectIsFetching);
+  var hasMounted = reactRedux.useSelector(selectHasMounted);
+  var countries = reactRedux.useSelector(selectCountries);
+  var useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
+  var showAllCountries = !!settings.travellers.showAllCountries;
+  var initialValues =
+    (_a = reactRedux.useSelector(selectTravelersFormValues)) !== null && _a !== void 0
+      ? _a
+      : createInitialValuesFromRooms(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
+  var _c = React.useState(!settings.agentAdressId && !settings.hideAgentSelection),
+    showAgentSelection = _c[0],
+    setShowAgentSelection = _c[1];
+  var formik$1 = formik.useFormik({
+    initialValues: initialValues,
+    validate: useCompactForm
+      ? function () {}
+      : function (values) {
+          return validateForm(
+            values,
+            settings.agentRequired,
+            bookingType,
+            translations,
+            settings.travellers.formFields,
+            settings.travellers.mainBookerFormFields
+          );
+        },
+    onSubmit: function (values) {
+      dispatch(setFormValues(values));
+      if (useCompactForm) {
+        dispatch(fetchPriceDetails());
+        if (settings.skipRouter) dispatch(setCurrentStep$1(SUMMARY_STEP));
+        else
+          navigate(
+            ''
+              .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
+              .concat(settings.summary.pathSuffix, '?')
+              .concat(bookingQueryString)
+          );
+        return;
+      }
+      dispatch(fetchPackage());
+      if (settings.skipRouter) dispatch(setCurrentStep$1(travelersFirstStep ? FLIGHT_OPTIONS_FORM_STEP : SUMMARY_STEP));
+      else
+        navigate(
+          ''
+            .concat(!settings.skipBasePathInRouting ? settings.basePath : '')
+            .concat(travelersFirstStep ? settings.flightOptions.pathSuffix : settings.summary.pathSuffix, '?')
+            .concat(bookingQueryString)
+        );
+    }
+  });
+  React.useEffect(
+    function () {
+      dispatch(fetchPriceDetails());
+    },
+    [dispatch]
+  );
+  React.useEffect(
+    function () {
+      var _a;
+      if (
+        !((_a = bookingAttributes === null || bookingAttributes === void 0 ? void 0 : bookingAttributes.rooms) === null || _a === void 0
+          ? void 0
+          : _a.length) ||
+        isFetching
+      )
+        return;
+      if (!hasMounted) {
+        dispatch(setHasMounted(true));
+        return;
+      }
+      var fetchAll = function () {
+        return __awaiter(void 0, void 0, void 0, function () {
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                dispatch(setIsFetching(true));
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, , 4, 5]);
+                return [4 /*yield*/, dispatch(fetchPackage())];
+              case 2:
+                _a.sent();
+                return [4 /*yield*/, dispatch(fetchPriceDetails())];
+              case 3:
+                _a.sent();
+                return [3 /*break*/, 5];
+              case 4:
+                dispatch(setIsFetching(false));
+                return [7 /*endfinally*/];
+              case 5:
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+      fetchAll();
+    },
+    [bookingAttributes === null || bookingAttributes === void 0 ? void 0 : bookingAttributes.rooms, dispatch, hasMounted, isFetching]
+  );
+  React.useEffect(
+    function () {
+      if (settings.skipRouter || !travelersFirstStep) return;
+      var params = new URLSearchParams(bookingQueryString);
+      params.delete('rooms');
+      var roomsString = formik$1.values.rooms
+        .map(function (room) {
+          var _a;
+          var adults = room.adults ? room.adults.length : 0;
+          var childAges = ((_a = room.children) === null || _a === void 0 ? void 0 : _a.length)
+            ? room.children
+                .map(function (child) {
+                  return child.age;
+                })
+                .join(',')
+            : '';
+          return 'adults:'.concat(adults, ',childAges:(').concat(childAges, ')');
+        })
+        .map(function (room) {
+          return '('.concat(room, ')');
+        })
+        .join(',');
+      var nextQuery = ''
+        .concat(params.toString())
+        .concat(params.toString() ? '&' : '', 'rooms=(')
+        .concat(roomsString, ')');
+      navigate(''.concat(window.location.pathname, '?').concat(nextQuery), { replace: true });
+    },
+    [formik$1.values.rooms, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]
+  );
+  React.useEffect(
+    function () {
+      if (!agents || !settings.affiliateSlug) return;
+      var agent = agents.find(function (x) {
+        return x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug;
+      });
+      if (!agent) return;
+      var formValues = produce__default['default'](formik$1.values, function (values) {
+        values.travelAgentId = Number(agent.id);
+        values.travelAgentName = agent.name;
+      });
+      formik$1.setValues(formValues, false);
+      dispatch(setFormValues(formValues));
+      setShowAgentSelection(false);
+    },
+    [agents, settings.affiliateSlug]
+  );
+  return React__default['default'].createElement(SharedTravelersForm, {
+    formik: formik$1,
+    translations: translations,
+    travellersSettings: settings.travellers,
+    countries: countries,
+    agents: agents,
+    bookingType: bookingType,
+    agentAdressId: agentAdressId,
+    travelersFirstStep: travelersFirstStep,
+    isUnavailable: isUnavailable,
+    useCompactForm: useCompactForm,
+    showAllCountries: showAllCountries,
+    showAgentSelection: showAgentSelection,
+    initialShowAgents: (_b = settings.agentRequired) !== null && _b !== void 0 ? _b : false,
+    onBookingTypeChange: function (nextBookingType) {
+      return dispatch(setBookingType(nextBookingType));
+    },
+    renderPreviousButton: function () {
+      return !travelersFirstStep && settings.skipRouter
         ? React__default['default'].createElement(
             'button',
             {
               type: 'button',
               title: translations.STEPS.PREVIOUS,
               onClick: function () {
-                return goPrevious();
+                return dispatch(setCurrentStep$1(OPTIONS_FORM_STEP));
               },
               className: 'cta cta--secondary'
             },
@@ -29281,14 +29224,9 @@ var TravelersForm = function () {
             },
             translations.STEPS.PREVIOUS
           )
-        : null,
-      React__default['default'].createElement(
-        'button',
-        { type: 'submit', title: translations.STEPS.NEXT, className: 'cta' + (isUnavailable ? ' cta--disabled' : '') },
-        translations.STEPS.NEXT
-      )
-    )
-  );
+        : null;
+    }
+  });
 };
 var Booking = function (_a) {
@@ -29374,7 +29312,7 @@ var Booking = function (_a) {
         window.scrollTo(0, 0);
       }
       if (!lodash.isNil(bookingNumber)) {
-        dispatch(setBookingNumber(bookingNumber));
+        dispatch(setBookingNumber$1(bookingNumber));
         navigate(
           ''
             .concat(!skipBasePathInRouting ? basePath : '')
@@ -29405,7 +29343,7 @@ var Booking = function (_a) {
         console.error('Failure when setting booking attributes', startDate, endDate, catalogueId, rooms);
       }
     },
-    [location.search, setBookingAttributes, setBookingNumber, includeFlights]
+    [location.search, setBookingAttributes, setBookingNumber$1, includeFlights]
   );
   React.useEffect(
     function () {
@@ -33667,7 +33605,8 @@ var initialState$1 = {
   selectedExcursionSearchResult: null,
   confirmedExcursionsByDay: {},
   bookPackagingEntry: false,
-  currentStep: 0
+  currentStep: 0,
+  bookingNumber: undefined
 };
 var searchResultsSlice = toolkit.createSlice({
   name: 'searchResults',
@@ -33854,6 +33793,9 @@ var searchResultsSlice = toolkit.createSlice({
     },
     setCurrentStep: function (state, action) {
       state.currentStep = action.payload;
+    },
+    setBookingNumber: function (state, action) {
+      state.bookingNumber = action.payload;
     }
   }
 });
@@ -33898,8 +33840,9 @@ var setExcursionSearchParams = _a.setExcursionSearchParams,
   confirmExcursionForDay = _a.confirmExcursionForDay,
   removeConfirmedExcursionForDay = _a.removeConfirmedExcursionForDay;
 _a.clearConfirmedExcursionsForDay;
-var setBookPackagingEntry = _a.setBookPackagingEntry;
-_a.setCurrentStep;
+var setBookPackagingEntry = _a.setBookPackagingEntry,
+  setCurrentStep = _a.setCurrentStep,
+  setBookingNumber = _a.setBookingNumber;
 var searchResultsReducer = searchResultsSlice.reducer;
 var ItemPicker = function (_a) {
@@ -42453,15 +42396,6 @@ var PackageingFlightsFlyIn = function (_a) {
               React__default['default'].createElement(
                 'div',
                 { className: 'search__result-row' },
-                React__default['default'].createElement(
-                  'span',
-                  { className: 'search__result-row-text' },
-                  (uniqueOutwardFlights === null || uniqueOutwardFlights === void 0 ? void 0 : uniqueOutwardFlights.length) && uniqueOutwardFlights.length,
-                  '\u00A0',
-                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_2,
-                  '\u00A0',
-                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_3
-                ),
                 React__default['default'].createElement(
                   'div',
                   {
@@ -42473,6 +42407,15 @@ var PackageingFlightsFlyIn = function (_a) {
                   React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
                   translations.SRP.FILTERS
                 ),
+                React__default['default'].createElement(
+                  'span',
+                  { className: 'search__result-row-text' },
+                  (uniqueOutwardFlights === null || uniqueOutwardFlights === void 0 ? void 0 : uniqueOutwardFlights.length) && uniqueOutwardFlights.length,
+                  '\u00A0',
+                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_2,
+                  '\u00A0',
+                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_3
+                ),
                 sortByTypes &&
                   sortByTypes.length > 0 &&
                   React__default['default'].createElement(
@@ -43215,13 +43158,9 @@ var FlyIn = function (_a) {
       className: 'flyin '
         .concat(isOpen ? 'flyin--active' : '', ' ')
         .concat(className, ' ')
-        .concat(
-          isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
-            ? 'flyin--large'
-            : '',
-          ' '
-        )
-        .concat(flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : '')
+        .concat(isPackageEditFlow || flyInType === 'acco-results' ? 'flyin--large' : '', ' ')
+        .concat(flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : '', '\n      ')
+        .concat(flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' ? 'flyin--flight' : '')
     },
     React__default['default'].createElement(
       'div',
@@ -43300,6 +43239,17 @@ var FlyIn = function (_a) {
             React__default['default'].createElement(
               'div',
               { className: 'search__result-row' },
+              React__default['default'].createElement(
+                'div',
+                {
+                  className: 'cta cta--filter',
+                  onClick: function () {
+                    return toggleFilters && toggleFilters();
+                  }
+                },
+                React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                translations.SRP.FILTERS
+              ),
               React__default['default'].createElement(
                 'span',
                 { className: 'search__result-row-text' },
@@ -43313,17 +43263,6 @@ var FlyIn = function (_a) {
                     translations.SRP.TOTAL_RESULTS_LABEL
                   )
               ),
-              React__default['default'].createElement(
-                'div',
-                {
-                  className: 'cta cta--filter',
-                  onClick: function () {
-                    return toggleFilters && toggleFilters();
-                  }
-                },
-                React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
-                translations.SRP.FILTERS
-              ),
               sortByTypes &&
                 sortByTypes.length > 0 &&
                 React__default['default'].createElement(
@@ -45431,7 +45370,7 @@ var GroupTourCard = function (_a) {
     return state.searchResults;
   }).selectedSearchResult;
   if (!context) {
-    return;
+    return null;
   }
   var dispatch = reactRedux.useDispatch();
   var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
@@ -45593,7 +45532,7 @@ var GroupTourResults = function (_a) {
   var isLoading = _a.isLoading;
   var context = React.useContext(SearchResultsConfigurationContext);
   if (!context) {
-    return;
+    return null;
   }
   if (isLoading) {
     return React__default['default'].createElement(
@@ -46828,8 +46767,6 @@ var WLSidebar = function (_a) {
   if (!editablePackagingEntry) {
     return null;
   }
-  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
-  console.log('priceDetails in WLSidebar:', priceDetails);
   var sortedLines = React.useMemo(
     function () {
       var _a;
@@ -46974,19 +46911,740 @@ var WLSidebar = function (_a) {
   });
 };
-var BookPackagingEntry = function (_a) {
+var formatBirthDate = function (birthDate) {
+  if (!birthDate) return '';
+  return birthDate.split('T')[0].split('-').reverse().join('/');
+};
+var SharedSummary = function (_a) {
   var _b;
-  var activeSearchSeed = _a.activeSearchSeed;
+  var translations = _a.translations,
+    travelerFormValues = _a.travelerFormValues,
+    checkboxes = _a.checkboxes,
+    notifications = _a.notifications,
+    _c = _a.remarks,
+    remarks = _c === void 0 ? '' : _c,
+    _d = _a.voucher,
+    voucher = _d === void 0 ? {} : _d,
+    _e = _a.voucherCodes,
+    voucherCodes = _e === void 0 ? [] : _e,
+    _f = _a.enableVoucher,
+    enableVoucher = _f === void 0 ? false : _f,
+    _g = _a.allowOption,
+    allowOption = _g === void 0 ? false : _g,
+    _h = _a.isOffer,
+    isOffer = _h === void 0 ? false : _h,
+    customValidateText = _a.customValidateText,
+    _j = _a.isSubmitting,
+    isSubmitting = _j === void 0 ? false : _j,
+    _k = _a.userValidated,
+    userValidated = _k === void 0 ? true : _k,
+    renderOptions = _a.renderOptions,
+    renderPreviousButton = _a.renderPreviousButton,
+    renderLoader = _a.renderLoader,
+    onSubmit = _a.onSubmit,
+    onRemarksChange = _a.onRemarksChange,
+    onCheckboxesChange = _a.onCheckboxesChange,
+    onNotificationsChange = _a.onNotificationsChange,
+    onVoucherChange = _a.onVoucherChange,
+    onValidateVoucher = _a.onValidateVoucher,
+    onAddVoucher = _a.onAddVoucher,
+    onRemoveVoucher = _a.onRemoveVoucher,
+    onUserValidatedChange = _a.onUserValidatedChange;
+  var _l = React.useState(checkboxes),
+    localCheckboxes = _l[0],
+    setLocalCheckboxes = _l[1];
+  React.useEffect(
+    function () {
+      setLocalCheckboxes(checkboxes);
+    },
+    [checkboxes]
+  );
+  React.useEffect(
+    function () {
+      var checkboxesValidated = !lodash.isNil(localCheckboxes)
+        ? localCheckboxes.every(function (checkbox) {
+            return checkbox.isSelected;
+          })
+        : true;
+      var notificationsValidated = !lodash.isNil(notifications)
+        ? notifications
+            .filter(function (notification) {
+              return notification.hasToBeConfirmed;
+            })
+            .every(function (notification) {
+              return notification.isConfirmed;
+            })
+        : true;
+      onUserValidatedChange === null || onUserValidatedChange === void 0 ? void 0 : onUserValidatedChange(checkboxesValidated && notificationsValidated);
+    },
+    [localCheckboxes, notifications, onUserValidatedChange]
+  );
+  var handleNotificationChange = function (id, checked) {
+    var updatedNotifications = (notifications !== null && notifications !== void 0 ? notifications : []).map(function (notification) {
+      return notification.id === id ? __assign(__assign({}, notification), { isConfirmed: checked }) : notification;
+    });
+    onNotificationsChange === null || onNotificationsChange === void 0 ? void 0 : onNotificationsChange(updatedNotifications);
+  };
+  var handleCheckboxChange = function (id) {
+    if (lodash.isNil(localCheckboxes)) return;
+    var newCheckboxes = __spreadArray([], localCheckboxes, true);
+    var index = lodash.findIndex(localCheckboxes, function (checkbox) {
+      return checkbox.id === id;
+    });
+    if (index < 0) return;
+    newCheckboxes[index] = __assign(__assign({}, newCheckboxes[index]), { isSelected: !newCheckboxes[index].isSelected });
+    setLocalCheckboxes(newCheckboxes);
+    onCheckboxesChange === null || onCheckboxesChange === void 0 ? void 0 : onCheckboxesChange(newCheckboxes);
+  };
+  return React__default['default'].createElement(
+    React__default['default'].Fragment,
+    null,
+    isSubmitting && ((renderLoader === null || renderLoader === void 0 ? void 0 : renderLoader()) || React__default['default'].createElement(Loader, null)),
+    !isSubmitting &&
+      React__default['default'].createElement(
+        'form',
+        { className: 'form', name: 'booking--summary', id: 'booking--summary', onSubmit: onSubmit },
+        React__default['default'].createElement(
+          'div',
+          { className: 'form__booking--summary' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.PERSONAL_DETAILS)
+                )
+              )
+            ),
+            travelerFormValues.rooms.map(function (room, roomIndex) {
+              var _a, _b;
+              return React__default['default'].createElement(
+                'div',
+                { className: 'form__row', key: roomIndex },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'form__region-header' },
+                    React__default['default'].createElement(
+                      'h5',
+                      { className: 'form__region-heading' },
+                      travelerFormValues.rooms.length > 1
+                        ? ''.concat(translations.SHARED.ROOM, ' ').concat(roomIndex + 1)
+                        : translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP
+                    ),
+                    React__default['default'].createElement(
+                      'p',
+                      { className: 'form__region-label' },
+                      ''
+                        .concat(room.adults.length + room.children.length, ' ')
+                        .concat(room.adults.length + room.children.length === 1 ? translations.SUMMARY.TRAVELER : translations.SUMMARY.TRAVELERS, ': ')
+                        .concat(
+                          lodash
+                            .compact([
+                              room.adults.length,
+                              room.adults.length === 1 && ' '.concat(translations.SUMMARY.ADULT),
+                              room.adults.length > 1 && ' '.concat(translations.SUMMARY.ADULTS),
+                              ((_a = room.adults) === null || _a === void 0 ? void 0 : _a.length) &&
+                                ((_b = room.children) === null || _b === void 0 ? void 0 : _b.length) &&
+                                ', ',
+                              room.children.length,
+                              room.children.length === 1 && ' '.concat(translations.SUMMARY.CHILD),
+                              room.children.length > 1 && ' '.concat(translations.SUMMARY.CHILDREN)
+                            ])
+                            .join('')
+                        )
+                    )
+                  )
+                ),
+                __spreadArray(__spreadArray([], room.adults, true), room.children, true).map(function (traveler) {
+                  var isMainBooker = traveler.id === travelerFormValues.mainBookerId;
+                  return React__default['default'].createElement(
+                    'div',
+                    { className: 'form__group form__group--sm-50', key: traveler.id },
+                    React__default['default'].createElement(
+                      'ul',
+                      { className: 'list list--plain' },
+                      React__default['default'].createElement(
+                        'li',
+                        { className: 'list__item' },
+                        React__default['default'].createElement('strong', null, traveler.firstName, ' ', traveler.lastName),
+                        ' ',
+                        isMainBooker && React__default['default'].createElement('em', null, '(', translations.SUMMARY.MAIN_BOOKER, ')')
+                      ),
+                      React__default['default'].createElement('li', { className: 'list__item' }, formatBirthDate(traveler.birthDate)),
+                      isMainBooker &&
+                        React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          null,
+                          travelerFormValues.street &&
+                            React__default['default'].createElement(
+                              'li',
+                              { className: 'list__item' },
+                              ''
+                                .concat(travelerFormValues.street, ' ')
+                                .concat(lodash.compact([travelerFormValues.houseNumber, travelerFormValues.box]).join(' '), ', ')
+                                .concat(travelerFormValues.zipCode, ' ')
+                                .concat(travelerFormValues.place)
+                            ),
+                          travelerFormValues.phone && React__default['default'].createElement('li', { className: 'list__item' }, travelerFormValues.phone),
+                          travelerFormValues.email && React__default['default'].createElement('li', { className: 'list__item' }, travelerFormValues.email)
+                        )
+                    )
+                  );
+                })
+              );
+            })
+          ),
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.OPTIONS)
+                )
+              )
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement('ul', { className: 'list list--booking-summary' }, renderOptions())
+              )
+            )
+          ),
+          enableVoucher &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__region' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__row' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'form__region-header' },
+                    React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.VOUCHERS)
+                  )
+                )
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__row' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default['default'].createElement('input', {
+                    type: 'text',
+                    className: 'form__input info-message__voucher__input',
+                    value: (_b = voucher.code) !== null && _b !== void 0 ? _b : '',
+                    onChange: function (event) {
+                      return onVoucherChange === null || onVoucherChange === void 0 ? void 0 : onVoucherChange({ code: event.target.value });
+                    }
+                  }),
+                  React__default['default'].createElement(
+                    'button',
+                    { type: 'button', className: buildClassName(['cta', !voucher.code && 'cta--disabled']), onClick: onValidateVoucher },
+                    translations.SUMMARY.VOUCHER_VALIDATE
+                  )
+                )
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__row' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__group info-message__voucher' },
+                  voucher.isValid &&
+                    voucher.isValidated &&
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'info-message info-message__voucher__valid' },
+                      React__default['default'].createElement('span', null, translations.SUMMARY.VOUCHER_VALID),
+                      React__default['default'].createElement(
+                        'button',
+                        { type: 'button', className: 'cta cta--secondary', onClick: onAddVoucher },
+                        translations.SUMMARY.ADD_VOUCHER
+                      )
+                    ),
+                  !voucher.isValid &&
+                    voucher.isValidated &&
+                    React__default['default'].createElement('div', { className: 'info-message--error' }, translations.SUMMARY.VOUCHER_INVALID)
+                )
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__row' },
+                React__default['default'].createElement(
+                  'ul',
+                  { className: 'info-message__voucher' },
+                  !lodash.isEmpty(voucherCodes) &&
+                    voucherCodes.map(function (code, index) {
+                      return React__default['default'].createElement(
+                        'li',
+                        { key: ''.concat(code, '-').concat(index) },
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'info-message__voucher__list' },
+                          code,
+                          ' ',
+                          React__default['default'].createElement(
+                            'button',
+                            {
+                              type: 'button',
+                              className: 'cta--add-remove',
+                              onClick: function () {
+                                return onRemoveVoucher === null || onRemoveVoucher === void 0 ? void 0 : onRemoveVoucher(code);
+                              }
+                            },
+                            React__default['default'].createElement(Icon, { height: 16, name: 'ui-trashcan' })
+                          )
+                        )
+                      );
+                    })
+                )
+              )
+            ),
+          !lodash.isEmpty(notifications) &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__region' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__row' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'info-message' },
+                    React__default['default'].createElement(Icon, { name: 'ui-tooltip', className: 'icon--secondary-color' }),
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'info-message__copy' },
+                      React__default['default'].createElement('h5', null, translations.SUMMARY.NOTIFICATIONS_TITLE),
+                      lodash
+                        .uniqBy(
+                          (notifications !== null && notifications !== void 0 ? notifications : []).filter(function (notification) {
+                            return !notification.hasToBeConfirmed;
+                          }),
+                          'id'
+                        )
+                        .map(function (notification) {
+                          return React__default['default'].createElement(
+                            'span',
+                            { key: notification.id, className: 'checkbox__label-text' },
+                            React__default['default'].createElement('strong', { className: 'checkbox__label-text--title' }, notification.title),
+                            React__default['default'].createElement('span', { className: 'checkbox__label-text--description' }, notification.description)
+                          );
+                        }),
+                      lodash
+                        .uniqBy(
+                          (notifications !== null && notifications !== void 0 ? notifications : []).filter(function (notification) {
+                            return notification.hasToBeConfirmed;
+                          }),
+                          'id'
+                        )
+                        .map(function (notification) {
+                          return React__default['default'].createElement(
+                            'div',
+                            { className: 'checkbox', key: notification.id },
+                            React__default['default'].createElement(
+                              'label',
+                              { className: 'checkbox__label' },
+                              React__default['default'].createElement('input', {
+                                type: 'checkbox',
+                                className: 'checkbox__input',
+                                checked: notification.isConfirmed,
+                                onChange: function (event) {
+                                  return handleNotificationChange(notification.id, event.target.checked);
+                                }
+                              }),
+                              React__default['default'].createElement(
+                                'span',
+                                { className: 'checkbox__label-text' },
+                                React__default['default'].createElement('strong', { className: 'checkbox__label-text--title' }, notification.title),
+                                React__default['default'].createElement('span', { className: 'checkbox__label-text--description' }, notification.description)
+                              )
+                            )
+                          );
+                        })
+                    )
+                  )
+                )
+              )
+            ),
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default['default'].createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.REMARKS)
+                )
+              )
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement('textarea', {
+                  className: 'form__input',
+                  value: remarks,
+                  onChange: function (event) {
+                    return onRemarksChange === null || onRemarksChange === void 0 ? void 0 : onRemarksChange(event.target.value);
+                  }
+                })
+              )
+            )
+          ),
+          React__default['default'].createElement(
+            'div',
+            { className: 'form__region' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'form__row' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'form__group' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'info-message' },
+                  React__default['default'].createElement(Icon, { name: 'ui-tooltip', className: 'icon--secondary-color' }),
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'info-message__copy' },
+                    React__default['default'].createElement('h5', null, translations.SUMMARY.VALIDATE_TITLE),
+                    customValidateText
+                      ? React__default['default'].createElement('div', { dangerouslySetInnerHTML: { __html: customValidateText } })
+                      : React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          null,
+                          React__default['default'].createElement(
+                            'p',
+                            null,
+                            isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING
+                          ),
+                          allowOption && React__default['default'].createElement('p', null, translations.SUMMARY.VALIDATE_TEXT_OPTION)
+                        ),
+                    localCheckboxes === null || localCheckboxes === void 0
+                      ? void 0
+                      : localCheckboxes.map(function (checkbox) {
+                          return React__default['default'].createElement(
+                            'div',
+                            { className: 'checkbox', key: checkbox.id },
+                            React__default['default'].createElement(
+                              'label',
+                              { className: 'checkbox__label' },
+                              React__default['default'].createElement('input', {
+                                type: 'checkbox',
+                                className: 'checkbox__input',
+                                checked: checkbox.isSelected,
+                                onChange: function () {
+                                  return handleCheckboxChange(checkbox.id);
+                                }
+                              }),
+                              React__default['default'].createElement('span', {
+                                className: 'checkbox__label-text',
+                                dangerouslySetInnerHTML: { __html: checkbox.text }
+                              })
+                            )
+                          );
+                        })
+                  )
+                )
+              )
+            )
+          )
+        ),
+        React__default['default'].createElement(
+          'div',
+          { className: 'booking__navigator' },
+          renderPreviousButton(),
+          allowOption &&
+            React__default['default'].createElement(
+              'button',
+              {
+                title: translations.STEPS.SUBMIT_OPTION,
+                className: buildClassName(['cta', !userValidated && 'cta--disabled']),
+                disabled: !userValidated,
+                name: 'option'
+              },
+              translations.STEPS.SUBMIT_OPTION
+            ),
+          React__default['default'].createElement(
+            'button',
+            {
+              title: isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING,
+              className: buildClassName(['cta', !userValidated && 'cta--disabled']),
+              disabled: !userValidated,
+              name: 'default'
+            },
+            isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING
+          )
+        )
+      )
+  );
+};
+var renderEditablePackagingEntrySummaryOptions = function (editablePackagingEntry, priceDetails, translations) {
+  var _a, _b;
+  var priceDetailsByProduct = lodash.groupBy(
+    (_a = priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.details) !== null && _a !== void 0 ? _a : [],
+    function (detail) {
+      return ''.concat(detail.productCode, '|').concat(detail.accommodationCode);
+    }
+  );
+  return (
+    (_b = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.lines) !== null && _b !== void 0 ? _b : []
+  ).map(function (line) {
+    var _a, _b, _c;
+    var groupedPriceDetails = (_a = priceDetailsByProduct[''.concat(line.productCode, '|').concat(line.accommodationCode)]) !== null && _a !== void 0 ? _a : [];
+    var visiblePriceDetails = groupedPriceDetails.filter(function (detail) {
+      return detail.showPrice || detail.isSeparate;
+    });
+    return React__default['default'].createElement(
+      'li',
+      { key: line.guid },
+      React__default['default'].createElement('h6', null, line.productName),
+      React__default['default'].createElement(
+        'ul',
+        null,
+        React__default['default'].createElement('li', { className: 'list__item' }, lodash.compact([line.accommodationName, line.regimeName]).join(', ')),
+        (_c = (_b = line.flightInformation) === null || _b === void 0 ? void 0 : _b.flightLines) === null || _c === void 0
+          ? void 0
+          : _c.map(function (flightLine, index) {
+              var _a, _b;
+              return React__default['default'].createElement(
+                'li',
+                { className: 'list__item', key: ''.concat(line.guid, '-').concat(index) },
+                flightLine.departureAirportCode,
+                ' ',
+                (_a = flightLine.departureTime) === null || _a === void 0 ? void 0 : _a.slice(0, 5),
+                ' > ',
+                flightLine.arrivalAirportCode,
+                ' ',
+                (_b = flightLine.arrivalTime) === null || _b === void 0 ? void 0 : _b.slice(0, 5),
+                ' (',
+                flightLine.operatingFlightNumber || ''.concat(flightLine.airlineCode).concat(flightLine.flightNumber),
+                ')'
+              );
+            }),
+        !lodash.isEmpty(visiblePriceDetails) &&
+          visiblePriceDetails.map(function (detail, index) {
+            var _a;
+            return React__default['default'].createElement(
+              'li',
+              { className: 'list__item', key: ''.concat(line.guid, '-price-').concat(index) },
+              detail.priceDescription,
+              ': ',
+              (_a = detail.total) === null || _a === void 0 ? void 0 : _a.toLocaleString(undefined, { style: 'currency', currency: 'EUR' })
+            );
+          })
+      ),
+      React__default['default'].createElement(
+        'p',
+        null,
+        '(',
+        line.from === line.to
+          ? getDateText(line.from)
+          : React__default['default'].createElement(React__default['default'].Fragment, null, getDateText(line.from), ' > ', getDateText(line.to)),
+        ')'
+      )
+    );
+  });
+};
+var travelerFormFields = [{ type: 'gender' }, { type: 'firstName' }, { type: 'lastName' }, { type: 'birthDate' }];
+var mainBookerFormFields = [
+  { type: 'street' },
+  { type: 'houseNumber' },
+  { type: 'box' },
+  { type: 'zipCode' },
+  { type: 'place' },
+  { type: 'country' },
+  { type: 'phone' },
+  { type: 'email' }
+];
+var travellersSettings = {
+  countries: [
+    { iso2: 'BE', name: 'Belgium', phonePrefix: '+32' },
+    { iso2: 'NL', name: 'Netherlands', phonePrefix: '+31' },
+    { iso2: 'FR', name: 'France', phonePrefix: '+33' }
+  ],
+  formFields: travelerFormFields,
+  mainBookerFormFields: mainBookerFormFields
+};
+var BookPackagingEntry = function (_a) {
+  var _b, _c;
+  var activeSearchSeed = _a.activeSearchSeed,
+    isConfirmationPage = _a.isConfirmationPage;
   var context = React.useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-  var translations = getTranslations((_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
-  var currentStep = reactRedux.useSelector(function (state) {
-    return state.searchResults;
-  }).currentStep;
-  reactRedux.useDispatch();
+  var dispatch = reactRedux.useDispatch();
+  var _d = reactRedux.useSelector(function (state) {
+      return state.searchResults;
+    }),
+    editablePackagingEntry = _d.editablePackagingEntry,
+    priceDetails = _d.priceDetails,
+    currentStep = _d.currentStep,
+    bookingNumber = _d.bookingNumber;
+  var _e = React.useState([]),
+    countries = _e[0],
+    setCountries = _e[1];
+  var _f = React.useState(true),
+    userValidated = _f[0],
+    setUserValidated = _f[1];
+  var _g = React.useState(''),
+    remarks = _g[0],
+    setRemarks = _g[1];
+  var _h = React.useState(false),
+    isSubmitting = _h[0],
+    setIsSubmitting = _h[1];
+  if (!context || !editablePackagingEntry || !priceDetails) return null;
+  var config = {
+    host: context.tideConnection.host,
+    apiKey: context.tideConnection.apiKey
+  };
+  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
   var stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
+  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
+  console.log('priceDetails in WLSidebar:', priceDetails);
+  var initialValues = React.useMemo(
+    function () {
+      return createInitialValuesFromEditablePackagingEntry(editablePackagingEntry);
+    },
+    [editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.transactionId]
+  );
+  var formik$1 = formik.useFormik({
+    initialValues: initialValues,
+    enableReinitialize: true,
+    validate: function (values) {
+      return validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields);
+    },
+    onSubmit: function (values) {
+      dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
+      dispatch(setCurrentStep(1));
+    }
+  });
+  React.useEffect(function () {
+    if (!context) return;
+    var controller = new AbortController();
+    (function () {
+      return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              _b.trys.push([0, 2, , 3]);
+              return [4 /*yield*/, build.getCountries(config, controller.signal)];
+            case 1:
+              result = _b.sent();
+              setCountries(result.items);
+              return [3 /*break*/, 3];
+            case 2:
+              _b.sent();
+              return [3 /*break*/, 3];
+            case 3:
+              return [2 /*return*/];
+          }
+        });
+      });
+    })();
+    return function () {
+      return controller.abort();
+    };
+  }, []);
+  React.useEffect(
+    function () {
+      if (isConfirmationPage) {
+        dispatch(setCurrentStep(2));
+      }
+    },
+    [isConfirmationPage, dispatch]
+  );
+  var handleSummarySubmit = function (e) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var updatedEditablePackagingEntry, redirectUrl, request, bookingResponse;
+      var _a, _b;
+      return __generator(this, function (_c) {
+        switch (_c.label) {
+          case 0:
+            e.preventDefault();
+            setIsSubmitting(true);
+            if (typeof window !== 'undefined') {
+              window.scrollTo(0, 0);
+            }
+            updatedEditablePackagingEntry = __assign(__assign({}, editablePackagingEntry), { remarks: remarks });
+            if (context.generatePaymentUrl && typeof window !== 'undefined') {
+              redirectUrl = new URL(window.location.href);
+              redirectUrl.searchParams.set('bookingConfirmation', 'true');
+              redirectUrl.searchParams.set('link', '');
+              updatedEditablePackagingEntry = __assign(__assign({}, updatedEditablePackagingEntry), {
+                redirectUrl: redirectUrl.toString(),
+                returnPaymentUrl: true
+              });
+            }
+            dispatch(setEditablePackagingEntry(updatedEditablePackagingEntry));
+            _c.label = 1;
+          case 1:
+            _c.trys.push([1, 3, 4, 5]);
+            request = {
+              language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
+              officeId: context.tideConnection.officeId,
+              catalogueId: (_b = context.searchConfiguration.defaultCatalogueId) !== null && _b !== void 0 ? _b : 0,
+              agentId: context.agentId,
+              payload: updatedEditablePackagingEntry
+            };
+            return [4 /*yield*/, build.bookPackagingEntry(config, request)];
+          case 2:
+            bookingResponse = _c.sent();
+            dispatch(setBookingNumber(bookingResponse.number));
+            if (bookingResponse.paymentUrl) {
+              window.location.href = bookingResponse.paymentUrl;
+            } else {
+              dispatch(setCurrentStep(2));
+            }
+            return [3 /*break*/, 5];
+          case 3:
+            _c.sent();
+            dispatch(setCurrentStep(3));
+            return [3 /*break*/, 5];
+          case 4:
+            setIsSubmitting(false);
+            return [7 /*endfinally*/];
+          case 5:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
   return React__default['default'].createElement(
     'div',
     { className: 'booking' },
@@ -46994,16 +47652,77 @@ var BookPackagingEntry = function (_a) {
       'div',
       { className: 'booking__content' },
       React__default['default'].createElement(
-        BookingPanel,
-        {
-          currentStep: currentStep,
-          stepLabels: stepLabels,
-          StepIndicatorsComponent: StepIndicators$1,
-          renderTitle: function (step) {
-            return React__default['default'].createElement(React__default['default'].Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
-          }
-        },
-        React__default['default'].createElement('div', null)
+        'div',
+        { className: 'booking__panel' },
+        React__default['default'].createElement(
+          BookingPanel,
+          {
+            currentStep: currentStep,
+            stepLabels: stepLabels,
+            StepIndicatorsComponent: StepIndicators$1,
+            renderTitle: function (step) {
+              return React__default['default'].createElement(React__default['default'].Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
+            }
+          },
+          currentStep === 0 &&
+            React__default['default'].createElement(SharedTravelersForm, {
+              formik: formik$1,
+              translations: translations,
+              travellersSettings: travellersSettings,
+              countries: countries,
+              travelersFirstStep: false,
+              isUnavailable: false,
+              useCompactForm: false,
+              showAgentSelection: false
+            }),
+          currentStep === 1 &&
+            React__default['default'].createElement(SharedSummary, {
+              translations: translations,
+              travelerFormValues: formik$1.values,
+              isSubmitting: isSubmitting,
+              userValidated: userValidated,
+              remarks: remarks,
+              enableVoucher: false,
+              allowOption: false,
+              isOffer: false,
+              onUserValidatedChange: setUserValidated,
+              onRemarksChange: setRemarks,
+              onSubmit: handleSummarySubmit,
+              renderOptions: function () {
+                return renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails);
+              },
+              renderPreviousButton: function () {
+                return React__default['default'].createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    title: translations.STEPS.PREVIOUS,
+                    onClick: function () {
+                      return dispatch(setCurrentStep(0));
+                    },
+                    className: 'cta cta--secondary'
+                  },
+                  translations.STEPS.PREVIOUS
+                );
+              }
+            }),
+          currentStep === 2 &&
+            React__default['default'].createElement(SharedConfirmation, {
+              bookingNumber:
+                (_c =
+                  bookingNumber !== null && bookingNumber !== void 0
+                    ? bookingNumber
+                    : editablePackagingEntry === null || editablePackagingEntry === void 0
+                    ? void 0
+                    : editablePackagingEntry.dossierNumber) !== null && _c !== void 0
+                  ? _c
+                  : '',
+              isOption: false,
+              isOffer: false,
+              translations: translations.CONFIRMATION
+            }),
+          currentStep === 3 && React__default['default'].createElement('div', null)
+        )
       ),
       React__default['default'].createElement('div', { className: 'backdrop', id: 'backdrop' }),
       React__default['default'].createElement(WLSidebar, { activeSearchSeed: activeSearchSeed })
@@ -47063,9 +47782,12 @@ var SearchResultsContainer = function () {
   var _k = React.useState(false),
     itineraryOpen = _k[0],
     setItineraryOpen = _k[1];
-  var _l = React.useState(null),
-    selectedAccommodationSeed = _l[0],
-    setSelectedAccommodationSeed = _l[1];
+  var _l = React.useState(false),
+    isBookingConfirmation = _l[0],
+    setIsBookingConfirmation = _l[1];
+  var _m = React.useState(null),
+    selectedAccommodationSeed = _m[0],
+    setSelectedAccommodationSeed = _m[1];
   var skipInitialPackagingAccoDetailsRef = React.useRef(false);
   var panelRef = React.useRef(null);
   var sortByTypes = [
@@ -47810,6 +48532,13 @@ var SearchResultsContainer = function () {
       if (context === null || context === void 0 ? void 0 : context.packagingEntry) {
         dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
         dispatch(setTransactionId(context.packagingEntry.transactionId));
+        var params = new URLSearchParams(location.search);
+        var bookingConfirmation = getStringFromParams(params, 'bookingConfirmation');
+        console.log('bookingConfirmation', bookingConfirmation);
+        if (bookingConfirmation == 'true') {
+          setIsBookingConfirmation(true);
+          dispatch(setBookPackagingEntry(true));
+        }
       }
     },
     [context === null || context === void 0 ? void 0 : context.packagingEntry]
@@ -48514,38 +49243,45 @@ var SearchResultsContainer = function () {
     return __assign(__assign({}, entry), { language: language, transactionId: transactionId, pax: entry.pax, lines: nextLines });
   };
   var buildBasePackagingEntry = function (sourceEntry, seed, transactionId, language) {
-    var _a, _b;
+    var _a;
     if (sourceEntry) {
       return structuredClone(sourceEntry);
     }
     var paxId = 0;
-    var pax =
-      (_b =
-        (_a = seed.rooms) === null || _a === void 0
-          ? void 0
-          : _a.flatMap(function (room, roomIndex) {
-              return room.pax.map(function (_, paxIndex) {
-                return {
-                  id: paxId++,
-                  firstName: '',
-                  lastName: '',
-                  dateOfBirth: null,
-                  isMainBooker: roomIndex === 0 && paxIndex === 0
-                };
-              });
-            })) !== null && _b !== void 0
-        ? _b
-        : [];
+    var pax = [];
+    var rooms = [];
+    (_a = seed.rooms) === null || _a === void 0
+      ? void 0
+      : _a.forEach(function (room, roomIndex) {
+          var paxIds = room.pax.map(function (_, paxIndex) {
+            var id = paxId++;
+            pax.push({
+              id: id,
+              firstName: '',
+              lastName: '',
+              dateOfBirth: null,
+              isMainBooker: roomIndex === 0 && paxIndex === 0
+            });
+            return id;
+          });
+          rooms.push({
+            id: roomIndex,
+            paxIds: paxIds
+          });
+        });
     return {
       language: language,
       transactionId: transactionId,
       dossierNumber: '',
-      status: 0,
+      status: context === null || context === void 0 ? void 0 : context.entryStatus,
+      customStatusId: context === null || context === void 0 ? void 0 : context.customEntryStatusId,
       bookingDate: null,
       price: 0,
       depositAmount: 0,
       pax: pax,
-      lines: []
+      rooms: rooms,
+      lines: [],
+      address: {}
     };
   };
   var handleShowMoreFlights = function (flyInType) {
@@ -48560,7 +49296,7 @@ var SearchResultsContainer = function () {
         'div',
         { className: 'search' },
         bookPackagingEntry
-          ? React__default['default'].createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed })
+          ? React__default['default'].createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed, isConfirmationPage: isBookingConfirmation })
           : React__default['default'].createElement(
               'div',
               { className: 'search__container' },