@qite/tide-booking-component 1.4.110 → 1.4.112

package/build/build-esm/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect, useContext, useState, useRef, useCallback, useMemo } from 'react';
 import JsonURL from '@jsonurl/jsonurl';
 import {
-  format as format$1,
+  format as format$2,
   isToday,
   getDate,
   getYear,
@@ -54,8 +54,8 @@ import {
   sum,
   last,
   findIndex as findIndex$1,
-  get,
   set,
+  get,
   isEqual as isEqual$1,
   groupBy,
   minBy,
@@ -81,9 +81,9 @@ import {
   Route
 } from 'react-router';
 import 'react-dom';
-import flat from 'flat';
-import { useFormik } from 'formik';
 import produce from 'immer';
+import { useFormik } from 'formik';
+import flat from 'flat';
 import { v4 } from 'uuid';
 
 function _mergeNamespaces(n, m) {
@@ -7118,7 +7118,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];
   });
@@ -7158,7 +7158,7 @@ var longFormatDate = function (dateTime, language) {
     return '';
   }
   var locale = getLocale(language);
-  var formattedDate = format$1(new Date(dateTime), 'eee dd MMM yy', { locale: locale });
+  var formattedDate = format$2(new Date(dateTime), 'eee dd MMM yy', { locale: locale });
   return formattedDate;
 };
 var durationTicksInHoursString = function (durationInTicks) {
@@ -13087,7 +13087,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) {
@@ -13192,7 +13192,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);
@@ -13715,6 +13715,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;
@@ -13759,6 +13760,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;
@@ -13782,6 +13789,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;
@@ -13846,9 +13854,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 (isNil(HOST)) {
     throw Error('Environment variable "HOST" was not set.');
@@ -17009,7 +17024,7 @@ var Calendar$1 = function (_a) {
           { className: buildClassName(['calendar__previous', !hasPreviousButton && 'calendar__previous--disabled']), onClick: handlePreviousClick },
           React__default.createElement(Icon, { name: 'ui-chevron' })
         ),
-        React__default.createElement('div', { className: 'calendar__current-month' }, format$1(focusDate, 'MMMM yyyy', { locale: locale })),
+        React__default.createElement('div', { className: 'calendar__current-month' }, format$2(focusDate, 'MMMM yyyy', { locale: locale })),
         React__default.createElement(
           'div',
           { className: buildClassName(['calendar__next', !hasNextButton && 'calendar__next--disabled']), onClick: handleNextClick },
@@ -17023,7 +17038,7 @@ var Calendar$1 = function (_a) {
           return React__default.createElement(
             'div',
             { className: 'calendar__day-label', key: 'day_'.concat(i) },
-            format$1(calendarDays[i], 'EEEEEE', { locale: locale })
+            format$2(calendarDays[i], 'EEEEEE', { locale: locale })
           );
         })
       )
@@ -17298,7 +17313,7 @@ var Dates = function (_a) {
         React__default.createElement('input', {
           type: 'text',
           readOnly: true,
-          value: (value === null || value === void 0 ? void 0 : value.fromDate) ? format$1(value.fromDate, 'dd/MM/yyyy') : '',
+          value: (value === null || value === void 0 ? void 0 : value.fromDate) ? format$2(value.fromDate, 'dd/MM/yyyy') : '',
           className: 'form__input',
           placeholder: translations.PRODUCT.DEPARTURE_DATE,
           onClick: handleInputFocus
@@ -17311,7 +17326,7 @@ var Dates = function (_a) {
         React__default.createElement('input', {
           type: 'text',
           readOnly: true,
-          value: (value === null || value === void 0 ? void 0 : value.toDate) ? format$1(value.toDate, 'dd/MM/yyyy') : '',
+          value: (value === null || value === void 0 ? void 0 : value.toDate) ? format$2(value.toDate, 'dd/MM/yyyy') : '',
           className: 'form__input',
           placeholder: translations.PRODUCT.RETURN_DATE,
           onClick: handleInputFocus
@@ -17978,10 +17993,10 @@ var Product = function (_a) {
       }
     }
     if (dateRange === null || dateRange === void 0 ? void 0 : dateRange.fromDate) {
-      params['startDate'] = format$1(dateRange.fromDate, DATE_FORMAT);
+      params['startDate'] = format$2(dateRange.fromDate, DATE_FORMAT);
     }
     if (dateRange === null || dateRange === void 0 ? void 0 : dateRange.toDate) {
-      params['endDate'] = format$1(dateRange.toDate, DATE_FORMAT);
+      params['endDate'] = format$2(dateRange.toDate, DATE_FORMAT);
     }
     params['catalogueId'] = catalogueId.toString();
     if (addProductToQuery) {
@@ -18011,11 +18026,11 @@ var Product = function (_a) {
     }
     setDateRange(value);
     if (value.fromDate && value.toDate && searchType === 1 && searchResults.length > 0) {
-      var from_1 = format$1(value.fromDate, DATE_FORMAT);
-      var to_1 = format$1(value.toDate, DATE_FORMAT);
+      var from_1 = format$2(value.fromDate, DATE_FORMAT);
+      var to_1 = format$2(value.toDate, DATE_FORMAT);
       var selectedItem = searchResults.find(function (item) {
-        var itemFrom = format$1(new Date(item.fromDate), DATE_FORMAT);
-        var itemTo = format$1(new Date(item.toDate), DATE_FORMAT);
+        var itemFrom = format$2(new Date(item.fromDate), DATE_FORMAT);
+        var itemTo = format$2(new Date(item.toDate), DATE_FORMAT);
         return itemFrom === from_1 && itemTo === to_1;
       });
       if (selectedItem) {
@@ -19823,7 +19838,7 @@ var selectBookingQuery = function (state) {
     var key = _a[0],
       value = _a[1];
     if (key === 'startDate' || key === 'endDate') {
-      value = format$1(parseISO(value), 'yyyy-MM-dd');
+      value = format$2(parseISO(value), 'yyyy-MM-dd');
     }
     if (key === 'rooms') {
       value = JsonURL.stringify(
@@ -20694,7 +20709,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,
@@ -20710,7 +20725,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,
@@ -20840,7 +20855,7 @@ var BookingPanel = function (_a) {
     StepIndicatorsComponent = _a.StepIndicatorsComponent;
   return React__default.createElement(
     'div',
-    { className: 'booking__panel' },
+    { className: 'booking__panel__wrapper' },
     React__default.createElement(StepIndicatorsComponent, { currentStep: currentStep, stepLabels: stepLabels }),
     React__default.createElement(
       'div',
@@ -20961,37 +20976,27 @@ var Message = function (_a) {
   );
 };
 
-var Confirmation = function () {
-  var dispatch = useAppDispatch();
-  var settings = useContext(SettingsContext);
-  var navigate = settings.skipRouter ? function () {} : useNavigate();
-  var bookingNumber = useSelector(selectBookingNumber);
-  var bookingQueryString = useSelector(selectBookingQueryString);
-  var isOption = useSelector(selectIsOption);
-  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 = 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.createElement(
     'div',
     { className: 'form form__booking--message', id: 'booking--confirmation' },
@@ -21009,21 +21014,27 @@ var Confirmation = function () {
             {
               type: 'success',
               title: titleText,
-              actionComponent: React__default.createElement(
-                'div',
-                { className: 'sm' },
-                React__default.createElement(
-                  'a',
-                  { href: 'tel://'.concat(settings.companyContactPhone), className: 'sm__icon' },
-                  React__default.createElement(Icon, { name: 'tel' })
-                ),
-                React__default.createElement(
-                  'a',
-                  { href: 'mailto://'.concat(settings.companyContactEmail), className: 'sm__icon' },
-                  React__default.createElement(Icon, { name: 'mail' })
-                ),
-                React__default.createElement('a', { href: '/', className: 'sm__icon' }, React__default.createElement(Icon, { name: 'home' }))
-              )
+              actionComponent:
+                companyContactPhone || companyContactEmail
+                  ? React__default.createElement(
+                      'div',
+                      { className: 'sm' },
+                      companyContactPhone &&
+                        React__default.createElement(
+                          'a',
+                          { href: 'tel://'.concat(companyContactPhone), className: 'sm__icon' },
+                          React__default.createElement(Icon, { name: 'tel' })
+                        ),
+                      companyContactEmail &&
+                        React__default.createElement(
+                          'a',
+                          { href: 'mailto://'.concat(companyContactEmail), className: 'sm__icon' },
+                          React__default.createElement(Icon, { name: 'mail' })
+                        ),
+                      homeUrl &&
+                        React__default.createElement('a', { href: homeUrl, className: 'sm__icon' }, React__default.createElement(Icon, { name: 'home' }))
+                    )
+                  : undefined
             },
             !isOption
               ? React__default.createElement(
@@ -21032,25 +21043,23 @@ var Confirmation = function () {
                   React__default.createElement(
                     'p',
                     null,
-                    translations.CONFIRMATION.MESSAGE_TEXT1,
+                    translations.MESSAGE_TEXT1,
                     React__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.createElement(
-                    'p',
-                    null,
-                    translations.CONFIRMATION.QUESTIONS_TEXT1,
-                    ' ',
+                  companyContactEmail &&
                     React__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.createElement(
+                        'a',
+                        { href: 'mailto:'.concat(companyContactEmail, '?subject=').concat(encodedMailSubject), title: translations.QUESTIONS_ALT },
+                        translations.QUESTIONS_TEXT2
+                      ),
+                      translations.QUESTIONS_TEXT3
+                    )
                 )
               : undefined
           )
@@ -21060,6 +21069,42 @@ var Confirmation = function () {
   );
 };
 
+var Confirmation = function () {
+  var dispatch = useAppDispatch();
+  var settings = useContext(SettingsContext);
+  var navigate = settings.skipRouter ? function () {} : useNavigate();
+  var bookingNumber = useSelector(selectBookingNumber);
+  var bookingQueryString = useSelector(selectBookingQueryString);
+  var isOption = useSelector(selectIsOption);
+  var translations = useSelector(selectTranslations);
+  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.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 = useContext(SettingsContext);
@@ -22063,7 +22108,7 @@ var getDateText = function (date, hideYear) {
     return undefined;
   }
   try {
-    return hideYear ? format$1(parseISO(date), 'dd/MM') : format$1(parseISO(date), 'dd/MM/yyyy');
+    return hideYear ? format$2(parseISO(date), 'dd/MM') : format$2(parseISO(date), 'dd/MM/yyyy');
   } catch (_a) {
     // Error while parsing date
     return undefined;
@@ -22702,9 +22747,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) {
@@ -22785,7 +22830,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.createElement(
     React__default.Fragment,
@@ -24824,9 +24869,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) {
@@ -24935,9 +24980,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
@@ -25389,11 +25434,11 @@ var RoomOptionsForm = function () {
   var isLoading = 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(
         ''
@@ -26613,7 +26658,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));
     }
@@ -26683,12 +26728,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(
                   ''
@@ -26702,7 +26747,7 @@ var Summary = function () {
           case 3:
             _b.sent();
             if (settings.skipRouter) {
-              dispatch(setCurrentStep(ERROR_STEP));
+              dispatch(setCurrentStep$1(ERROR_STEP));
             } else {
               navigate(
                 ''
@@ -26810,7 +26855,7 @@ var Summary = function () {
     dispatch(fetchPriceDetails());
   };
   var goPrevious = function () {
-    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+    dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
   };
   var translations = useSelector(selectTranslations);
   return React__default.createElement(
@@ -27395,218 +27440,6 @@ var Summary = function () {
   );
 };
 
-var LabeledInput = function (_a) {
-  var name = _a.name,
-    type = _a.type,
-    required = _a.required,
-    value = _a.value,
-    defaultValue = _a.defaultValue,
-    min = _a.min,
-    max = _a.max,
-    label = _a.label,
-    placeholder = _a.placeholder,
-    extraClassName = _a.extraClassName,
-    hasError = _a.hasError,
-    onChange = _a.onChange,
-    onBlur = _a.onBlur;
-  return React__default.createElement(
-    'label',
-    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
-    React__default.createElement('span', { className: 'form__label' }, compact([label, required && '*']).join(' ')),
-    React__default.createElement('input', {
-      name: name,
-      type: type !== null && type !== void 0 ? type : 'text',
-      required: required,
-      className: 'form__input',
-      min: min,
-      max: max,
-      placeholder: placeholder,
-      onChange: onChange,
-      onBlur: onBlur,
-      value: value,
-      defaultValue: defaultValue
-    })
-  );
-};
-
-var LabeledSelect = function (_a) {
-  var name = _a.name,
-    id = _a.id,
-    required = _a.required,
-    value = _a.value,
-    defaultValue = _a.defaultValue,
-    label = _a.label,
-    extraClassName = _a.extraClassName,
-    extraDropdownClassName = _a.extraDropdownClassName,
-    hasError = _a.hasError,
-    options = _a.options,
-    onChange = _a.onChange,
-    onBlur = _a.onBlur;
-  return React__default.createElement(
-    'label',
-    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
-    React__default.createElement('span', { className: 'form__label' }, compact([label, required && '*']).join(' ')),
-    React__default.createElement(
-      'div',
-      { className: buildClassName(['dropdown', extraDropdownClassName]) },
-      React__default.createElement(
-        'select',
-        { name: name, id: id, defaultValue: defaultValue, value: value, onBlur: onBlur, onChange: onChange },
-        options === null || options === void 0
-          ? void 0
-          : options.map(function (option) {
-              return React__default.createElement('option', { key: option.key, value: option.value }, option.label);
-            })
-      )
-    )
-  );
-};
-
-var hasVisibleError = function (formik, key) {
-  return get(formik.errors, key) && get(formik.touched, key);
-};
-
-var GenderControl = function (_a) {
-  var translations = _a.translations,
-    value = _a.value,
-    formik = _a.formik,
-    name = _a.name;
-  return React__default.createElement(
-    'div',
-    { className: buildClassName(['form__group', hasVisibleError(formik, name) && 'form__group--error']) },
-    React__default.createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
-    React__default.createElement(
-      'div',
-      { className: 'radiobutton-group' },
-      React__default.createElement(
-        'div',
-        { className: 'radiobutton' },
-        React__default.createElement(
-          'label',
-          { className: 'radiobutton__label' },
-          React__default.createElement('input', {
-            type: 'radio',
-            className: 'radiobutton__input',
-            name: name,
-            onChange: formik.handleChange,
-            onBlur: formik.handleBlur,
-            value: 'm',
-            checked: value.gender === 'm'
-          }),
-          translations.TRAVELERS_FORM.MALE_GENDER
-        )
-      ),
-      React__default.createElement(
-        'div',
-        { className: 'radiobutton' },
-        React__default.createElement(
-          'label',
-          { className: 'radiobutton__label' },
-          React__default.createElement('input', {
-            type: 'radio',
-            className: 'radiobutton__input',
-            name: name,
-            onChange: formik.handleChange,
-            onBlur: formik.handleBlur,
-            value: 'f',
-            checked: value.gender === 'f'
-          }),
-          translations.TRAVELERS_FORM.FEMALE_GENDER
-        )
-      )
-    )
-  );
-};
-
-var TypeAheadInput = function (_a) {
-  var name = _a.name,
-    value = _a.value,
-    placeholder = _a.placeholder,
-    options = _a.options,
-    onChange = _a.onChange,
-    onSelect = _a.onSelect,
-    onClear = _a.onClear;
-  var _b = useState(false),
-    showItems = _b[0],
-    setShowItems = _b[1];
-  var handleChange = function (e) {
-    if (onChange) {
-      onChange(e.target.value);
-    }
-  };
-  var handleClearClick = function (e) {
-    if (onClear) {
-      onClear();
-    }
-    setShowItems(false);
-  };
-  return React__default.createElement(
-    'div',
-    { className: 'typeahead' },
-    React__default.createElement(
-      'div',
-      { className: 'typeahead__trigger typeahead__trigger--icon' },
-      React__default.createElement(Icon, { name: 'ui-qsm-location' }),
-      React__default.createElement('input', {
-        type: 'text',
-        className: 'form__input',
-        name: name,
-        value: value,
-        onChange: handleChange,
-        placeholder: placeholder,
-        required: true,
-        autoComplete: 'off',
-        onKeyDown: function (e) {
-          if (e.key === 'Tab' && options && onSelect) {
-            onSelect(options[0].key);
-            setShowItems(false);
-          }
-        },
-        onFocus: function () {
-          return setShowItems(true);
-        }
-      }),
-      React__default.createElement('button', { type: 'button', className: 'button button--clear', onClick: handleClearClick })
-    ),
-    options &&
-      options.length > 0 &&
-      showItems &&
-      React__default.createElement(
-        'div',
-        { className: 'typeahead__options' },
-        (options !== null && options !== void 0 ? options : []).map(function (option) {
-          var _a;
-          var matchIndex = typeof value !== 'undefined' ? option.text.indexOf(value) : 0;
-          var prefix = option.text.slice(0, matchIndex);
-          var highlight = option.text.slice(matchIndex, (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0);
-          var suffix = option.text.slice(matchIndex);
-          return React__default.createElement(
-            'div',
-            { className: 'typeahead__option', key: option.key },
-            React__default.createElement(
-              'div',
-              { className: 'typeahead__option-header' },
-              React__default.createElement(
-                'button',
-                {
-                  onClick: function () {
-                    if (onSelect) onSelect(option.key);
-                    setShowItems(false);
-                  },
-                  type: 'button',
-                  className: 'button button--plain'
-                },
-                prefix,
-                React__default.createElement('span', { className: 'typeahead__option-highlight' }, highlight),
-                suffix
-              )
-            )
-          );
-        })
-      )
-  );
-};
-
 function isValidEmail(email) {
   return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,24}$/i.test(email);
 }
@@ -27646,18 +27479,18 @@ var validateForm = function (values, agentRequired, bookingType, translations, f
   };
   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]);
+      ? 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(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_ADULT, [room, pax])
-      : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT, [pax]);
+      ? 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(translations.TRAVELERS_FORM.VALIDATION.TRAVELER_X_IS_NO_CHILD, [room, pax])
-      : format(translations.TRAVELERS_FORM.VALIDATION.SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD, [pax]);
+      ? 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) {
@@ -27742,38 +27575,38 @@ var validateForm = function (values, agentRequired, bookingType, translations, f
   }
   if (bookingType != 'b2b' || (mainBookerFormFields === null || mainBookerFormFields === void 0 ? void 0 : mainBookerFormFields.length)) {
     if (isEmpty(values.street) && isMainBookerFormFieldPresent('street')) {
-      errors.street = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.STREET]);
+      errors.street = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.STREET]);
     }
     if (isEmpty(values.houseNumber) && isMainBookerFormFieldPresent('houseNumber')) {
-      errors.houseNumber = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.HOUSE_NUMBER]);
+      errors.houseNumber = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.HOUSE_NUMBER]);
     }
     if (isEmpty(values.zipCode) && isMainBookerFormFieldPresent('zipCode')) {
-      errors.zipCode = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.ZIPCODE]);
+      errors.zipCode = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.ZIPCODE]);
     }
     if (isEmpty(values.place) && isMainBookerFormFieldPresent('place')) {
-      errors.place = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.CITY]);
+      errors.place = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.CITY]);
     }
     if (isMainBookerFormFieldPresent('email')) {
       if (isEmpty(values.email)) {
-        errors.email = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.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 (isEmpty(values.emailConfirmation)) {
-        errors.emailConfirmation = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.REPEAT_EMAIL]);
+        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 (isEmpty(values.country) && isMainBookerFormFieldPresent('country')) {
-      errors.country = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.COUNTRY]);
+      errors.country = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.COUNTRY]);
     }
     if (isEmpty(values.phone) && isMainBookerFormFieldPresent('phone')) {
-      errors.phone = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
+      errors.phone = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
     }
   } else {
     if (isEmpty(values.phone)) {
-      errors.phone = format(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
+      errors.phone = format$1(translations.TRAVELERS_FORM.VALIDATION.MAIN_BOOKER_FIELD, [translations.TRAVELERS_FORM.PHONE]);
     }
   }
   if (agentRequired && !values.travelAgentId) {
@@ -27782,6 +27615,73 @@ var validateForm = function (values, agentRequired, bookingType, translations, f
   return errors;
 };
 
+var LabeledInput = function (_a) {
+  var name = _a.name,
+    type = _a.type,
+    required = _a.required,
+    value = _a.value,
+    defaultValue = _a.defaultValue,
+    min = _a.min,
+    max = _a.max,
+    label = _a.label,
+    placeholder = _a.placeholder,
+    extraClassName = _a.extraClassName,
+    hasError = _a.hasError,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur;
+  return React__default.createElement(
+    'label',
+    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
+    React__default.createElement('span', { className: 'form__label' }, compact([label, required && '*']).join(' ')),
+    React__default.createElement('input', {
+      name: name,
+      type: type !== null && type !== void 0 ? type : 'text',
+      required: required,
+      className: 'form__input',
+      min: min,
+      max: max,
+      placeholder: placeholder,
+      onChange: onChange,
+      onBlur: onBlur,
+      value: value,
+      defaultValue: defaultValue
+    })
+  );
+};
+
+var LabeledSelect = function (_a) {
+  var name = _a.name,
+    id = _a.id,
+    required = _a.required,
+    value = _a.value,
+    defaultValue = _a.defaultValue,
+    label = _a.label,
+    extraClassName = _a.extraClassName,
+    extraDropdownClassName = _a.extraDropdownClassName,
+    hasError = _a.hasError,
+    options = _a.options,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur;
+  return React__default.createElement(
+    'label',
+    { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
+    React__default.createElement('span', { className: 'form__label' }, compact([label, required && '*']).join(' ')),
+    React__default.createElement(
+      'div',
+      { className: buildClassName(['dropdown', extraDropdownClassName]) },
+      React__default.createElement(
+        'select',
+        { name: name, id: id, defaultValue: defaultValue, value: value, onBlur: onBlur, onChange: onChange },
+        options === null || options === void 0
+          ? void 0
+          : options.map(function (option) {
+              return React__default.createElement('option', { key: option.key, value: option.value }, option.label);
+            })
+      )
+    )
+  );
+};
+
 var normalize = function (v) {
   return v == null ? '' : String(v);
 };
@@ -27913,6 +27813,151 @@ var PhoneInput = function (_a) {
   );
 };
 
+var hasVisibleError = function (formik, key) {
+  return get(formik.errors, key) && get(formik.touched, key);
+};
+
+var GenderControl = function (_a) {
+  var translations = _a.translations,
+    value = _a.value,
+    formik = _a.formik,
+    name = _a.name;
+  return React__default.createElement(
+    'div',
+    { className: buildClassName(['form__group', hasVisibleError(formik, name) && 'form__group--error']) },
+    React__default.createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
+    React__default.createElement(
+      'div',
+      { className: 'radiobutton-group' },
+      React__default.createElement(
+        'div',
+        { className: 'radiobutton' },
+        React__default.createElement(
+          'label',
+          { className: 'radiobutton__label' },
+          React__default.createElement('input', {
+            type: 'radio',
+            className: 'radiobutton__input',
+            name: name,
+            onChange: formik.handleChange,
+            onBlur: formik.handleBlur,
+            value: 'm',
+            checked: value.gender === 'm'
+          }),
+          translations.TRAVELERS_FORM.MALE_GENDER
+        )
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'radiobutton' },
+        React__default.createElement(
+          'label',
+          { className: 'radiobutton__label' },
+          React__default.createElement('input', {
+            type: 'radio',
+            className: 'radiobutton__input',
+            name: name,
+            onChange: formik.handleChange,
+            onBlur: formik.handleBlur,
+            value: 'f',
+            checked: value.gender === 'f'
+          }),
+          translations.TRAVELERS_FORM.FEMALE_GENDER
+        )
+      )
+    )
+  );
+};
+
+var TypeAheadInput = function (_a) {
+  var name = _a.name,
+    value = _a.value,
+    placeholder = _a.placeholder,
+    options = _a.options,
+    onChange = _a.onChange,
+    onSelect = _a.onSelect,
+    onClear = _a.onClear;
+  var _b = useState(false),
+    showItems = _b[0],
+    setShowItems = _b[1];
+  var handleChange = function (e) {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+  var handleClearClick = function (e) {
+    if (onClear) {
+      onClear();
+    }
+    setShowItems(false);
+  };
+  return React__default.createElement(
+    'div',
+    { className: 'typeahead' },
+    React__default.createElement(
+      'div',
+      { className: 'typeahead__trigger typeahead__trigger--icon' },
+      React__default.createElement(Icon, { name: 'ui-qsm-location' }),
+      React__default.createElement('input', {
+        type: 'text',
+        className: 'form__input',
+        name: name,
+        value: value,
+        onChange: handleChange,
+        placeholder: placeholder,
+        required: true,
+        autoComplete: 'off',
+        onKeyDown: function (e) {
+          if (e.key === 'Tab' && options && onSelect) {
+            onSelect(options[0].key);
+            setShowItems(false);
+          }
+        },
+        onFocus: function () {
+          return setShowItems(true);
+        }
+      }),
+      React__default.createElement('button', { type: 'button', className: 'button button--clear', onClick: handleClearClick })
+    ),
+    options &&
+      options.length > 0 &&
+      showItems &&
+      React__default.createElement(
+        'div',
+        { className: 'typeahead__options' },
+        (options !== null && options !== void 0 ? options : []).map(function (option) {
+          var _a;
+          var matchIndex = typeof value !== 'undefined' ? option.text.indexOf(value) : 0;
+          var prefix = option.text.slice(0, matchIndex);
+          var highlight = option.text.slice(matchIndex, (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0);
+          var suffix = option.text.slice(matchIndex);
+          return React__default.createElement(
+            'div',
+            { className: 'typeahead__option', key: option.key },
+            React__default.createElement(
+              'div',
+              { className: 'typeahead__option-header' },
+              React__default.createElement(
+                'button',
+                {
+                  onClick: function () {
+                    if (onSelect) onSelect(option.key);
+                    setShowItems(false);
+                  },
+                  type: 'button',
+                  className: 'button button--plain'
+                },
+                prefix,
+                React__default.createElement('span', { className: 'typeahead__option-highlight' }, highlight),
+                suffix
+              )
+            )
+          );
+        })
+      )
+  );
+};
+
 function createTraveler(traveler, followNumber, personTranslation, isCompact) {
   if (isCompact) {
     return {
@@ -27923,27 +27968,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);
         })
       };
     }),
@@ -27960,234 +28005,220 @@ 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 = useContext(SettingsContext);
-  var navigate = settings.skipRouter ? function () {} : useNavigate();
-  var bookingQueryString = useSelector(selectBookingQueryString);
-  var startDate = useSelector(selectStartDate);
-  var formRooms = useSelector(selectFormRooms);
-  var bookingType = useSelector(selectBookingType);
-  var agents = useSelector(selectAgents);
-  var agentAdressId = useSelector(selectAgentAdressId);
-  var translations = useSelector(selectTranslations);
-  var travelersFirstStep = useSelector(selectTravelersFirstStep);
-  var isUnavailable = useSelector(selectIsUnavailable);
-  var bookingAttributes = useSelector(selectBookingAttributes);
-  var isFetching = useSelector(selectIsFetching);
-  var hasMounted = useSelector(selectHasMounted);
-  var countries = useSelector(selectCountries);
-  var useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
-  var showAllCountries = !!settings.travellers.showAllCountries;
-  var initialValues =
-    (_a = useSelector(selectTravelersFormValues)) !== null && _a !== void 0
-      ? _a
-      : createInitialValues(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
-  var _k = useState((_b = settings.agentRequired) !== null && _b !== void 0 ? _b : false),
-    showAgents = _k[0],
-    setShowAgents = _k[1];
-  var _l = useState(!settings.agentAdressId && !settings.hideAgentSelection),
-    showAgentSelection = _l[0],
-    setShowAgentSelection = _l[1];
-  var typeaheadAgents =
-    (_c = 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 ? format$2(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 = useState(typeaheadAgents),
-    filteredAgents = _m[0],
-    setFilteredAgents = _m[1];
-  var formik = useCompactForm
-    ? 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)
-            );
-          }
-        }
-      })
-    : 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;
       });
-  useEffect(function () {
-    dispatch(fetchPriceDetails());
-  }, []);
-  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 = useState(initialShowAgents),
+    showAgents = _p[0],
+    setShowAgents = _p[1];
+  var typeaheadAgents = useMemo(
     function () {
       var _a;
-      if (
-        !((_a = bookingAttributes === null || bookingAttributes === void 0 ? void 0 : bookingAttributes.rooms) === null || _a === void 0
+      return (_a = 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
-  useEffect(
-    function () {
-      if (settings.skipRouter || !travelersFirstStep) return;
-      var params = new URLSearchParams(bookingQueryString);
-      params.delete('rooms');
-      var roomsString = formik.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.values]
-  );
-  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(formik.values, function (values) {
-          (values.travelAgentId = Number(agent_1.id)), (values.travelAgentName = agent_1.name);
-        });
-        formik.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(compact([agent.postalCode, agent.location]).join(' '), ')') : ''),
+                text: ''
+                  .concat(agent.name)
+                  .concat(agent.postalCode || agent.location ? ' ('.concat(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.setFieldValue('mainBookerId', id);
+  var _q = useState(typeaheadAgents),
+    filteredAgents = _q[0],
+    setFilteredAgents = _q[1];
+  var flatErrors = flat(formik.errors);
+  var errorKeys = Object.keys(flatErrors).filter(function (key) {
+    return get(formik.touched, key);
+  });
+  var hasVisibleError = function (key) {
+    return get(formik.errors, key) && get(formik.touched, key);
   };
   var mainBooker =
-    (_d = formik.values.rooms.find(function (r) {
-      return r.adults.find(function (traveler) {
+    (_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) {
+      : _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);
+    setFilteredAgents(
+      typeaheadAgents.filter(function (x) {
+        return x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1;
+      })
+    );
     formik.setFieldValue('travelAgentName', value);
   };
   var handleAgentSelect = function (key) {
@@ -28201,48 +28232,36 @@ var TravelersForm = function () {
         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.setValues(__assign(__assign({}, formik.values), { travelAgentId: 0, travelAgentName: '' }));
-    dispatch(setBookingType('b2c'));
+    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.values.rooms, true);
-    var newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
+    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.setFieldValue('rooms', rooms);
   };
   var handleRemoveTraveler = function (roomIndex, travelerIndex) {
     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.setFieldValue('rooms', rooms);
   };
   var handleAddRoom = function () {
     var rooms = __spreadArray([], formik.values.rooms, true);
-    var newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
-    rooms.push({ adults: [newAdult], children: [] });
+    rooms.push({ adults: [{ id: Date.now(), firstName: '', lastName: '', birthDate: '', gender: '' }], children: [] });
     formik.setFieldValue('rooms', rooms);
   };
   var handleRemoveRoom = function (roomIndex) {
@@ -28250,30 +28269,48 @@ var TravelersForm = function () {
     rooms.splice(roomIndex, 1);
     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(formik.errors);
-  var errorKeys = Object.keys(flatErrors).filter(function (key) {
-    return get(formik.touched, key);
-  });
-  var hasVisibleError = function (key) {
-    return get(formik.errors, key) && get(formik.touched, key);
+  var renderGenderControl = function (name, value) {
+    return React__default.createElement(
+      'div',
+      { className: buildClassName(['form__group', hasVisibleError(name) && 'form__group--error']) },
+      React__default.createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
+      React__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.createElement(
+            'div',
+            { className: 'radiobutton', key: gender },
+            React__default.createElement(
+              'label',
+              { className: 'radiobutton__label' },
+              React__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': {
+      case 'gender':
         return React__default.createElement(GenderControl, { translations: translations, value: value, formik: formik, name: name });
-      }
-      case 'firstName': {
+      case 'firstName':
         return React__default.createElement(LabeledInput, {
           hasError: hasVisibleError(name),
           extraClassName: 'form__group--md-33',
@@ -28284,8 +28321,7 @@ var TravelersForm = function () {
           onBlur: formik.handleBlur,
           value: value.firstName
         });
-      }
-      case 'lastName': {
+      case 'lastName':
         return React__default.createElement(LabeledInput, {
           hasError: hasVisibleError(name),
           extraClassName: 'form__group--md-33',
@@ -28296,8 +28332,7 @@ var TravelersForm = function () {
           onBlur: formik.handleBlur,
           value: value.lastName
         });
-      }
-      case 'birthDate': {
+      case 'birthDate':
         return React__default.createElement(LabeledInput, {
           type: 'date',
           hasError: hasVisibleError(name),
@@ -28309,8 +28344,7 @@ var TravelersForm = function () {
           onBlur: formik.handleBlur,
           value: value.birthDate
         });
-      }
-      case 'country': {
+      case 'country':
         return React__default.createElement(LabeledSelect, {
           hasError: hasVisibleError('country'),
           label: translations.TRAVELERS_FORM.COUNTRY,
@@ -28319,46 +28353,12 @@ var TravelersForm = function () {
           onChange: formik.handleChange,
           onBlur: formik.handleBlur,
           value: formik.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
-          )
+          options: countryOptions
         });
-      }
-      case 'phone': {
+      case 'phone':
         return React__default.createElement(PhoneInput, {
-          countries: (_f = (_e = settings.travellers) === null || _e === void 0 ? void 0 : _e.countries) !== null && _f !== void 0 ? _f : [],
+          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,
@@ -28368,8 +28368,7 @@ var TravelersForm = function () {
           onBlur: formik.handleBlur,
           value: formik.values.phone
         });
-      }
-      case 'email': {
+      case 'email':
         return React__default.createElement(
           React__default.Fragment,
           null,
@@ -28396,8 +28395,165 @@ var TravelersForm = function () {
             value: formik.values.emailConfirmation
           })
         );
-      }
+      case 'street':
+        return React__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.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.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.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.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 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.createElement(
+        'div',
+        { className: 'form__row' },
+        React__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.createElement(
+        'div',
+        { className: 'travelers-form__grid' },
+        travellersSettings.formFields.map(function (field, index) {
+          return React__default.createElement(
+            'div',
+            { key: index, className: 'control control--'.concat(field.type) },
+            getControl(field.type, travelerValues, ''.concat(namePrefix, '.').concat(field.type))
+          );
+        })
+      );
+    }
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement('div', { className: 'form__row' }, renderGenderControl(''.concat(namePrefix, '.gender'), travelerValues)),
+      React__default.createElement(
+        'div',
+        { className: 'form__row' },
+        React__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.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.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.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'cta cta--secondary',
+            onClick: function () {
+              return handleRemoveTraveler(roomIndex, travelerIndex);
+            }
+          },
+          translations.TRAVELERS_FORM.REMOVE_TRAVELER
+        )
+    );
   };
   return React__default.createElement(
     'form',
@@ -28409,670 +28565,231 @@ var TravelersForm = function () {
       onSubmit: formik.handleSubmit,
       onReset: formik.handleReset
     },
-    useCompactForm
-      ? React__default.createElement(
+    React__default.createElement(
+      'div',
+      { className: 'form__travelers__wrapper' },
+      formik.values.rooms.map(function (room, roomIndex) {
+        return React__default.createElement(
           'div',
-          { className: 'form__travelers__wrapper' },
-          formik.values.rooms.map(function (room, rIndex) {
+          { key: roomIndex },
+          formik.values.rooms.length > 1 &&
+            React__default.createElement(
+              'div',
+              { className: 'form__region' },
+              React__default.createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default.createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', roomIndex + 1),
+                React__default.createElement('p', { className: 'form__region-label' }, renderRoomLabel(room))
+              ),
+              !useCompactForm &&
+                travelersFirstStep &&
+                formik.values.rooms.length > 1 &&
+                React__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.createElement(
               'div',
-              { key: rIndex },
-              formik.values.rooms.length > 1 &&
+              { className: 'form__region', key: travelerValues.id },
+              React__default.createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.TRAVELER, ' ', index + 1),
+                React__default.createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
                 React__default.createElement(
                   'div',
-                  { className: 'form__region' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default.createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', rIndex + 1),
-                    React__default.createElement(
-                      'p',
-                      { className: 'form__region-label' },
-                      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('')
-                    )
-                  )
-                ),
-              room.adults.map(function (travelerValues, index) {
-                return React__default.createElement(
-                  'div',
-                  { className: 'form__region', key: travelerValues.id },
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.TRAVELER, ' ', index + 1),
-                    React__default.createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
-                    React__default.createElement(
-                      'div',
-                      { className: 'radiobutton' },
-                      React__default.createElement(
-                        'label',
-                        { className: 'radiobutton__label' },
-                        React__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
-                      )
-                    )
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__row' },
-                    React__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.handleChange,
-                      onBlur: formik.handleBlur,
-                      value: travelerValues.age
-                    })
-                  )
-                );
-              }),
-              room.children.map(function (travelerValues, index) {
-                return React__default.createElement(
-                  'div',
-                  { className: 'form__region', key: travelerValues.id },
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default.createElement(
-                      'h5',
-                      { className: 'form__region-heading' },
-                      translations.TRAVELERS_FORM.TRAVELER,
-                      ' ',
-                      room.adults.length + index + 1
-                    ),
-                    React__default.createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.CHILD)
-                  ),
+                  { className: 'radiobutton' },
                   React__default.createElement(
-                    'div',
-                    { className: 'form__row' },
-                    React__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.handleChange,
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default.createElement('input', {
+                      type: 'radio',
+                      name: 'mainBookerId',
+                      onChange: handleMainBookerChange,
                       onBlur: formik.handleBlur,
-                      value: travelerValues.age
-                    })
+                      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)
             );
-          })
-        )
-      : React__default.createElement(
-          React__default.Fragment,
-          null,
-          React__default.createElement(
+          }),
+          room.children.map(function (travelerValues, index) {
+            return React__default.createElement(
+              'div',
+              { className: 'form__region', key: travelerValues.id },
+              React__default.createElement(
+                'div',
+                { className: 'form__region-header' },
+                React__default.createElement(
+                  'h5',
+                  { className: 'form__region-heading' },
+                  translations.TRAVELERS_FORM.TRAVELER,
+                  ' ',
+                  room.adults.length + index + 1
+                ),
+                React__default.createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.CHILD)
+              ),
+              renderTravelerFields(travelerValues, 'rooms['.concat(roomIndex, '].children[').concat(index, ']'), false, roomIndex, index)
+            );
+          }),
+          !useCompactForm &&
+            travelersFirstStep &&
+            React__default.createElement(
+              'div',
+              { className: 'form__region' },
+              React__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.createElement(
             'div',
-            { className: 'form__travelers__wrapper' },
-            formik.values.rooms.map(function (room, rIndex) {
-              return React__default.createElement(
-                'div',
-                { key: rIndex },
-                formik.values.rooms.length > 1 &&
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__region-header' },
+              React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.MAIN_BOOKER),
+              React__default.createElement(
+                'p',
+                { className: 'form__region-label' },
+                compact([
+                  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) &&
+                    format$2(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.createElement(
+                  'div',
+                  { className: 'main-booker-form__grid' },
+                  travellersSettings.mainBookerFormFields.map(function (field, index) {
+                    return React__default.createElement(
+                      'div',
+                      { key: index, className: 'control control--'.concat(field.type) },
+                      getControl(field.type, {}, field.type)
+                    );
+                  })
+                )
+              : React__default.createElement(
+                  React__default.Fragment,
+                  null,
                   React__default.createElement(
                     'div',
-                    { className: 'form__region' },
+                    { className: 'form__twocolumn' },
                     React__default.createElement(
                       'div',
-                      { className: 'form__region-header' },
-                      React__default.createElement('h5', { className: 'form__region-heading' }, translations.SHARED.ROOM, ' ', rIndex + 1),
+                      { className: 'form__twocolumn-column' },
                       React__default.createElement(
-                        'p',
-                        { className: 'form__region-label' },
-                        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.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.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.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.values.rooms.length > 1 &&
-                      React__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.createElement(
-                    'div',
-                    { className: 'form__region', key: travelerValues.id },
                     React__default.createElement(
                       'div',
-                      { className: 'form__region-header' },
-                      React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.TRAVELER, ' ', index + 1),
-                      React__default.createElement('p', { className: 'form__region-label' }, translations.TRAVELERS_FORM.ADULT),
+                      { className: 'form__twocolumn-column' },
                       React__default.createElement(
                         'div',
-                        { className: 'radiobutton' },
-                        React__default.createElement(
-                          'label',
-                          { className: 'radiobutton__label' },
-                          React__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
-                        )
+                        { className: 'form__row' },
+                        React__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.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.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.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'travelers-form__grid' },
-                            settings.travellers.formFields.map(function (field, fIndex) {
-                              return React__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.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default.createElement(
-                              'div',
-                              {
-                                className: buildClassName([
-                                  'form__group',
-                                  hasVisibleError('rooms['.concat(rIndex, '].adults[').concat(index, '].gender')) && 'form__group--error'
-                                ])
-                              },
-                              React__default.createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
-                              React__default.createElement(
-                                'div',
-                                { className: 'radiobutton-group' },
-                                React__default.createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default.createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default.createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
-                                      onChange: formik.handleChange,
-                                      onBlur: formik.handleBlur,
-                                      value: 'm',
-                                      checked: travelerValues.gender === 'm'
-                                    }),
-                                    translations.TRAVELERS_FORM.MALE_GENDER
-                                  )
-                                ),
-                                React__default.createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default.createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default.createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].adults[').concat(index, '].gender'),
-                                      onChange: formik.handleChange,
-                                      onBlur: formik.handleBlur,
-                                      value: 'f',
-                                      checked: travelerValues.gender === 'f'
-                                    }),
-                                    translations.TRAVELERS_FORM.FEMALE_GENDER
-                                  )
-                                )
-                              )
-                            )
-                          ),
-                          React__default.createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.firstName
-                            }),
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.lastName
-                            }),
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.birthDate
-                            })
-                          ),
-                          travelersFirstStep &&
-                            room.adults.length > 1 &&
-                            React__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.createElement(
-                    'div',
-                    { className: 'form__region', key: travelerValues.id },
-                    React__default.createElement(
-                      'div',
-                      { className: 'form__region-header' },
-                      React__default.createElement(
-                        'h5',
-                        { className: 'form__region-heading' },
-                        translations.TRAVELERS_FORM.TRAVELER,
-                        ' ',
-                        room.adults.length + index + 1
-                      ),
-                      React__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.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'travelers-form__grid' },
-                            settings.travellers.formFields.map(function (field, fIndex) {
-                              return React__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.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__default.createElement(
-                              'div',
-                              {
-                                className: buildClassName([
-                                  'form__group',
-                                  hasVisibleError('rooms['.concat(rIndex, '].children[').concat(index, '].gender')) && 'form__group--error'
-                                ])
-                              },
-                              React__default.createElement('label', { className: 'form__label' }, translations.TRAVELERS_FORM.GENDER_ID, ' *'),
-                              React__default.createElement(
-                                'div',
-                                { className: 'radiobutton-group' },
-                                React__default.createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default.createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default.createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
-                                      onChange: formik.handleChange,
-                                      onBlur: formik.handleBlur,
-                                      value: 'm',
-                                      checked: travelerValues.gender === 'm'
-                                    }),
-                                    translations.TRAVELERS_FORM.MALE_GENDER
-                                  )
-                                ),
-                                React__default.createElement(
-                                  'div',
-                                  { className: 'radiobutton' },
-                                  React__default.createElement(
-                                    'label',
-                                    { className: 'radiobutton__label' },
-                                    React__default.createElement('input', {
-                                      type: 'radio',
-                                      className: 'radiobutton__input',
-                                      name: 'rooms['.concat(rIndex, '].children[').concat(index, '].gender'),
-                                      onChange: formik.handleChange,
-                                      onBlur: formik.handleBlur,
-                                      value: 'f',
-                                      checked: travelerValues.gender === 'f'
-                                    }),
-                                    translations.TRAVELERS_FORM.FEMALE_GENDER
-                                  )
-                                )
-                              )
-                            )
-                          ),
-                          React__default.createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.firstName
-                            }),
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.lastName
-                            }),
-                            React__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.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: travelerValues.birthDate
-                            })
-                          )
-                        )
-                  );
-                }),
-                travelersFirstStep &&
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__region' },
-                    React__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.createElement(
-                  'div',
-                  { className: 'form__region' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'form__region-header' },
-                    React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.MAIN_BOOKER),
-                    React__default.createElement(
-                      'p',
-                      { className: 'form__region-label' },
-                      compact([
-                        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) &&
-                          format$1(parse(mainBooker.birthDate, 'yyyy-MM-dd', new Date()), 'dd-MM-yyyy')
-                      ]).join(', ')
                     )
                   ),
-                  React__default.createElement(
-                    React__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.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'main-booker-form__grid' },
-                            settings.travellers.mainBookerFormFields.map(function (field, fIndex) {
-                              return React__default.createElement(
-                                'div',
-                                { key: fIndex, className: 'control control--'.concat(field.type) },
-                                getControl(field.type, {}, field.type)
-                              );
-                            })
-                          )
-                        )
-                      : React__default.createElement(
-                          React__default.Fragment,
-                          null,
-                          React__default.createElement(
-                            'div',
-                            { className: 'form__twocolumn' },
-                            React__default.createElement(
-                              'div',
-                              { className: 'form__twocolumn-column' },
-                              React__default.createElement(
-                                'div',
-                                { className: 'form__row' },
-                                React__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.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.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
-                                })
-                              )
-                            ),
-                            React__default.createElement(
-                              'div',
-                              { className: 'form__twocolumn-column' },
-                              React__default.createElement(
-                                'div',
-                                { className: 'form__row' },
-                                React__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.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.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: __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.createElement(
-                            'div',
-                            { className: 'form__row' },
-                            React__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
-                            }),
-                            React__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.createElement(LabeledInput, {
-                              type: 'email',
-                              hasError: hasVisibleError('emailConfirmation'),
-                              extraClassName: 'form__group--md-33',
-                              label: translations.TRAVELERS_FORM.REPEAT_EMAIL,
-                              required: true,
-                              name: 'emailConfirmation',
-                              onChange: formik.handleChange,
-                              onBlur: formik.handleBlur,
-                              value: formik.values.emailConfirmation
-                            })
-                          )
-                        )
-                  )
-                )
-              : React__default.createElement(
-                  'div',
-                  { className: 'form__region' },
                   React__default.createElement(
                     'div',
                     { className: 'form__row' },
@@ -29085,78 +28802,122 @@ var TravelersForm = function () {
                       onChange: formik.handleChange,
                       onBlur: formik.handleBlur,
                       value: formik.values.phone
+                    }),
+                    React__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.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.createElement(
+            'div',
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__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.createElement(
+          'div',
+          { className: 'form__region' },
+          React__default.createElement(
+            'div',
+            { className: 'form__region-header' },
+            React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
+            React__default.createElement(
+              'div',
+              { className: 'checkbox', id: 'cbxChooseOffice' },
               React__default.createElement(
-                'div',
-                { className: 'form__region' },
-                React__default.createElement(
-                  'div',
-                  { className: 'form__region-header' },
-                  React__default.createElement('h5', { className: 'form__region-heading' }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
-                  React__default.createElement(
-                    'div',
-                    { className: 'checkbox', id: 'cbxChooseOffice' },
-                    React__default.createElement(
-                      'label',
-                      { className: 'checkbox__label' },
-                      React__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.createElement(
-                    'div',
-                    { className: 'form__row form__row--choose-office' },
-                    React__default.createElement(
-                      'div',
-                      { className: buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error']) },
-                      React__default.createElement(TypeAheadInput, {
-                        value: formik.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.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.createElement(
               'div',
-              { className: 'form__region form__region--errors' },
+              { className: 'form__row form__row--choose-office' },
               React__default.createElement(
                 'div',
-                { className: 'form__row' },
-                React__default.createElement(
-                  'div',
-                  { className: 'form__group' },
-                  React__default.createElement('p', { className: 'form__error-heading' }, translations.TRAVELERS_FORM.VALIDATION_MESSAGE, ':'),
-                  React__default.createElement(
-                    'ul',
-                    { className: 'list' },
-                    errorKeys.map(function (key) {
-                      return React__default.createElement('li', { key: key }, get(flatErrors, key));
-                    })
-                  )
-                )
+                { className: buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error']) },
+                React__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.createElement(
+        'div',
+        { className: 'form__region form__region--errors' },
+        React__default.createElement(
+          'div',
+          { className: 'form__row' },
+          React__default.createElement(
+            'div',
+            { className: 'form__group' },
+            React__default.createElement('p', { className: 'form__error-heading' }, translations.TRAVELERS_FORM.VALIDATION_MESSAGE, ':'),
+            React__default.createElement(
+              'ul',
+              { className: 'list' },
+              errorKeys.map(function (key) {
+                return React__default.createElement('li', { key: key }, get(flatErrors, key));
+              })
+            )
+          )
+        )
+      ),
     travelersFirstStep &&
       React__default.createElement(
         'div',
@@ -29166,14 +28927,204 @@ var TravelersForm = function () {
     React__default.createElement(
       'div',
       { className: 'booking__navigator' },
-      !travelersFirstStep && settings.skipRouter
+      renderPreviousButton === null || renderPreviousButton === void 0 ? void 0 : renderPreviousButton(),
+      React__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 = useContext(SettingsContext);
+  var navigate = settings.skipRouter ? function () {} : useNavigate();
+  var bookingQueryString = useSelector(selectBookingQueryString);
+  var startDate = useSelector(selectStartDate);
+  var formRooms = useSelector(selectFormRooms);
+  var bookingType = useSelector(selectBookingType);
+  var agents = useSelector(selectAgents);
+  var agentAdressId = useSelector(selectAgentAdressId);
+  var translations = useSelector(selectTranslations);
+  var travelersFirstStep = useSelector(selectTravelersFirstStep);
+  var isUnavailable = useSelector(selectIsUnavailable);
+  var bookingAttributes = useSelector(selectBookingAttributes);
+  var isFetching = useSelector(selectIsFetching);
+  var hasMounted = useSelector(selectHasMounted);
+  var countries = useSelector(selectCountries);
+  var useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
+  var showAllCountries = !!settings.travellers.showAllCountries;
+  var initialValues =
+    (_a = useSelector(selectTravelersFormValues)) !== null && _a !== void 0
+      ? _a
+      : createInitialValuesFromRooms(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
+  var _c = useState(!settings.agentAdressId && !settings.hideAgentSelection),
+    showAgentSelection = _c[0],
+    setShowAgentSelection = _c[1];
+  var 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)
+        );
+    }
+  });
+  useEffect(
+    function () {
+      dispatch(fetchPriceDetails());
+    },
+    [dispatch]
+  );
+  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]
+  );
+  useEffect(
+    function () {
+      if (settings.skipRouter || !travelersFirstStep) return;
+      var params = new URLSearchParams(bookingQueryString);
+      params.delete('rooms');
+      var roomsString = formik.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.values.rooms, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]
+  );
+  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(formik.values, function (values) {
+        values.travelAgentId = Number(agent.id);
+        values.travelAgentName = agent.name;
+      });
+      formik.setValues(formValues, false);
+      dispatch(setFormValues(formValues));
+      setShowAgentSelection(false);
+    },
+    [agents, settings.affiliateSlug]
+  );
+  return React__default.createElement(SharedTravelersForm, {
+    formik: formik,
+    translations: translations,
+    travellersSettings: settings.travellers,
+    countries: countries,
+    agents: agents,
+    bookingType: bookingType,
+    agentAdressId: agentAdressId,
+    travelersFirstStep: travelersFirstStep,
+    isUnavailable: isUnavailable,
+    useCompactForm: useCompactForm,
+    showAllCountries: showAllCountries,
+    showAgentSelection: showAgentSelection,
+    initialShowAgents: (_b = settings.agentRequired) !== null && _b !== void 0 ? _b : false,
+    onBookingTypeChange: function (nextBookingType) {
+      return dispatch(setBookingType(nextBookingType));
+    },
+    renderPreviousButton: function () {
+      return !travelersFirstStep && settings.skipRouter
         ? React__default.createElement(
             'button',
             {
               type: 'button',
               title: translations.STEPS.PREVIOUS,
               onClick: function () {
-                return goPrevious();
+                return dispatch(setCurrentStep$1(OPTIONS_FORM_STEP));
               },
               className: 'cta cta--secondary'
             },
@@ -29192,14 +29143,9 @@ var TravelersForm = function () {
             },
             translations.STEPS.PREVIOUS
           )
-        : null,
-      React__default.createElement(
-        'button',
-        { type: 'submit', title: translations.STEPS.NEXT, className: 'cta' + (isUnavailable ? ' cta--disabled' : '') },
-        translations.STEPS.NEXT
-      )
-    )
-  );
+        : null;
+    }
+  });
 };
 
 var Booking = function (_a) {
@@ -29285,7 +29231,7 @@ var Booking = function (_a) {
         window.scrollTo(0, 0);
       }
       if (!isNil(bookingNumber)) {
-        dispatch(setBookingNumber(bookingNumber));
+        dispatch(setBookingNumber$1(bookingNumber));
         navigate(
           ''
             .concat(!skipBasePathInRouting ? basePath : '')
@@ -29316,7 +29262,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]
   );
   useEffect(
     function () {
@@ -31188,7 +31134,7 @@ var Calendar = function (_a) {
         React__default.createElement(
           'div',
           { className: 'calendar__current-month' },
-          format$1(focusDate, 'MMMM yyyy', {
+          format$2(focusDate, 'MMMM yyyy', {
             locale: currentLocale
           }).replace(/^(.)(.*)$/, function (_, a, b) {
             return ''.concat(a.toUpperCase()).concat(b);
@@ -31221,7 +31167,7 @@ var Calendar = function (_a) {
           return React__default.createElement(
             'div',
             { className: 'calendar__day-label', key: 'label-'.concat(i) },
-            format$1(calendarDays[i], 'eee', {
+            format$2(calendarDays[i], 'eee', {
               locale: currentLocale
             })
               .slice(0, 2)
@@ -32148,7 +32094,7 @@ var MobileFilterModal = function () {
               className: 'qsm__input u-ps-2',
               placeholder: translations.QSM.DEPARTURE_DATE,
               readOnly: true,
-              value: fromDate ? format$1(new Date(fromDate), 'dd/MM/yyyy') : ''
+              value: fromDate ? format$2(new Date(fromDate), 'dd/MM/yyyy') : ''
             }),
             mobileDatePickerMode === 'range' && React__default.createElement('div', { className: 'qsm__input-line qsm__input-line--datepicker' })
           ),
@@ -32164,7 +32110,7 @@ var MobileFilterModal = function () {
                 className: 'qsm__input',
                 placeholder: translations.QSM.RETURN_DATE,
                 readOnly: true,
-                value: toDate ? format$1(new Date(toDate), 'dd/MM/yyyy') : ''
+                value: toDate ? format$2(new Date(toDate), 'dd/MM/yyyy') : ''
               })
             )
         ),
@@ -32944,8 +32890,8 @@ var QSMContainer = function () {
     [dispatch]
   );
   var handleDateChange = function (value) {
-    dispatch(setFromDate(value.fromDate ? format$1(value.fromDate, 'yyyy-MM-dd') : undefined));
-    dispatch(setToDate(value.toDate ? format$1(value.toDate, 'yyyy-MM-dd') : undefined));
+    dispatch(setFromDate(value.fromDate ? format$2(value.fromDate, 'yyyy-MM-dd') : undefined));
+    dispatch(setToDate(value.toDate ? format$2(value.toDate, 'yyyy-MM-dd') : undefined));
   };
   var handleTripTypeChange = function (value) {
     dispatch(setTripType(value));
@@ -33550,7 +33496,8 @@ var initialState$1 = {
   selectedExcursionSearchResult: null,
   confirmedExcursionsByDay: {},
   bookPackagingEntry: false,
-  currentStep: 0
+  currentStep: 0,
+  bookingNumber: undefined
 };
 var searchResultsSlice = createSlice({
   name: 'searchResults',
@@ -33737,6 +33684,9 @@ var searchResultsSlice = createSlice({
     },
     setCurrentStep: function (state, action) {
       state.currentStep = action.payload;
+    },
+    setBookingNumber: function (state, action) {
+      state.bookingNumber = action.payload;
     }
   }
 });
@@ -33781,8 +33731,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) {
@@ -34324,7 +34275,7 @@ var Itinerary = function (_a) {
                 React__default.createElement(
                   'p',
                   null,
-                  format$1(new Date(firstEntryLine.from), 'EEE. d MMM yyyy'),
+                  format$2(new Date(firstEntryLine.from), 'EEE. d MMM yyyy'),
                   ' - ',
                   React__default.createElement('strong', null, translations.SRP.START)
                 )
@@ -34348,9 +34299,9 @@ var Itinerary = function (_a) {
                   React__default.createElement(
                     'p',
                     { className: 'search__filter__itinerary__transport-date-date' },
-                    React__default.createElement('strong', null, format$1(new Date(outboundFlight.from), 'd'))
+                    React__default.createElement('strong', null, format$2(new Date(outboundFlight.from), 'd'))
                   ),
-                  React__default.createElement('p', null, format$1(new Date(outboundFlight.from), 'MMM'))
+                  React__default.createElement('p', null, format$2(new Date(outboundFlight.from), 'MMM'))
                 ),
                 React__default.createElement(
                   'div',
@@ -34424,9 +34375,9 @@ var Itinerary = function (_a) {
                         React__default.createElement(
                           'p',
                           { className: 'search__filter__itinerary__transport-date-date' },
-                          React__default.createElement('strong', null, format$1(new Date(firstSegment.from), 'd'))
+                          React__default.createElement('strong', null, format$2(new Date(firstSegment.from), 'd'))
                         ),
-                        React__default.createElement('p', null, format$1(new Date(firstSegment.from), 'MMM'))
+                        React__default.createElement('p', null, format$2(new Date(firstSegment.from), 'MMM'))
                       ),
                       React__default.createElement(
                         'div',
@@ -34453,9 +34404,9 @@ var Itinerary = function (_a) {
                         React__default.createElement(
                           'p',
                           { className: 'search__filter__itinerary__segment-details-text' },
-                          format$1(new Date(firstSegment.from), 'EEE. d MMM yyyy'),
+                          format$2(new Date(firstSegment.from), 'EEE. d MMM yyyy'),
                           '> ',
-                          format$1(new Date(firstSegment.to), 'EEE. d MMM yyyy')
+                          format$2(new Date(firstSegment.to), 'EEE. d MMM yyyy')
                         )
                       )
                     )
@@ -34543,9 +34494,9 @@ var Itinerary = function (_a) {
                   React__default.createElement(
                     'p',
                     { className: 'search__filter__itinerary__transport-date-date' },
-                    React__default.createElement('strong', null, format$1(new Date(returnFlight.from), 'd'))
+                    React__default.createElement('strong', null, format$2(new Date(returnFlight.from), 'd'))
                   ),
-                  React__default.createElement('p', null, format$1(new Date(returnFlight.from), 'MMM'))
+                  React__default.createElement('p', null, format$2(new Date(returnFlight.from), 'MMM'))
                 ),
                 React__default.createElement(
                   'div',
@@ -34606,7 +34557,7 @@ var Itinerary = function (_a) {
                 React__default.createElement(
                   'p',
                   null,
-                  format$1(new Date(lastEntryLine.to), 'EEE. d MMM yyyy'),
+                  format$2(new Date(lastEntryLine.to), 'EEE. d MMM yyyy'),
                   ' - ',
                   React__default.createElement('strong', null, translations.SRP.END)
                 )
@@ -41433,8 +41384,8 @@ var HotelAccommodationResults = function (_a) {
       : firstPackagingResult === null || firstPackagingResult === void 0
       ? void 0
       : firstPackagingResult.fromDate;
-  var firstResultDay = firstResultDate ? format$1(parseISO(firstResultDate), 'd') : null;
-  var firstResultMonth = firstResultDate ? format$1(parseISO(firstResultDate), 'MMM') : null;
+  var firstResultDay = firstResultDate ? format$2(parseISO(firstResultDate), 'd') : null;
+  var firstResultMonth = firstResultDate ? format$2(parseISO(firstResultDate), 'MMM') : null;
   var selectedPackagingAccoResult = React__default.useMemo(
     function () {
       var selectedResult = packagingAccoResults.find(function (result) {
@@ -42278,15 +42229,6 @@ var PackageingFlightsFlyIn = function (_a) {
               React__default.createElement(
                 'div',
                 { className: 'search__result-row' },
-                React__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.createElement(
                   'div',
                   {
@@ -42298,6 +42240,15 @@ var PackageingFlightsFlyIn = function (_a) {
                   React__default.createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
                   translations.SRP.FILTERS
                 ),
+                React__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.createElement(
@@ -42580,7 +42531,7 @@ var formatPrice = function (price, currencyCode) {
 };
 var getExcursionDayKey = function (date) {
   var parsed = typeof date === 'string' ? parseISO(date) : date;
-  return format$1(parsed, 'yyyy-MM-dd');
+  return format$2(parsed, 'yyyy-MM-dd');
 };
 var getOptionPaxIds = function (option) {
   return Array.isArray(option.paxIds)
@@ -43040,13 +42991,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.createElement(
       'div',
@@ -43125,6 +43072,17 @@ var FlyIn = function (_a) {
             React__default.createElement(
               'div',
               { className: 'search__result-row' },
+              React__default.createElement(
+                'div',
+                {
+                  className: 'cta cta--filter',
+                  onClick: function () {
+                    return toggleFilters && toggleFilters();
+                  }
+                },
+                React__default.createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                translations.SRP.FILTERS
+              ),
               React__default.createElement(
                 'span',
                 { className: 'search__result-row-text' },
@@ -43138,17 +43096,6 @@ var FlyIn = function (_a) {
                     translations.SRP.TOTAL_RESULTS_LABEL
                   )
               ),
-              React__default.createElement(
-                'div',
-                {
-                  className: 'cta cta--filter',
-                  onClick: function () {
-                    return toggleFilters && toggleFilters();
-                  }
-                },
-                React__default.createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
-                translations.SRP.FILTERS
-              ),
               sortByTypes &&
                 sortByTypes.length > 0 &&
                 React__default.createElement(
@@ -44013,8 +43960,8 @@ var IndependentFlightSelection = function (_a) {
     [searchResults, selectedReturnKey]
   );
   var firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
-  var firstResultDay = firstResultDate ? format$1(firstResultDate, 'd') : null;
-  var firstResultMonth = firstResultDate ? format$1(firstResultDate, 'MMM') : null;
+  var firstResultDay = firstResultDate ? format$2(firstResultDate, 'd') : null;
+  var firstResultMonth = firstResultDate ? format$2(firstResultDate, 'MMM') : null;
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -45203,7 +45150,7 @@ var GroupTourCard = function (_a) {
     return state.searchResults;
   }).selectedSearchResult;
   if (!context) {
-    return;
+    return null;
   }
   var dispatch = useDispatch();
   var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
@@ -45270,7 +45217,7 @@ var GroupTourCard = function (_a) {
                 React__default.createElement(
                   'div',
                   { className: 'search__result-card__allotment__date--from' },
-                  format$1(new Date(result.fromDate), 'dd/MM/yyyy')
+                  format$2(new Date(result.fromDate), 'dd/MM/yyyy')
                 )
               ),
               React__default.createElement(
@@ -45365,7 +45312,7 @@ var GroupTourResults = function (_a) {
   var isLoading = _a.isLoading;
   var context = useContext(SearchResultsConfigurationContext);
   if (!context) {
-    return;
+    return null;
   }
   if (isLoading) {
     return React__default.createElement(
@@ -46192,8 +46139,8 @@ var buildItineraryHtml = function (itinerary, translations) {
     .map(function (node) {
       var _a;
       var startDay = getNodeDayRange(node).startDay;
-      var day = node.startDate ? format$1(node.startDate, 'd') : null;
-      var month = node.startDate ? format$1(node.startDate, 'MMM') : null;
+      var day = node.startDate ? format$2(node.startDate, 'd') : null;
+      var month = node.startDate ? format$2(node.startDate, 'MMM') : null;
       var uniqueItems = getUniqueItems((_a = node.items) !== null && _a !== void 0 ? _a : []);
       var hasItems = uniqueItems.length > 0;
       var hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
@@ -46402,7 +46349,7 @@ var DayByDayExcursions = function () {
     null,
     stayDates.map(function (day) {
       var _a, _b, _c;
-      var dayKey = format$1(day, 'yyyy-MM-dd');
+      var dayKey = format$2(day, 'yyyy-MM-dd');
       var confirmedExcursions = (_a = confirmedExcursionsByDay[dayKey]) !== null && _a !== void 0 ? _a : [];
       return React__default.createElement(
         React__default.Fragment,
@@ -46416,14 +46363,14 @@ var DayByDayExcursions = function () {
             React__default.createElement(
               'p',
               { className: 'search__results__label__date-date' },
-              format$1(day, 'd', {
+              format$2(day, 'd', {
                 locale: getLocale((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB')
               })
             ),
             React__default.createElement(
               'p',
               null,
-              format$1(day, 'MMM', {
+              format$2(day, 'MMM', {
                 locale: getLocale((_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB')
               })
             )
@@ -46594,8 +46541,6 @@ var WLSidebar = function (_a) {
   if (!editablePackagingEntry) {
     return null;
   }
-  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
-  console.log('priceDetails in WLSidebar:', priceDetails);
   var sortedLines = useMemo(
     function () {
       var _a;
@@ -46740,19 +46685,731 @@ 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 = useState(checkboxes),
+    localCheckboxes = _l[0],
+    setLocalCheckboxes = _l[1];
+  useEffect(
+    function () {
+      setLocalCheckboxes(checkboxes);
+    },
+    [checkboxes]
+  );
+  useEffect(
+    function () {
+      var checkboxesValidated = !isNil(localCheckboxes)
+        ? localCheckboxes.every(function (checkbox) {
+            return checkbox.isSelected;
+          })
+        : true;
+      var notificationsValidated = !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 (isNil(localCheckboxes)) return;
+    var newCheckboxes = __spreadArray([], localCheckboxes, true);
+    var index = findIndex$1(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.createElement(
+    React__default.Fragment,
+    null,
+    isSubmitting && ((renderLoader === null || renderLoader === void 0 ? void 0 : renderLoader()) || React__default.createElement(Loader, null)),
+    !isSubmitting &&
+      React__default.createElement(
+        'form',
+        { className: 'form', name: 'booking--summary', id: 'booking--summary', onSubmit: onSubmit },
+        React__default.createElement(
+          'div',
+          { className: 'form__booking--summary' },
+          React__default.createElement(
+            'div',
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default.createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.PERSONAL_DETAILS)
+                )
+              )
+            ),
+            travelerFormValues.rooms.map(function (room, roomIndex) {
+              var _a, _b;
+              return React__default.createElement(
+                'div',
+                { className: 'form__row', key: roomIndex },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'form__region-header' },
+                    React__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.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(
+                          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.createElement(
+                    'div',
+                    { className: 'form__group form__group--sm-50', key: traveler.id },
+                    React__default.createElement(
+                      'ul',
+                      { className: 'list list--plain' },
+                      React__default.createElement(
+                        'li',
+                        { className: 'list__item' },
+                        React__default.createElement('strong', null, traveler.firstName, ' ', traveler.lastName),
+                        ' ',
+                        isMainBooker && React__default.createElement('em', null, '(', translations.SUMMARY.MAIN_BOOKER, ')')
+                      ),
+                      React__default.createElement('li', { className: 'list__item' }, formatBirthDate(traveler.birthDate)),
+                      isMainBooker &&
+                        React__default.createElement(
+                          React__default.Fragment,
+                          null,
+                          travelerFormValues.street &&
+                            React__default.createElement(
+                              'li',
+                              { className: 'list__item' },
+                              ''
+                                .concat(travelerFormValues.street, ' ')
+                                .concat(compact([travelerFormValues.houseNumber, travelerFormValues.box]).join(' '), ', ')
+                                .concat(travelerFormValues.zipCode, ' ')
+                                .concat(travelerFormValues.place)
+                            ),
+                          travelerFormValues.phone && React__default.createElement('li', { className: 'list__item' }, travelerFormValues.phone),
+                          travelerFormValues.email && React__default.createElement('li', { className: 'list__item' }, travelerFormValues.email)
+                        )
+                    )
+                  );
+                })
+              );
+            })
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default.createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.OPTIONS)
+                )
+              )
+            ),
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__default.createElement('ul', { className: 'list list--booking-summary' }, renderOptions())
+              )
+            )
+          ),
+          enableVoucher &&
+            React__default.createElement(
+              'div',
+              { className: 'form__region' },
+              React__default.createElement(
+                'div',
+                { className: 'form__row' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'form__region-header' },
+                    React__default.createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.VOUCHERS)
+                  )
+                )
+              ),
+              React__default.createElement(
+                'div',
+                { className: 'form__row' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__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.createElement(
+                    'button',
+                    { type: 'button', className: buildClassName(['cta', !voucher.code && 'cta--disabled']), onClick: onValidateVoucher },
+                    translations.SUMMARY.VOUCHER_VALIDATE
+                  )
+                )
+              ),
+              React__default.createElement(
+                'div',
+                { className: 'form__row' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__group info-message__voucher' },
+                  voucher.isValid &&
+                    voucher.isValidated &&
+                    React__default.createElement(
+                      'div',
+                      { className: 'info-message info-message__voucher__valid' },
+                      React__default.createElement('span', null, translations.SUMMARY.VOUCHER_VALID),
+                      React__default.createElement(
+                        'button',
+                        { type: 'button', className: 'cta cta--secondary', onClick: onAddVoucher },
+                        translations.SUMMARY.ADD_VOUCHER
+                      )
+                    ),
+                  !voucher.isValid &&
+                    voucher.isValidated &&
+                    React__default.createElement('div', { className: 'info-message--error' }, translations.SUMMARY.VOUCHER_INVALID)
+                )
+              ),
+              React__default.createElement(
+                'div',
+                { className: 'form__row' },
+                React__default.createElement(
+                  'ul',
+                  { className: 'info-message__voucher' },
+                  !isEmpty(voucherCodes) &&
+                    voucherCodes.map(function (code, index) {
+                      return React__default.createElement(
+                        'li',
+                        { key: ''.concat(code, '-').concat(index) },
+                        React__default.createElement(
+                          'div',
+                          { className: 'info-message__voucher__list' },
+                          code,
+                          ' ',
+                          React__default.createElement(
+                            'button',
+                            {
+                              type: 'button',
+                              className: 'cta--add-remove',
+                              onClick: function () {
+                                return onRemoveVoucher === null || onRemoveVoucher === void 0 ? void 0 : onRemoveVoucher(code);
+                              }
+                            },
+                            React__default.createElement(Icon, { height: 16, name: 'ui-trashcan' })
+                          )
+                        )
+                      );
+                    })
+                )
+              )
+            ),
+          !isEmpty(notifications) &&
+            React__default.createElement(
+              'div',
+              { className: 'form__region' },
+              React__default.createElement(
+                'div',
+                { className: 'form__row' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__group' },
+                  React__default.createElement(
+                    'div',
+                    { className: 'info-message' },
+                    React__default.createElement(Icon, { name: 'ui-tooltip', className: 'icon--secondary-color' }),
+                    React__default.createElement(
+                      'div',
+                      { className: 'info-message__copy' },
+                      React__default.createElement('h5', null, translations.SUMMARY.NOTIFICATIONS_TITLE),
+                      uniqBy(
+                        (notifications !== null && notifications !== void 0 ? notifications : []).filter(function (notification) {
+                          return !notification.hasToBeConfirmed;
+                        }),
+                        'id'
+                      ).map(function (notification) {
+                        return React__default.createElement(
+                          'span',
+                          { key: notification.id, className: 'checkbox__label-text' },
+                          React__default.createElement('strong', { className: 'checkbox__label-text--title' }, notification.title),
+                          React__default.createElement('span', { className: 'checkbox__label-text--description' }, notification.description)
+                        );
+                      }),
+                      uniqBy(
+                        (notifications !== null && notifications !== void 0 ? notifications : []).filter(function (notification) {
+                          return notification.hasToBeConfirmed;
+                        }),
+                        'id'
+                      ).map(function (notification) {
+                        return React__default.createElement(
+                          'div',
+                          { className: 'checkbox', key: notification.id },
+                          React__default.createElement(
+                            'label',
+                            { className: 'checkbox__label' },
+                            React__default.createElement('input', {
+                              type: 'checkbox',
+                              className: 'checkbox__input',
+                              checked: notification.isConfirmed,
+                              onChange: function (event) {
+                                return handleNotificationChange(notification.id, event.target.checked);
+                              }
+                            }),
+                            React__default.createElement(
+                              'span',
+                              { className: 'checkbox__label-text' },
+                              React__default.createElement('strong', { className: 'checkbox__label-text--title' }, notification.title),
+                              React__default.createElement('span', { className: 'checkbox__label-text--description' }, notification.description)
+                            )
+                          )
+                        );
+                      })
+                    )
+                  )
+                )
+              )
+            ),
+          React__default.createElement(
+            'div',
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__default.createElement(
+                  'div',
+                  { className: 'form__region-header' },
+                  React__default.createElement('h5', { className: 'form__region-heading' }, translations.SUMMARY.REMARKS)
+                )
+              )
+            ),
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__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.createElement(
+            'div',
+            { className: 'form__region' },
+            React__default.createElement(
+              'div',
+              { className: 'form__row' },
+              React__default.createElement(
+                'div',
+                { className: 'form__group' },
+                React__default.createElement(
+                  'div',
+                  { className: 'info-message' },
+                  React__default.createElement(Icon, { name: 'ui-tooltip', className: 'icon--secondary-color' }),
+                  React__default.createElement(
+                    'div',
+                    { className: 'info-message__copy' },
+                    React__default.createElement('h5', null, translations.SUMMARY.VALIDATE_TITLE),
+                    customValidateText
+                      ? React__default.createElement('div', { dangerouslySetInnerHTML: { __html: customValidateText } })
+                      : React__default.createElement(
+                          React__default.Fragment,
+                          null,
+                          React__default.createElement(
+                            'p',
+                            null,
+                            isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING
+                          ),
+                          allowOption && React__default.createElement('p', null, translations.SUMMARY.VALIDATE_TEXT_OPTION)
+                        ),
+                    localCheckboxes === null || localCheckboxes === void 0
+                      ? void 0
+                      : localCheckboxes.map(function (checkbox) {
+                          return React__default.createElement(
+                            'div',
+                            { className: 'checkbox', key: checkbox.id },
+                            React__default.createElement(
+                              'label',
+                              { className: 'checkbox__label' },
+                              React__default.createElement('input', {
+                                type: 'checkbox',
+                                className: 'checkbox__input',
+                                checked: checkbox.isSelected,
+                                onChange: function () {
+                                  return handleCheckboxChange(checkbox.id);
+                                }
+                              }),
+                              React__default.createElement('span', { className: 'checkbox__label-text', dangerouslySetInnerHTML: { __html: checkbox.text } })
+                            )
+                          );
+                        })
+                  )
+                )
+              )
+            )
+          )
+        ),
+        React__default.createElement(
+          'div',
+          { className: 'booking__navigator' },
+          renderPreviousButton(),
+          allowOption &&
+            React__default.createElement(
+              'button',
+              {
+                title: translations.STEPS.SUBMIT_OPTION,
+                className: buildClassName(['cta', !userValidated && 'cta--disabled']),
+                disabled: !userValidated,
+                name: 'option'
+              },
+              translations.STEPS.SUBMIT_OPTION
+            ),
+          React__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 = 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.createElement(
+      'li',
+      { key: line.guid },
+      React__default.createElement('h6', null, line.productName),
+      React__default.createElement(
+        'ul',
+        null,
+        React__default.createElement('li', { className: 'list__item' }, 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.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),
+                ')'
+              );
+            }),
+        !isEmpty(visiblePriceDetails) &&
+          visiblePriceDetails.map(function (detail, index) {
+            var _a;
+            return React__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.createElement(
+        'p',
+        null,
+        '(',
+        line.from === line.to
+          ? getDateText(line.from)
+          : React__default.createElement(React__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 = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-  var translations = getTranslations((_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
-  var currentStep = useSelector(function (state) {
-    return state.searchResults;
-  }).currentStep;
-  useDispatch();
+  var dispatch = useDispatch();
+  var _d = useSelector(function (state) {
+      return state.searchResults;
+    }),
+    editablePackagingEntry = _d.editablePackagingEntry,
+    priceDetails = _d.priceDetails,
+    currentStep = _d.currentStep,
+    bookingNumber = _d.bookingNumber;
+  var _e = useState([]),
+    countries = _e[0],
+    setCountries = _e[1];
+  var _f = useState(true),
+    userValidated = _f[0],
+    setUserValidated = _f[1];
+  var _g = useState(''),
+    remarks = _g[0],
+    setRemarks = _g[1];
+  var _h = 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 = useMemo(
+    function () {
+      return createInitialValuesFromEditablePackagingEntry(editablePackagingEntry);
+    },
+    [editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.transactionId]
+  );
+  var 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));
+    }
+  });
+  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();
+    };
+  }, []);
+  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.createElement(
     'div',
     { className: 'booking' },
@@ -46760,16 +47417,77 @@ var BookPackagingEntry = function (_a) {
       'div',
       { className: 'booking__content' },
       React__default.createElement(
-        BookingPanel,
-        {
-          currentStep: currentStep,
-          stepLabels: stepLabels,
-          StepIndicatorsComponent: StepIndicators$1,
-          renderTitle: function (step) {
-            return React__default.createElement(React__default.Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
-          }
-        },
-        React__default.createElement('div', null)
+        'div',
+        { className: 'booking__panel' },
+        React__default.createElement(
+          BookingPanel,
+          {
+            currentStep: currentStep,
+            stepLabels: stepLabels,
+            StepIndicatorsComponent: StepIndicators$1,
+            renderTitle: function (step) {
+              return React__default.createElement(React__default.Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
+            }
+          },
+          currentStep === 0 &&
+            React__default.createElement(SharedTravelersForm, {
+              formik: formik,
+              translations: translations,
+              travellersSettings: travellersSettings,
+              countries: countries,
+              travelersFirstStep: false,
+              isUnavailable: false,
+              useCompactForm: false,
+              showAgentSelection: false
+            }),
+          currentStep === 1 &&
+            React__default.createElement(SharedSummary, {
+              translations: translations,
+              travelerFormValues: formik.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.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.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.createElement('div', null)
+        )
       ),
       React__default.createElement('div', { className: 'backdrop', id: 'backdrop' }),
       React__default.createElement(WLSidebar, { activeSearchSeed: activeSearchSeed })
@@ -46829,9 +47547,12 @@ var SearchResultsContainer = function () {
   var _k = useState(false),
     itineraryOpen = _k[0],
     setItineraryOpen = _k[1];
-  var _l = useState(null),
-    selectedAccommodationSeed = _l[0],
-    setSelectedAccommodationSeed = _l[1];
+  var _l = useState(false),
+    isBookingConfirmation = _l[0],
+    setIsBookingConfirmation = _l[1];
+  var _m = useState(null),
+    selectedAccommodationSeed = _m[0],
+    setSelectedAccommodationSeed = _m[1];
   var skipInitialPackagingAccoDetailsRef = useRef(false);
   var panelRef = useRef(null);
   var sortByTypes = [
@@ -47575,6 +48296,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]
@@ -48279,38 +49007,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) {
@@ -48325,7 +49060,7 @@ var SearchResultsContainer = function () {
         'div',
         { className: 'search' },
         bookPackagingEntry
-          ? React__default.createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed })
+          ? React__default.createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed, isConfirmationPage: isBookingConfirmation })
           : React__default.createElement(
               'div',
               { className: 'search__container' },
@@ -48510,8 +49245,8 @@ var SearchResultsContainer = function () {
                               { className: 'search__results__label__date' },
                               (function () {
                                 var firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
-                                var firstResultDay = firstResultDate ? format$1(firstResultDate, 'd') : null;
-                                var firstResultMonth = firstResultDate ? format$1(firstResultDate, 'MMM') : null;
+                                var firstResultDay = firstResultDate ? format$2(firstResultDate, 'd') : null;
+                                var firstResultMonth = firstResultDate ? format$2(firstResultDate, 'MMM') : null;
                                 return React__default.createElement(
                                   React__default.Fragment,
                                   null,
@@ -48607,8 +49342,8 @@ var SearchResultsContainer = function () {
                               { className: 'search__results__label__date' },
                               (function () {
                                 var firstResultDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
-                                var firstResultDay = firstResultDate ? format$1(firstResultDate, 'd') : null;
-                                var firstResultMonth = firstResultDate ? format$1(firstResultDate, 'MMM') : null;
+                                var firstResultDay = firstResultDate ? format$2(firstResultDate, 'd') : null;
+                                var firstResultMonth = firstResultDate ? format$2(firstResultDate, 'MMM') : null;
                                 return React__default.createElement(
                                   React__default.Fragment,
                                   null,