@qite/tide-components 1.0.12 → 1.0.13-preview.0

package/build/build-esm/index.js

@@ -1,18 +1,18 @@
 /* eslint-disable */
 import * as React from 'react';
-import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect, useContext, useState, useRef, useCallback, useMemo } from 'react';
+import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect, useContext, useState, useRef, useMemo, useCallback } from 'react';
 import JsonURL from '@jsonurl/jsonurl';
-import { format as format$2, isToday, getDate, startOfWeek, startOfMonth, endOfWeek, addWeeks, endOfMonth, eachDayOfInterval, getYear, getMonth, getISOWeek, getISODay, isSameMonth, startOfDay, isAfter, isSameDay, isEqual, isWithinInterval, endOfDay, isBefore, differenceInCalendarDays, addMonths, addDays, formatISO, addYears, differenceInYears, parseISO, differenceInMinutes, parse, isValid, startOfToday } from 'date-fns';
-import { merge, cloneDeep, isNil, isArray as isArray$1, compact, isEmpty as isEmpty$1, range, chunk, isFunction as isFunction$1, clamp, now, omit, isPlainObject as isPlainObject$1, mapValues, pickBy, first, orderBy, uniq, uniqBy, sortBy, sum, last, findIndex as findIndex$1, get, set, isEqual as isEqual$1, groupBy, minBy, concat, flatMap } from 'lodash';
+import { format as format$2, isToday, getDate, startOfWeek, startOfMonth, endOfWeek, addWeeks, endOfMonth, eachDayOfInterval, getYear, getMonth, getISOWeek, getISODay, isSameMonth, startOfDay, isAfter, isSameDay, isEqual, isWithinInterval, endOfDay, isBefore, differenceInCalendarDays, addMonths, addDays, formatISO, addYears, differenceInYears, parse, isValid, parseISO, differenceInMinutes, startOfToday } from 'date-fns';
+import { merge, cloneDeep, isNil, isArray as isArray$1, compact, isEmpty as isEmpty$1, range, chunk, isFunction as isFunction$1, clamp, now, omit, get, last, first, sortBy, isPlainObject as isPlainObject$1, mapValues, pickBy, orderBy, uniq, uniqBy, sum, findIndex as findIndex$1, set, isEqual as isEqual$1, groupBy, minBy, concat, flatMap } from 'lodash';
 import { arSA, da, de, enGB, es, fr, is, it, nl, nb, pl, pt, sv, ja, enUS } from 'date-fns/locale';
 import { usePopper } from 'react-popper';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 import { createSlice, createSelector, createAsyncThunk, configureStore } from '@reduxjs/toolkit';
+import flat from 'flat';
 import { UNSAFE_NavigationContext, useHref, useNavigate, useLocation, useResolvedPath, createPath, UNSAFE_DataRouterStateContext, UNSAFE_useRouteId, UNSAFE_RouteContext, UNSAFE_DataRouterContext, Routes, Route } from 'react-router';
 import 'react-dom';
 import produce from 'immer';
 import { useFormik } from 'formik';
-import flat from 'flat';
 import { v4 } from 'uuid';
 
 function _mergeNamespaces(n, m) {
@@ -124,7 +124,9 @@ var SHARED$f = {
 	ADULTS: "بالغون",
 	CHILDREN: "أطفال",
 	SELECT: "اختر",
-	SELECTED: "تم الاختيار"
+	SELECTED: "تم الاختيار",
+	BOOKED: "محجوز",
+	SAVE: "حفظ"
 };
 var SIDEBAR$f = {
 	OVERVIEW: "الملخص",
@@ -182,6 +184,21 @@ var TRAVELERS_FORM$f = {
 	FIRST_NAME: "الاسم الأول",
 	LAST_NAME: "اسم العائلة",
 	BIRTHDATE: "تاريخ الميلاد",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "الوزن",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -577,7 +594,9 @@ var SHARED$e = {
 	ADULTS: "Voksne",
 	CHILDREN: "Børn",
 	SELECT: "Vælg",
-	SELECTED: "Valgt"
+	SELECTED: "Valgt",
+	BOOKED: "Booket",
+	SAVE: "Gem"
 };
 var SIDEBAR$e = {
 	OVERVIEW: "Oversigt",
@@ -635,6 +654,21 @@ var TRAVELERS_FORM$e = {
 	FIRST_NAME: "Fornavn",
 	LAST_NAME: "Efternavn",
 	BIRTHDATE: "Fødselsdato",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Vægt",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -1030,7 +1064,9 @@ var SHARED$d = {
 	ADULTS: "Erwachsene",
 	CHILDREN: "Kinder",
 	SELECT: "Auswählen",
-	SELECTED: "Ausgewählt"
+	SELECTED: "Ausgewählt",
+	BOOKED: "Gebucht",
+	SAVE: "Speichern"
 };
 var SIDEBAR$d = {
 	OVERVIEW: "Übersicht",
@@ -1088,6 +1124,21 @@ var TRAVELERS_FORM$d = {
 	FIRST_NAME: "Vorname",
 	LAST_NAME: "Nachname",
 	BIRTHDATE: "Geburtsdatum",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Gewicht",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -1483,7 +1534,9 @@ var SHARED$c = {
 	ADULTS: "Adults",
 	CHILDREN: "Children",
 	SELECT: "Select",
-	SELECTED: "Selected"
+	SELECTED: "Selected",
+	BOOKED: "Booked",
+	SAVE: "Save"
 };
 var SIDEBAR$c = {
 	OVERVIEW: "Summary",
@@ -1542,6 +1595,21 @@ var TRAVELERS_FORM$c = {
 	FIRST_NAME: "First name",
 	LAST_NAME: "Last name",
 	BIRTHDATE: "Date of birth",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Weight",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -1940,7 +2008,9 @@ var SHARED$b = {
 	ADULTS: "Adultos",
 	CHILDREN: "Niños",
 	SELECT: "Seleccionar",
-	SELECTED: "Seleccionado"
+	SELECTED: "Seleccionado",
+	BOOKED: "Reservado",
+	SAVE: "Guardar"
 };
 var SIDEBAR$b = {
 	OVERVIEW: "Resumen",
@@ -1998,6 +2068,21 @@ var TRAVELERS_FORM$b = {
 	FIRST_NAME: "Nombre",
 	LAST_NAME: "Apellido",
 	BIRTHDATE: "Fecha de nacimiento",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Peso",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -2393,7 +2478,9 @@ var SHARED$a = {
 	ADULTS: "Adultes",
 	CHILDREN: "Enfants",
 	SELECT: "Sélectionner",
-	SELECTED: "Sélectionné"
+	SELECTED: "Sélectionné",
+	BOOKED: "Réservé",
+	SAVE: "Enregistrer"
 };
 var SIDEBAR$a = {
 	OVERVIEW: "Aperçu",
@@ -2452,6 +2539,21 @@ var TRAVELERS_FORM$a = {
 	FIRST_NAME: "Prénom",
 	LAST_NAME: "Nom",
 	BIRTHDATE: "Date de naissance",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Poids",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -2850,7 +2952,9 @@ var SHARED$9 = {
 	ADULTS: "Adultes",
 	CHILDREN: "Enfants",
 	SELECT: "Sélectionner",
-	SELECTED: "Sélectionné"
+	SELECTED: "Sélectionné",
+	BOOKED: "Réservé",
+	SAVE: "Enregistrer"
 };
 var SIDEBAR$9 = {
 	OVERVIEW: "Résumé",
@@ -2908,6 +3012,21 @@ var TRAVELERS_FORM$9 = {
 	FIRST_NAME: "Prénom",
 	LAST_NAME: "Nom",
 	BIRTHDATE: "Date de naissance",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Poids",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -3303,7 +3422,9 @@ var SHARED$8 = {
 	ADULTS: "Fullorðnir",
 	CHILDREN: "Börn",
 	SELECT: "Velja",
-	SELECTED: "Valið"
+	SELECTED: "Valið",
+	BOOKED: "Bókað",
+	SAVE: "Vista"
 };
 var SIDEBAR$8 = {
 	OVERVIEW: "Yfirlit",
@@ -3361,6 +3482,21 @@ var TRAVELERS_FORM$8 = {
 	FIRST_NAME: "Fornafn",
 	LAST_NAME: "Eftirnafn",
 	BIRTHDATE: "Fæðingardagur",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Þyngd",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -3756,7 +3892,9 @@ var SHARED$7 = {
 	ADULTS: "Adulti",
 	CHILDREN: "Bambini",
 	SELECT: "Seleziona",
-	SELECTED: "Selezionato"
+	SELECTED: "Selezionato",
+	BOOKED: "Prenotato",
+	SAVE: "Salva"
 };
 var SIDEBAR$7 = {
 	OVERVIEW: "Riepilogo",
@@ -3814,6 +3952,21 @@ var TRAVELERS_FORM$7 = {
 	FIRST_NAME: "Nome",
 	LAST_NAME: "Cognome",
 	BIRTHDATE: "Data di nascita",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Peso",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -4209,7 +4362,9 @@ var SHARED$6 = {
 	ADULTS: "Volwassenen",
 	CHILDREN: "Kinderen",
 	SELECT: "Selecteer",
-	SELECTED: "Geselecteerd"
+	SELECTED: "Geselecteerd",
+	BOOKED: "Geboekt",
+	SAVE: "Opslaan"
 };
 var SIDEBAR$6 = {
 	OVERVIEW: "Overzicht",
@@ -4268,6 +4423,21 @@ var TRAVELERS_FORM$6 = {
 	FIRST_NAME: "Voornaam",
 	LAST_NAME: "Naam",
 	BIRTHDATE: "Geboortedatum",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Gewicht",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -4666,7 +4836,9 @@ var SHARED$5 = {
 	ADULTS: "Volwassenen",
 	CHILDREN: "Kinderen",
 	SELECT: "Selecteren",
-	SELECTED: "Geselecteerd"
+	SELECTED: "Geselecteerd",
+	BOOKED: "Geboekt",
+	SAVE: "Opslaan"
 };
 var SIDEBAR$5 = {
 	OVERVIEW: "Overzicht",
@@ -4724,6 +4896,21 @@ var TRAVELERS_FORM$5 = {
 	FIRST_NAME: "Voornaam",
 	LAST_NAME: "Achternaam",
 	BIRTHDATE: "Geboortedatum",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Gewicht",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -5119,7 +5306,9 @@ var SHARED$4 = {
 	ADULTS: "Voksne",
 	CHILDREN: "Barn",
 	SELECT: "Velg",
-	SELECTED: "Valgt"
+	SELECTED: "Valgt",
+	BOOKED: "Booket",
+	SAVE: "Lagre"
 };
 var SIDEBAR$4 = {
 	OVERVIEW: "Oversikt",
@@ -5177,6 +5366,21 @@ var TRAVELERS_FORM$4 = {
 	FIRST_NAME: "Fornavn",
 	LAST_NAME: "Etternavn",
 	BIRTHDATE: "Fødselsdato",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Vekt",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -5572,7 +5776,9 @@ var SHARED$3 = {
 	ADULTS: "Dorośli",
 	CHILDREN: "Dzieci",
 	SELECT: "Wybierz",
-	SELECTED: "Wybrane"
+	SELECTED: "Wybrane",
+	BOOKED: "Zarezerwowane",
+	SAVE: "Zapisz"
 };
 var SIDEBAR$3 = {
 	OVERVIEW: "Podsumowanie",
@@ -5630,6 +5836,21 @@ var TRAVELERS_FORM$3 = {
 	FIRST_NAME: "Imię",
 	LAST_NAME: "Nazwisko",
 	BIRTHDATE: "Data urodzenia",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Waga",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -6025,7 +6246,9 @@ var SHARED$2 = {
 	ADULTS: "Adultos",
 	CHILDREN: "Crianças",
 	SELECT: "Selecionar",
-	SELECTED: "Selecionado"
+	SELECTED: "Selecionado",
+	BOOKED: "Reservado",
+	SAVE: "Guardar"
 };
 var SIDEBAR$2 = {
 	OVERVIEW: "Resumo",
@@ -6083,6 +6306,21 @@ var TRAVELERS_FORM$2 = {
 	FIRST_NAME: "Nome",
 	LAST_NAME: "Apelido",
 	BIRTHDATE: "Data de nascimento",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Peso",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -6478,7 +6716,9 @@ var SHARED$1 = {
 	ADULTS: "Vuxna",
 	CHILDREN: "Barn",
 	SELECT: "Välj",
-	SELECTED: "Vald"
+	SELECTED: "Vald",
+	BOOKED: "Bokad",
+	SAVE: "Spara"
 };
 var SIDEBAR$1 = {
 	OVERVIEW: "Översikt",
@@ -6536,6 +6776,21 @@ var TRAVELERS_FORM$1 = {
 	FIRST_NAME: "Förnamn",
 	LAST_NAME: "Efternamn",
 	BIRTHDATE: "Födelsedatum",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "Vikt",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -6931,7 +7186,9 @@ var SHARED = {
 	ADULTS: "大人",
 	CHILDREN: "子供",
 	SELECT: "選択",
-	SELECTED: "選択済み"
+	SELECTED: "選択済み",
+	BOOKED: "予約済み",
+	SAVE: "保存"
 };
 var SIDEBAR = {
 	OVERVIEW: "概要",
@@ -6989,6 +7246,21 @@ var TRAVELERS_FORM = {
 	FIRST_NAME: "名",
 	LAST_NAME: "姓",
 	BIRTHDATE: "生年月日",
+	NICKNAME: "Nickname",
+	BIRTHPLACE: "Birthplace",
+	NATIONALITY: "Nationality",
+	PREFERRED_LANGUAGE: "Preferred language",
+	TRAVELER_EMAIL: "Email",
+	TRAVELER_PHONE: "Phone",
+	TRAVELER_MOBILE: "Mobile phone",
+	PASSPORT_NUMBER: "Passport number",
+	PASSPORT_ISSUE_DATE: "Passport issue date",
+	PASSPORT_ISSUED_LOCATION: "Passport issued location",
+	PASSPORT_EXPIRY_DATE: "Passport expiry date",
+	EMERGENCY_NUMBER: "Emergency number",
+	HAS_INSURANCE: "Has insurance",
+	INSURANCE_NAME: "Insurance name",
+	INFO: "Additional information",
 	WEIGHT: "体重",
 	WEIGHT_UNIT_KG: "kg",
 	WEIGHT_UNIT_LB: "lb",
@@ -15092,6 +15364,34 @@ var getContentDraft = function (config, signal) {
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
+/**
+ * api/web/content/live/filtered
+ * Gets filtered Live content
+ * @param config
+ * @param request
+ * @param signal
+ * @returns OK if succeeded.
+ */
+var getFilteredContentLive = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_LIVE + "/filtered";
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
+/**
+ * api/web/content/draft/filtered
+ * Gets filtered Draft (Internal) content
+ * @param config
+ * @param request
+ * @param signal
+ * @returns OK if succeeded.
+ */
+var getFilteredContentDraft = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_DRAFT + "/filtered";
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
 /**
  * api/web/content/live/by-property
  * Gets Live content matching a property value (or values).
@@ -15219,6 +15519,7 @@ var ENDPOINT_TRAJECT = ENDPOINT$1 + "/traject";
 var ENDPOINT_ENTRY = function (magicLinkCode) {
   return ENDPOINT$1 + "/entry/" + magicLinkCode;
 };
+var ENDPOINT_SAVE_ENTRY = ENDPOINT$1 + "/entry/save";
 var startTransaction = function (config, signal) {
   var apiKey = config.apiKey;
   var url = "" + config.host + ENDPOINT_START_TRANSACTION;
@@ -15247,6 +15548,12 @@ var getEntry = function (config, magicLinkCode, signal) {
   var url = "" + config.host + ENDPOINT_ENTRY(magicLinkCode);
   return get(url, apiKey, config.token, signal, true);
 };
+var savePackagingEntry = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_SAVE_ENTRY;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
 var getTrajectEntry = function (config, request, signal) {
   var url = "" + config.host + ENDPOINT_TRAJECT;
   var apiKey = config.apiKey;
@@ -15381,6 +15688,8 @@ exports.getEntryList = getEntryList;
 exports.getEntryListv2 = getEntryListv2;
 exports.getEntryStatus = getEntryStatus;
 exports.getEntryTotals = getEntryTotals;
+exports.getFilteredContentDraft = getFilteredContentDraft;
+exports.getFilteredContentLive = getFilteredContentLive;
 exports.getInvoiceList = getInvoiceList;
 exports.getItinerary = getItinerary;
 exports.getLocations = getLocations;
@@ -15401,6 +15710,7 @@ exports.print = print;
 exports.readForm = readForm;
 exports.repriceAndIssueTicket = repriceAndIssueTicket;
 exports.resetPassword = resetPassword;
+exports.savePackagingEntry = savePackagingEntry;
 exports.search = search;
 exports.searchCountries = searchCountries;
 exports.searchElastic = searchElastic;
@@ -18731,335 +19041,1163 @@ const SUMMARY_STEP = 5;
 const CONFIRMATION_STEP = 6;
 const ERROR_STEP = 7;
 
-const fetchPriceDetails$1 = async (apiSettings, request, signal, languageCode) => {
-    const tideClientConfig = buildTideClientConfig(apiSettings);
-    return await build.priceDetails(tideClientConfig, request, signal, languageCode);
-};
-const priceDetailsApi = {
-    fetchPriceDetails: fetchPriceDetails$1
+const LabeledInput = ({ name, type, required, value, defaultValue, min, max, label, placeholder, extraClassName, hasError, onChange, 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 ?? 'text', required: required, className: "form__input", min: min, max: max, placeholder: placeholder, onChange: onChange, onBlur: onBlur, value: value, defaultValue: defaultValue })));
 };
 
-const updatePackageDetails = (packageDetails, changedLines) => {
-    return {
-        ...packageDetails,
-        options: packageDetails.options.map((opt) => {
-            return {
-                ...opt,
-                rooms: opt.isSelected ? updateRooms(opt.rooms, changedLines) : opt.rooms,
-                groups: opt.isSelected ? updateBookingGroups(opt.groups, changedLines) : opt.groups,
-                optionUnits: opt.isSelected ? updateOptionUnits(opt.optionUnits, changedLines) : opt.optionUnits,
-                optionPax: opt.isSelected ? updateOptionPax(opt.optionPax, changedLines) : opt.optionPax
-            };
-        })
-    };
-};
-// ROOMS
-const updateRooms = (rooms, changedLines) => {
-    return rooms.map((room) => ({
-        ...room,
-        options: room.options.map((option) => ({
-            ...option,
-            price: changedLines.find((x) => x.entryLineGuid == option.entryLineGuid)?.price ?? option.price
-        }))
-    }));
-};
-// PAX
-const updateOptionPax = (pax, changedLines) => {
-    return pax.map((p) => ({
-        ...p,
-        groups: updatePaxGroups(p.groups, changedLines)
-    }));
-};
-const updatePaxGroups = (groups, changedLines) => {
-    return groups.map((g) => ({
-        ...g,
-        options: g.options.map((o) => ({
-            ...o,
-            groups: updatePaxGroups(o.groups, changedLines),
-            line: {
-                ...o.line,
-                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-            },
-            alternatives: o.alternatives.map((a) => ({
-                ...a,
-                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-            }))
-        }))
-    }));
-};
-// UNITS
-const updateOptionUnits = (units, changedLines) => {
-    return units.map((u) => ({
-        ...u,
-        groups: updateUnitGroups(u.groups, changedLines)
-    }));
-};
-const updateUnitGroups = (groups, changedLines) => {
-    return groups.map((g) => ({
-        ...g,
-        options: g.options.map((o) => ({
-            ...o,
-            groups: updateUnitGroups(o.groups, changedLines),
-            pax: updateOptionPax(o.pax, changedLines),
-            line: {
-                ...o.line,
-                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-            },
-            alternatives: o.alternatives.map((a) => ({
-                ...a,
-                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-            }))
-        }))
-    }));
-};
-// BOOKING
-const updateBookingGroups = (groups, changedLines) => {
-    return groups.map((g) => ({
-        ...g,
-        options: g.options.map((o) => ({
-            ...o,
-            groups: updateBookingGroups(o.groups, changedLines),
-            units: updateOptionUnits(o.units, changedLines),
-            pax: updateOptionPax(o.pax, changedLines),
-            line: {
-                ...o.line,
-                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-            },
-            alternatives: o.alternatives.map((a) => ({
-                ...a,
-                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-            }))
-        }))
-    }));
+const LabeledSelect = ({ name, id, required, value, defaultValue, label, extraClassName, extraDropdownClassName, hasError, options, onChange, 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?.map((option) => (React__default.createElement("option", { key: option.key, value: option.value }, option.label)))))));
 };
 
-const fetchPriceDetails = createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
-    const state = getState();
-    const languageCode = selectLanguageCode(state);
-    const request = selectBookingPackageBookRequest(state);
-    if (!request) {
-        throw Error('Product not available.');
-    }
-    dispatch(setFetchingPriceDetails(true));
-    dispatch(resetPriceDetails());
-    const priceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
-    dispatch(setFetchingPriceDetails(false));
-    const packageDetails = selectPackageDetails(state);
-    if (packageDetails) {
-        const updatedPackageDetails = updatePackageDetails(packageDetails, priceDetails.changedLines);
-        dispatch(setPackage(updatedPackageDetails));
+const normalize = (v) => (v == null ? '' : String(v));
+const parseCombined = (raw, countries) => {
+    const value = normalize(raw).trim();
+    if (!value)
+        return { prefix: '', number: '' };
+    // Try to match a known prefix at the start. Prefer longest match.
+    const sorted = [...countries].sort((a, b) => b.phonePrefix.length - a.phonePrefix.length);
+    const hit = sorted.find((c) => value.startsWith(c.phonePrefix));
+    if (hit) {
+        const rest = value
+            .slice(hit.phonePrefix.length)
+            .trim()
+            .replace(/^[-\s]+/, '');
+        return { prefix: hit.phonePrefix, number: rest };
     }
-    return priceDetails;
-});
-const priceDetailsSlice = createSlice({
-    name: 'priceDetails',
-    initialState: {
-        priceDetails: [],
-        notifications: [],
-        isBusy: false
-    },
-    reducers: {
-        setFetchingPriceDetails(state, action) {
-            state.isBusy = action.payload;
-        },
-        setNotifications(state, action) {
-            state.notifications = action.payload;
-        },
-        resetPriceDetails(state, _) {
-            state.priceDetails = [];
-        }
-    },
-    extraReducers: (builder) => {
-        builder.addCase(fetchPriceDetails.fulfilled, (state, action) => {
-            if (action.payload) {
-                state.deposit = action.payload.deposit;
-                state.commission = action.payload.commission;
-                state.priceDetails = action.payload.details;
-                state.notifications = action.payload.notifications;
-            }
-        });
-        builder.addCase(fetchPriceDetails.rejected, (state) => {
-            state.isBusy = false;
+    // Fallback: split on first space if it looks like a +prefix number
+    const m = value.match(/^(\+\d{1,4})[\s-]*(.*)$/);
+    if (m)
+        return { prefix: m[1], number: m[2] };
+    return { prefix: '', number: value };
+};
+const PhoneInput = ({ name, required, value, label, placeholder, extraClassName, hasError, countries, countryIso2, onChange, onBlur }) => {
+    // Derive initial state from `value`
+    const initialCountry = countries.find((c) => c.iso2 === countryIso2);
+    const initial = useMemo(() => parseCombined(normalize(value), countries), [value, countries]);
+    const [prefix, setPrefix] = useState(initial.prefix);
+    const [number, setNumber] = useState(initial.number);
+    // Keep state in sync if the parent changes `value`
+    useEffect(() => {
+        const parsed = !prefix && !number && initialCountry ? { prefix: initialCountry.phonePrefix, number: '' } : parseCombined(normalize(value), countries);
+        if (parsed.prefix)
+            setPrefix(parsed.prefix);
+        if (parsed.number)
+            setNumber(parsed.number);
+    }, [value, countries, countryIso2]);
+    const emitCombinedChange = (e, nextPrefix, nextNumber) => {
+        // Combine with a space, unless the number already starts with a dash or space
+        const combined = nextPrefix && nextNumber ? compact([nextPrefix, nextNumber]).join(' ') : null;
+        onChange?.({
+            ...e,
+            type: 'change',
+            target: { name, value: combined },
+            currentTarget: { name, value: combined }
         });
-    }
-});
-const { setFetchingPriceDetails } = priceDetailsSlice.actions;
-const { resetPriceDetails, setNotifications } = priceDetailsSlice.actions;
-const selectNotifications = (state) => state.priceDetails.notifications;
-var priceDetailsReducer = priceDetailsSlice.reducer;
+    };
+    const handleCountryBlur = (e) => {
+        onBlur?.(e);
+    };
+    const onCountryChange = (e) => {
+        const next = e.target.value;
+        setPrefix(next);
+        emitCombinedChange(e, next, number);
+    };
+    const onPhoneChange = (e) => {
+        const cleaned = e.target.value.replace(/[^\d\s-]/g, '');
+        setNumber(cleaned);
+        emitCombinedChange(e, prefix, cleaned);
+    };
+    const handleNumberBlur = (e) => {
+        onBlur?.(e);
+    };
+    // Ensure the select shows a reasonable default when prefix is empty
+    const selectValue = prefix || '';
+    return (React__default.createElement("label", { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
+        label && React__default.createElement("span", { className: "form__label" }, compact([label, required && '*']).join(' ')),
+        React__default.createElement("div", { className: "phone-input" },
+            React__default.createElement("div", { className: "dropdown" },
+                React__default.createElement("select", { "aria-label": label ? `${label} – country code` : 'Country calling code', name: `${name}__country`, value: selectValue, onBlur: handleCountryBlur, onChange: onCountryChange },
+                    React__default.createElement("option", { value: "", disabled: true }),
+                    countries?.map((option) => (React__default.createElement("option", { key: option.iso2, value: option.phonePrefix },
+                        option.name,
+                        " (",
+                        option.phonePrefix,
+                        ")"))))),
+            React__default.createElement("input", { "aria-label": label ? `${label} – number` : 'Phone number', name: `${name}__number`, type: "tel", inputMode: "tel", required: required, className: "form__input", placeholder: placeholder, onChange: onPhoneChange, onBlur: handleNumberBlur, value: number }),
+            React__default.createElement("input", { type: "hidden", name: name, value: compact([prefix, number]).join(' ') }))));
+};
 
-const selectHasMounted = (state) => state.booking.hasMounted;
-const selectGeneratePaymentUrl = (state) => state.booking.generatePaymentUrl;
-const selectSkipPaymentWithAgent = (state) => state.booking.skipPaymentWithAgent;
-const selectIsFetchingProductOptions = (state) => state.booking.isBusy;
-const selectDepartureFlight = (state) => state.booking.package?.outwardFlights?.find((x) => x.isSelected);
-const selectReturnFlight = (state) => state.booking.package?.returnFlights?.find((x) => x.isSelected);
-const selectPackageRooms = (state) => state.booking.package?.options.find((x) => x.isSelected)?.rooms;
-const selectIncludedServiceTypes = (state) => selectActiveOption(state)?.includedServiceTypes;
-const selectAvailabilities = (state) => state.booking.package?.options.find((x) => x.isSelected)?.availabilities;
-const selectPackageTags = (state) => state.booking.package?.tags;
-const selectIsOnRequest = (state) => state.booking.package?.options.find((x) => x.isSelected)?.isOnRequest;
-const selectPackageOptionUnits = (state) => state.booking.package?.options.find((x) => x.isSelected)?.optionUnits;
-const selectPackageOptionPax = (state) => state.booking.package?.options.find((x) => x.isSelected)?.optionPax;
-const selectPackageGroups = (state) => state.booking.package?.options.find((x) => x.isSelected)?.groups;
-const selectPackageDetails = (state) => state.booking.package;
-const selectPaxCustomFields = (state) => state.booking.package?.paxCustomFields ?? [];
-const selectPackageFlights = (state) => ({
-    outward: state.booking.package?.outwardFlights,
-    return: state.booking.package?.returnFlights
-});
-const selectFlightMetaData = (state) => state.booking.package?.flightInfo.metaData;
-const selectActiveOption = (state) => state.booking.package?.options.find((x) => x.isSelected);
-const selectPackageAirlineGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, (option, departureFlight, returnFlight) => option?.airlineGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? '')));
-const selectPackageAirportGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, (option, departureFlight, returnFlight) => option?.airportGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? '')));
-const selectRoomOptionDepartureFlightsMetaData = createSelector(selectActiveOption, selectFlightMetaData, (ativeOption, flightMetaData) => {
-    const roomOptions = ativeOption?.rooms.map((r) => r.options.filter((o) => o.isSelected).shift());
-    return roomOptions?.map((ro) => flightMetaData?.find((f) => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter((f) => f !== undefined) ?? [];
-});
-const selectRoomOptionReturnFlightsMetaData = createSelector(selectActiveOption, selectFlightMetaData, (ativeOption, flightMetaData) => {
-    const selectedRoomOptions = ativeOption?.rooms.map((r) => r.options.filter((o) => o.isSelected));
-    // check if there are return flights selected
-    if (selectedRoomOptions?.some((ro) => ro.length > 1)) {
-        const roomOptions = ativeOption?.rooms.map((r) => r.options
-            .filter((o) => o.isSelected)
-            .reverse()
-            .shift());
-        return roomOptions?.map((ro) => flightMetaData?.find((f) => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter((f) => f !== undefined) ?? [];
-    }
-    return undefined;
-});
-const selectApiSettings = (state) => state.apiSettings;
-const selectIsUnavailable = (state) => state.booking.isUnavailable;
-const selectRequestRooms = (state) => state.booking.package?.options.find((x) => x.isSelected)?.requestRooms;
-const selectOfficeId = (state) => state.booking.officeId;
-const selectLanguageCode = (state) => state.booking.languageCode;
-const selectCurrencyCode = (state) => state.booking.package?.currencyCode ?? 'EUR';
-const selectLanguage = (state) => state.booking.languageCode;
-const selectAllDynamicTranslations = (state) => state.booking.translations;
-const selectDynamicTranslations = createSelector([selectAllDynamicTranslations, selectLanguage], (allDynamicTranslations, language) => {
-    return allDynamicTranslations?.find((x) => x.language == language)?.value ?? {};
-});
-// Host override files are hand-maintained, and a null only ever blanks a key the component
-// then reads, so treat it like a missing key (lodash merge already skips undefined).
-const withoutNulls = (value) => isPlainObject$1(value)
-    ? mapValues(pickBy(value, (x) => x !== null), withoutNulls)
-    : value;
-// getTranslations deep-merges the overrides over a clone of the built-in translations, so a
-// host override of a nested group (TRAVELERS_FORM.VALIDATION, TRAVELERS_FORM.COUNTRIES)
-// only replaces the keys it actually contains. Merging per section one level deep dropped
-// every other built-in key of such a group, which made those keys resolve to undefined and
-// crash format() in the consuming component.
-const selectTranslations = createSelector([selectLanguage, selectDynamicTranslations], (language, dynamicTranslations) => getTranslations(language, isEmpty$1(dynamicTranslations) ? undefined : withoutNulls(dynamicTranslations)));
-const selectBookingOptions = (state) => state.booking.bookingOptions;
-const selectBookingType = (state) => state.booking.bookingType;
-const selectTagIds = (state) => state.booking.tagIds;
-const selectAgentAdressId = (state) => state.booking.agentAdressId;
-const selectProductAttributes = (state) => state.booking.productAttributes;
-const selectBookingAttributes = (state) => state.booking.bookingAttributes;
-const selectBookingNumber = (state) => state.booking.bookingNumber;
-const selectIsOption = (state) => state.booking.isOption;
-const selectBookingRooms = (state) => state.booking.bookingAttributes?.rooms;
-const selectBookingRemarks = (state) => state.booking.remarks;
-const selectVoucherCodes = (state) => state.booking.voucherCodes;
-const selectCalculateDeposit = (state) => state.booking.calculateDeposit;
-const selectShowCommission = (state) => state.booking.showCommission;
-const selectIsRetry = (state) => state.booking.isRetry;
-const selectStartDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
-const selectEndDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.toDate;
-const selectAgents = (state) => state.booking.agents;
-const selectCountries = (state) => state.booking.countries;
-const selectProductCode = (state) => state.booking.productAttributes?.productCode;
-const selectAccommodationCodes = (state) => {
-    const accommodationCodes = [];
-    state.booking.package?.options.forEach((o) => {
-        o.rooms.forEach((r) => r.options.forEach((ro) => {
-            if (!accommodationCodes.some((y) => y === ro.accommodationCode)) {
-                accommodationCodes.push(ro.accommodationCode);
-            }
-        }));
-    });
-    return accommodationCodes;
+const hasVisibleError = (formik, key) => get(formik.errors, key) && get(formik.touched, key);
+
+const GenderControl = ({ translations, value, formik, 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)))));
 };
-const selectAccommodationViews = (state) => state.booking.accommodationViews;
-const selectMappingInfo = (state) => state.booking.package?.options.find((x) => x.isSelected)?.mappingInfo;
-const selectBookingQuery = (state) => {
-    const bookingAttributes = state.booking.bookingAttributes;
-    if (!bookingAttributes) {
-        return undefined;
-    }
-    const params = {};
-    Object.entries(bookingAttributes).forEach(([key, value]) => {
-        if (key === 'startDate' || key === 'endDate') {
-            value = format$2(parseISO(value), 'yyyy-MM-dd');
-        }
-        if (key === 'rooms') {
-            value = JsonURL.stringify(value.map((room) => omit(room, ['children'])), {
-                AQF: true
-            });
-        }
-        if (key === 'allotmentIds' && !value.length) {
-            value = undefined;
-        }
-        if (key === 'flight' && value) {
-            var flightInfo = value;
-            value = JsonURL.stringify(flightInfo, { AQF: true });
+
+const TypeAheadInput = ({ name, value, placeholder, options, onChange, onSelect, onClear }) => {
+    const [showItems, setShowItems] = useState(false);
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e.target.value);
         }
-        if (value) {
-            params[key] = value;
+    };
+    const handleClearClick = (e) => {
+        if (onClear) {
+            onClear();
         }
-    });
-    return params;
+        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: (e) => {
+                    if (e.key === 'Tab' && options && onSelect) {
+                        onSelect(options[0].key);
+                        setShowItems(false);
+                    }
+                }, onFocus: () => 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 ?? []).map((option) => {
+            const matchIndex = typeof value !== 'undefined' ? option.text.indexOf(value) : 0;
+            const prefix = option.text.slice(0, matchIndex);
+            const highlight = option.text.slice(matchIndex, value?.length ?? 0);
+            const 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: () => {
+                            if (onSelect)
+                                onSelect(option.key);
+                            setShowItems(false);
+                        }, type: "button", className: "button button--plain" },
+                        prefix,
+                        React__default.createElement("span", { className: "typeahead__option-highlight" }, highlight),
+                        suffix))));
+        })))));
 };
-const selectBookingQueryString = createSelector(selectBookingQuery, (params) => {
-    if (!params) {
-        return undefined;
-    }
-    return Object.keys(params)
-        .filter((key) => typeof params[key] !== 'undefined')
-        .map((key) => `${key}=${params[key]}`)
-        .join('&');
-});
-createSelector(selectTravelersFormValues, (formValues) => formValues?.mainBookerId);
-const selectBookingPackagePax = createSelector(selectTravelersFormValues, (formValues) => {
-    var pax = [];
-    formValues?.rooms.forEach((r) => r.adults.forEach((x) => {
-        const adultPax = buildPax(x, formValues?.mainBookerId);
-        if (adultPax.isMainBooker) {
-            adultPax.mobilePhone = formValues?.phone;
-            adultPax.email = formValues?.email;
+
+// A traveler is a baby when the age they were booked with is at or below the baby
+// boundary. Babies get their own label and birth date validation (TIDE-3269). Only
+// meaningful for the regular form: the compact form asks for an age instead of a birth
+// date, so it has nothing to validate and its own age input already states the age.
+function isBabyAge(age, maxBabyAge = BABY_MAX_AGE) {
+    return typeof age === 'number' && age <= maxBabyAge;
+}
+// The native date input can hold values format() throws on (e.g. a 5+ digit year while typing), so never format an unvalidated birthDate
+function formatBirthDate$1(birthDate) {
+    if (!birthDate)
+        return '';
+    const parsed = parse(birthDate, 'yyyy-MM-dd', new Date());
+    return isValid(parsed) ? format$2(parsed, 'dd-MM-yyyy') : '';
+}
+// A field can have separate "main-booker"/other-pax variants sharing the same identity
+// (customFieldConfigurationId for custom fields, fieldName for built-in fields).
+const MAIN_BOOKER_GROUP = 'main-booker';
+const isCustomPaxField = (field) => field.customFieldConfigurationId != null;
+function resolveApplicablePaxFields(fields, isMainBooker) {
+    const variantsByKey = new Map();
+    fields.forEach((field) => {
+        const key = field.customFieldConfigurationId ?? field.fieldName;
+        const variants = variantsByKey.get(key) ?? [];
+        variants.push(field);
+        variantsByKey.set(key, variants);
+    });
+    const applicableFields = [];
+    variantsByKey.forEach((variants) => {
+        const hasRoleSplit = variants.some((v) => v.group === MAIN_BOOKER_GROUP);
+        if (!hasRoleSplit) {
+            applicableFields.push(variants[0]);
+            return;
         }
-        pax.push(adultPax);
-    }));
-    formValues?.rooms.forEach((r) => r.children.forEach((x) => {
-        pax.push(buildPax(x));
-    }));
-    return pax;
-});
-const selectBookingAddress = createSelector(selectTravelersFormValues, selectBookingPackagePax, selectBookingType, (formValues, pax, bookingType) => {
-    const mainBooker = pax.find((x) => x.isMainBooker);
-    if (!mainBooker || bookingType == 'b2b')
-        return undefined;
+        const roleMatch = variants.find((v) => (v.group === MAIN_BOOKER_GROUP) === isMainBooker);
+        if (roleMatch)
+            applicableFields.push(roleMatch);
+    });
+    return applicableFields;
+}
+function buildEmptyCustomFields(paxFields = []) {
+    const uniqueIds = Array.from(new Set(paxFields.filter(isCustomPaxField).map((field) => field.customFieldConfigurationId)));
+    return uniqueIds.map((customFieldConfigurationId) => ({ customFieldConfigurationId, value: '' }));
+}
+function getApplicablePaxCustomFields(paxFields = [], isMainBooker) {
+    return resolveApplicablePaxFields(paxFields.filter(isCustomPaxField), isMainBooker);
+}
+function getApplicableBuiltInPaxFields(paxFields = [], isMainBooker) {
+    return resolveApplicablePaxFields(paxFields.filter((f) => !isCustomPaxField(f)), isMainBooker);
+}
+function getBuiltInPaxField(paxFields = [], fieldName, isMainBooker) {
+    return getApplicableBuiltInPaxFields(paxFields, isMainBooker).find((f) => f.fieldName === fieldName);
+}
+// fieldName -> path on `Traveler`, shared with validate-form.ts.
+const BUILT_IN_FIELD_PATHS = {
+    gender: 'gender',
+    firstName: 'firstName',
+    lastName: 'lastName',
+    dateOfBirth: 'birthDate',
+    nickname: 'nickname',
+    birthplace: 'birthplace',
+    nationality: 'nationality',
+    preferredLanguageId: 'preferredLanguageId',
+    email: 'email',
+    phone: 'phone',
+    mobile: 'mobile',
+    passportIssueDate: 'passportIssueDate',
+    passportIssuedLocation: 'passportIssuedLocation',
+    passportExpiryDate: 'passportExpiryDate',
+    passportNumber: 'passportNumber',
+    emergencyNumber: 'emergencyNumber',
+    hasInsurance: 'hasInsurance',
+    insuranceName: 'insuranceName',
+    info: 'info',
+    street: 'address.street',
+    location: 'address.location',
+    countryId: 'address.country',
+    postalCode: 'address.postalCode',
+    number: 'address.number'
+};
+// The 4 fields that always render/validate regardless of paxFields config (fallback behavior).
+const CORE_FIELD_NAMES = new Set(['gender', 'firstName', 'lastName', 'dateOfBirth']);
+const ADDRESS_FIELD_NAMES = ['street', 'location', 'countryId', 'postalCode', 'number'];
+// Shared by buildPax (new-booking) and applyTravelersFormValuesToEditablePackagingEntry
+// (edit-booking), now that PackagingEntryPax and BookingPackagePax have the same shape.
+function applyTravelerToPax(pax, traveler, mainBookerId) {
     return {
-        name: `${mainBooker.firstName} ${mainBooker.lastName}`,
-        street: formValues?.street,
-        number: formValues?.houseNumber,
-        box: formValues?.box,
-        postalCode: formValues?.zipCode,
-        location: formValues?.place,
-        country: formValues?.country,
-        mobilePhone: formValues?.phone,
-        email: formValues?.email
+        ...pax,
+        firstName: traveler.firstName ?? '',
+        lastName: traveler.lastName ?? '',
+        dateOfBirth: traveler.birthDate || null,
+        isMainBooker: mainBookerId != null ? traveler.id === mainBookerId : pax.isMainBooker,
+        weight: traveler.weight ?? null,
+        weightType: traveler.weightType ?? build.WeightType.kilograms,
+        height: traveler.height ?? null,
+        heightType: traveler.heightType ?? build.HeightType.centimeters,
+        nickname: traveler.nickname,
+        birthplace: traveler.birthplace,
+        nationality: traveler.nationality,
+        preferredLanguageId: traveler.preferredLanguageId,
+        email: traveler.email,
+        phone: traveler.phone,
+        mobilePhone: traveler.mobile,
+        emergencyNumber: traveler.emergencyNumber,
+        passportNumber: traveler.passportNumber,
+        passportIssueDate: traveler.passportIssueDate,
+        passportIssuedLocation: traveler.passportIssuedLocation,
+        passportExpiryDate: traveler.passportExpiryDate,
+        hasInsurance: traveler.hasInsurance,
+        insuranceName: traveler.insuranceName,
+        info: traveler.info,
+        address: buildTravelerAddress(traveler),
+        customFields: traveler.customFields ?? []
     };
-});
-const selectBookingPackageRequest = createSelector(selectOfficeId, selectAgentId, selectAgentAdressId, (officeId, agentId, agentAdressId) => {
-    const agencyId = (agentId ?? agentAdressId ?? 0) > 0 ? agentId ?? agentAdressId : null;
+}
+// name/email are required on the wire but aren't part of the per-traveler address sub-form -
+// derive them from the traveler's own name/email instead of asking twice.
+function buildTravelerAddress(traveler) {
+    if (!traveler.address || !Object.values(traveler.address).some((v) => !!v))
+        return undefined;
     return {
-        officeId: officeId,
-        agentId: agencyId,
-        payload: null
+        name: `${traveler.firstName} ${traveler.lastName}`.trim(),
+        street: traveler.address.street ?? '',
+        number: traveler.address.number ?? '',
+        postalCode: traveler.address.postalCode ?? '',
+        location: traveler.address.location ?? '',
+        country: traveler.address.country ?? '',
+        email: traveler.email ?? ''
     };
-});
-const selectBookingPackageBookRequest = createSelector(selectBookingPackageRequest, selectBookingOptions, selectBookingType, selectBookingPackagePax, selectBookingAddress, selectPackageDetails, selectCalculateDeposit, selectShowCommission, selectAgentId, selectGeneratePaymentUrl, selectSkipPaymentWithAgent, selectNotifications, selectTagIds, selectBookingRemarks, selectVoucherCodes, (bookingPackageRequest, bookingOptions, bookingType, pax, address, packageDetails, calculateDeposit, showCommission, agentId, generatePaymentUrl, skipPaymentWithAgent, notifications, tagIds, remarks, voucherCodes) => {
+}
+// Always initialized (even when not shown) to keep Formik inputs controlled, matching weight/height.
+const EMPTY_BUILT_IN_FIELDS = {
+    nickname: '',
+    birthplace: '',
+    nationality: '',
+    preferredLanguageId: undefined,
+    email: '',
+    phone: '',
+    mobile: '',
+    passportNumber: '',
+    passportIssueDate: '',
+    passportIssuedLocation: '',
+    passportExpiryDate: '',
+    emergencyNumber: '',
+    hasInsurance: false,
+    insuranceName: '',
+    info: '',
+    address: { street: '', number: '', postalCode: '', location: '', country: '' }
+};
+function createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxFields) {
+    if (isCompact) {
+        return {
+            id: traveler.id,
+            firstName: personTranslation,
+            lastName: `${followNumber.number++}`,
+            birthDate: '',
+            gender: '',
+            // Keep a booked age of 0 instead of submitting and pricing the traveler as a 30 year
+            // old, while still falling back for a missing or unusable age. `??` alone would let a
+            // NaN (unparseable date of birth upstream) reach the age input and the booked pax.
+            // See TIDE-3269.
+            age: Number.isFinite(traveler.age) ? traveler.age : 30,
+            // No isBaby here on purpose: the age below is editable and nothing revalidates it
+            // in compact mode, so a stored flag would end up contradicting the entered age.
+            weight: null,
+            weightType: build.WeightType.kilograms,
+            height: null,
+            heightType: build.HeightType.centimeters,
+            ...EMPTY_BUILT_IN_FIELDS,
+            customFields: buildEmptyCustomFields(paxFields)
+        };
+    }
+    return {
+        id: traveler.id,
+        firstName: '',
+        lastName: '',
+        birthDate: '',
+        gender: '',
+        isBaby: isBabyAge(traveler.age, maxBabyAge),
+        weight: null,
+        weightType: build.WeightType.kilograms,
+        height: null,
+        heightType: build.HeightType.centimeters,
+        ...EMPTY_BUILT_IN_FIELDS,
+        customFields: buildEmptyCustomFields(paxFields)
+    };
+}
+function createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, personTranslation, isCompact, maxBabyAge, paxFields) {
+    const followNumber = { number: 1 };
+    const initialValues = {
+        startDate,
+        endDate,
+        rooms: formRooms.map((room) => ({
+            adults: room.adults.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxFields)),
+            children: room.children.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxFields))
+        })),
+        mainBookerId: -1,
+        street: '',
+        houseNumber: '',
+        box: '',
+        zipCode: '',
+        place: '',
+        country: '',
+        phone: '',
+        email: '',
+        emailConfirmation: '',
+        travelAgentId: agentAdressId ?? 0,
+        travelAgentName: ''
+    };
+    if (initialValues.rooms?.[0]?.adults?.[0]) {
+        initialValues.mainBookerId = initialValues.rooms[0].adults[0].id;
+    }
+    return initialValues;
+}
+function mapPackagingEntryPaxToTraveler(roomTraveler) {
+    return {
+        weight: roomTraveler.weight ?? null,
+        weightType: roomTraveler.weightType ?? build.WeightType.kilograms,
+        height: roomTraveler.height ?? null,
+        heightType: roomTraveler.heightType ?? build.HeightType.centimeters,
+        nickname: roomTraveler.nickname ?? '',
+        birthplace: roomTraveler.birthplace ?? '',
+        nationality: roomTraveler.nationality ?? '',
+        preferredLanguageId: roomTraveler.preferredLanguageId,
+        email: roomTraveler.email ?? '',
+        phone: roomTraveler.phone ?? '',
+        mobile: roomTraveler.mobilePhone ?? '',
+        passportNumber: roomTraveler.passportNumber ?? '',
+        passportIssueDate: roomTraveler.passportIssueDate ?? '',
+        passportIssuedLocation: roomTraveler.passportIssuedLocation ?? '',
+        passportExpiryDate: roomTraveler.passportExpiryDate ?? '',
+        emergencyNumber: roomTraveler.emergencyNumber ?? '',
+        hasInsurance: roomTraveler.hasInsurance ?? false,
+        insuranceName: roomTraveler.insuranceName ?? '',
+        info: roomTraveler.info ?? '',
+        address: roomTraveler.address
+            ? {
+                street: roomTraveler.address.street ?? '',
+                number: roomTraveler.address.number ?? '',
+                postalCode: roomTraveler.address.postalCode ?? '',
+                location: roomTraveler.address.location ?? '',
+                country: roomTraveler.address.country ?? ''
+            }
+            : undefined,
+        customFields: roomTraveler.customFields ?? []
+    };
+}
+function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, agentAdressId) {
+    const pax = editablePackagingEntry?.pax ?? [];
+    const rooms = editablePackagingEntry.rooms.map((room) => {
+        const roomPax = pax.filter((x) => room.paxIds.includes(x.id));
+        const adults = roomPax.filter((x) => x.age >= 18);
+        const children = roomPax.filter((x) => x.age < 18);
+        return {
+            adults: adults.map((roomTraveler) => {
+                return {
+                    id: roomTraveler.id,
+                    firstName: roomTraveler.firstName ?? '',
+                    lastName: roomTraveler.lastName ?? '',
+                    birthDate: roomTraveler.dateOfBirth ? format$2(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
+                    gender: '',
+                    ...mapPackagingEntryPaxToTraveler(roomTraveler)
+                };
+            }),
+            children: children.map((roomTraveler) => {
+                return {
+                    id: roomTraveler.id,
+                    firstName: roomTraveler.firstName ?? '',
+                    lastName: roomTraveler.lastName ?? '',
+                    birthDate: roomTraveler.dateOfBirth ? format$2(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
+                    gender: '',
+                    isBaby: isBabyAge(roomTraveler.age),
+                    ...mapPackagingEntryPaxToTraveler(roomTraveler)
+                };
+            })
+        };
+    });
+    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), first(editablePackagingEntry?.lines)?.from, last(editablePackagingEntry?.lines)?.to, agentAdressId);
+    values.rooms = rooms;
+    values.mainBookerId = pax.find((x) => x.isMainBooker)?.id ?? rooms[0]?.adults?.[0]?.id ?? -1;
+    const address = editablePackagingEntry?.address;
+    values.street = address?.street ?? '';
+    values.houseNumber = address?.houseNumber ?? '';
+    values.box = address?.box ?? '';
+    values.zipCode = address?.zipCode ?? '';
+    values.place = address?.place ?? '';
+    values.country = address?.country ?? '';
+    values.phone = address?.phone ?? '';
+    values.email = address?.email ?? '';
+    values.emailConfirmation = address?.email ?? '';
+    values.travelAgentId = address?.travelAgentId ?? agentAdressId ?? 0;
+    return values;
+}
+function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values) {
+    const travelers = values.rooms.flatMap((room) => [...room.adults, ...room.children]);
+    // The backend treats the main booker's per-pax address as authoritative, so keep the
+    // booking-level address in sync with it rather than sending two independent values.
+    const mainBookerAddress = travelers.find((x) => x.id === values.mainBookerId)?.address;
+    return {
+        ...editablePackagingEntry,
+        pax: (editablePackagingEntry.pax ?? []).map((pax) => {
+            const traveler = travelers.find((x) => x.id === pax.id);
+            return traveler ? applyTravelerToPax(pax, traveler, values.mainBookerId) : pax;
+        }),
+        address: {
+            ...editablePackagingEntry.address,
+            street: mainBookerAddress?.street || values.street,
+            houseNumber: mainBookerAddress?.number || values.houseNumber,
+            box: values.box,
+            zipCode: mainBookerAddress?.postalCode || values.zipCode,
+            place: mainBookerAddress?.location || values.place,
+            country: mainBookerAddress?.country || values.country,
+            travelAgentId: values.travelAgentId,
+            phone: values.phone,
+            email: values.email
+        }
+    };
+}
+const SharedTravelersForm = ({ formik, translations, travellersSettings, countries, agents, bookingType, agentAdressId, travelersFirstStep = false, isUnavailable = false, useCompactForm = false, showAllCountries = false, paxFields, showAgentSelection = false, initialShowAgents = false, renderPreviousButton, onBookingTypeChange }) => {
+    const [showAgents, setShowAgents] = useState(initialShowAgents);
+    const typeaheadAgents = useMemo(() => sortBy(agents?.map((agent) => ({
+        key: `${agent.id}`,
+        value: `${agent.name}${agent.postalCode || agent.location ? ` (${compact([agent.postalCode, agent.location]).join(' ')})` : ''}`,
+        text: `${agent.name}${agent.postalCode || agent.location ? ` (${compact([agent.postalCode, agent.location]).join(' ')})` : ''}`
+    })), 'value') ?? [], [agents]);
+    const [filteredAgents, setFilteredAgents] = useState(typeaheadAgents);
+    const flatErrors = flat(formik.errors);
+    const errorKeys = Object.keys(flatErrors).filter((key) => get(formik.touched, key));
+    const hasVisibleError = (key) => get(formik.errors, key) && get(formik.touched, key);
+    const mainBooker = formik.values.rooms
+        .find((room) => room.adults.find((traveler) => traveler.id === formik.values.mainBookerId))
+        ?.adults.find((traveler) => traveler.id === formik.values.mainBookerId);
+    const countryOptions = [
+        { key: 'empty', value: undefined, label: translations.TRAVELERS_FORM.SELECT_COUNTRY },
+        ...(showAllCountries
+            ? countries?.map((country) => ({ key: country.iso2, value: country.iso2, label: country.name })) ?? []
+            : travellersSettings?.countries?.map((country) => ({ key: country.iso2, value: country.iso2, label: country.name })) ?? [
+                { 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 }
+            ])
+    ];
+    const handleMainBookerChange = (event) => {
+        formik.setFieldValue('mainBookerId', parseInt(event.currentTarget.value, 10));
+    };
+    const handleAgentChange = (value) => {
+        setFilteredAgents(typeaheadAgents.filter((x) => x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1));
+        formik.setFieldValue('travelAgentName', value);
+    };
+    const handleAgentSelect = (key) => {
+        const agent = typeaheadAgents.find((x) => x.key === key);
+        formik.setValues({
+            ...formik.values,
+            travelAgentId: Number(agent?.key),
+            travelAgentName: agent?.value ?? ''
+        });
+        onBookingTypeChange?.(agentAdressId && agentAdressId !== 0 ? 'b2b' : 'b2b2c');
+    };
+    const handleAgentClear = () => {
+        formik.setValues({ ...formik.values, travelAgentId: 0, travelAgentName: '' });
+        onBookingTypeChange?.('b2c');
+    };
+    const toggleAgent = (value) => {
+        setShowAgents(value);
+        if (!value) {
+            handleAgentClear();
+            setFilteredAgents([]);
+        }
+    };
+    const handleAddTraveler = (roomIndex) => {
+        const rooms = [...formik.values.rooms];
+        const newAdult = {
+            id: Date.now(),
+            firstName: '',
+            lastName: '',
+            birthDate: '',
+            gender: '',
+            weight: null,
+            weightType: build.WeightType.kilograms,
+            height: null,
+            heightType: build.HeightType.centimeters,
+            ...EMPTY_BUILT_IN_FIELDS,
+            customFields: buildEmptyCustomFields(paxFields)
+        };
+        rooms[roomIndex] = { ...rooms[roomIndex], adults: [...rooms[roomIndex].adults, newAdult] };
+        formik.setFieldValue('rooms', rooms);
+    };
+    const handleRemoveTraveler = (roomIndex, travelerIndex) => {
+        const rooms = [...formik.values.rooms];
+        const adults = [...rooms[roomIndex].adults];
+        if (adults.length <= 1)
+            return;
+        adults.splice(travelerIndex, 1);
+        rooms[roomIndex] = { ...rooms[roomIndex], adults };
+        formik.setFieldValue('rooms', rooms);
+    };
+    const handleAddRoom = () => {
+        const rooms = [...formik.values.rooms];
+        rooms.push({
+            adults: [
+                {
+                    id: Date.now(),
+                    firstName: '',
+                    lastName: '',
+                    birthDate: '',
+                    gender: '',
+                    weight: null,
+                    weightType: build.WeightType.kilograms,
+                    height: null,
+                    heightType: build.HeightType.centimeters,
+                    ...EMPTY_BUILT_IN_FIELDS,
+                    customFields: buildEmptyCustomFields(paxFields)
+                }
+            ],
+            children: []
+        });
+        formik.setFieldValue('rooms', rooms);
+    };
+    const handleRemoveRoom = (roomIndex) => {
+        const rooms = [...formik.values.rooms];
+        rooms.splice(roomIndex, 1);
+        formik.setFieldValue('rooms', rooms);
+    };
+    const renderWeightControl = (namePrefix, value, isRequired) => (React__default.createElement("div", { className: "form__row" },
+        React__default.createElement(LabeledInput, { type: "number", min: 0, hasError: hasVisibleError(`${namePrefix}.weight`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.WEIGHT, required: isRequired, name: `${namePrefix}.weight`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.weight ?? '' }),
+        React__default.createElement(LabeledSelect, { extraClassName: "form__group--md-33", name: `${namePrefix}.weightType`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.weightType, options: [
+                { key: 'kg', value: build.WeightType.kilograms, label: translations.TRAVELERS_FORM.WEIGHT_UNIT_KG },
+                { key: 'lb', value: build.WeightType.pounds, label: translations.TRAVELERS_FORM.WEIGHT_UNIT_LB }
+            ] })));
+    const renderHeightControl = (namePrefix, value, isRequired) => (React__default.createElement("div", { className: "form__row" },
+        React__default.createElement(LabeledInput, { type: "number", min: 0, hasError: hasVisibleError(`${namePrefix}.height`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.HEIGHT, required: isRequired, name: `${namePrefix}.height`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.height ?? '' }),
+        React__default.createElement(LabeledSelect, { extraClassName: "form__group--md-33", name: `${namePrefix}.heightType`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.heightType, options: [
+                { key: 'cm', value: build.HeightType.centimeters, label: translations.TRAVELERS_FORM.HEIGHT_UNIT_CM },
+                { key: 'ftIn', value: build.HeightType.feetInches, label: translations.TRAVELERS_FORM.HEIGHT_UNIT_FT_IN }
+            ] })));
+    const getCustomFieldControl = (field, value, name) => {
+        const label = compact([field.fieldName, field.isRequired && '*']).join(' ');
+        switch (field.dataType) {
+            case build.CustomFieldDataType.bool:
+                return (React__default.createElement("div", { className: buildClassName(['form__group', hasVisibleError(name) && 'form__group--error']) },
+                    React__default.createElement("div", { className: "checkbox" },
+                        React__default.createElement("label", { className: "checkbox__label" },
+                            React__default.createElement("input", { type: "checkbox", className: "checkbox__input", checked: value === 'true', onChange: (e) => formik.setFieldValue(name, e.target.checked ? 'true' : 'false'), onBlur: formik.handleBlur, name: name }),
+                            label))));
+            case build.CustomFieldDataType.date:
+                return (React__default.createElement(LabeledInput, { type: "date", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
+            case build.CustomFieldDataType.time:
+                return (React__default.createElement(LabeledInput, { type: "time", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
+            case build.CustomFieldDataType.numeric:
+                return (React__default.createElement(LabeledInput, { type: "number", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
+            case build.CustomFieldDataType.string:
+            default:
+                return (React__default.createElement(LabeledInput, { hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
+        }
+    };
+    const renderCustomFields = (travelerValues, namePrefix) => {
+        if (!paxFields?.length)
+            return null;
+        const isMainBooker = travelerValues.id === formik.values.mainBookerId;
+        const applicableFields = getApplicablePaxCustomFields(paxFields, isMainBooker);
+        if (!applicableFields.length)
+            return null;
+        return (React__default.createElement("div", { className: "travelers-form__custom-fields-grid" }, applicableFields.map((field) => {
+            const fieldIndex = travelerValues.customFields?.findIndex((c) => c.customFieldConfigurationId === field.customFieldConfigurationId) ?? -1;
+            if (fieldIndex < 0)
+                return null;
+            const name = `${namePrefix}.customFields[${fieldIndex}].value`;
+            const value = travelerValues.customFields[fieldIndex].value;
+            return (React__default.createElement("div", { key: field.customFieldConfigurationId, style: { gridColumn: `span ${field.col || 12}` } }, getCustomFieldControl(field, value, name)));
+        })));
+    };
+    // Fields with a dedicated control (gender, hasInsurance, countryId) aren't listed here.
+    const BUILT_IN_FIELD_CONTROL_META = {
+        firstName: { label: translations.TRAVELERS_FORM.FIRST_NAME },
+        lastName: { label: translations.TRAVELERS_FORM.LAST_NAME },
+        dateOfBirth: { type: 'date', label: translations.TRAVELERS_FORM.BIRTHDATE },
+        nickname: { label: translations.TRAVELERS_FORM.NICKNAME },
+        birthplace: { label: translations.TRAVELERS_FORM.BIRTHPLACE },
+        nationality: { label: translations.TRAVELERS_FORM.NATIONALITY },
+        preferredLanguageId: { type: 'number', label: translations.TRAVELERS_FORM.PREFERRED_LANGUAGE },
+        email: { type: 'email', label: translations.TRAVELERS_FORM.TRAVELER_EMAIL },
+        phone: { label: translations.TRAVELERS_FORM.TRAVELER_PHONE },
+        mobile: { label: translations.TRAVELERS_FORM.TRAVELER_MOBILE },
+        passportNumber: { label: translations.TRAVELERS_FORM.PASSPORT_NUMBER },
+        passportIssueDate: { type: 'date', label: translations.TRAVELERS_FORM.PASSPORT_ISSUE_DATE },
+        passportIssuedLocation: { label: translations.TRAVELERS_FORM.PASSPORT_ISSUED_LOCATION },
+        passportExpiryDate: { type: 'date', label: translations.TRAVELERS_FORM.PASSPORT_EXPIRY_DATE },
+        emergencyNumber: { label: translations.TRAVELERS_FORM.EMERGENCY_NUMBER },
+        insuranceName: { label: translations.TRAVELERS_FORM.INSURANCE_NAME },
+        info: { label: translations.TRAVELERS_FORM.INFO },
+        street: { label: translations.TRAVELERS_FORM.STREET },
+        location: { label: translations.TRAVELERS_FORM.CITY },
+        postalCode: { label: translations.TRAVELERS_FORM.ZIPCODE },
+        number: { label: translations.TRAVELERS_FORM.HOUSE_NUMBER }
+    };
+    const renderBuiltInFieldControl = (fieldName, isRequired, travelerValues, namePrefix) => {
+        const path = BUILT_IN_FIELD_PATHS[fieldName] ?? fieldName;
+        const name = `${namePrefix}.${path}`;
+        const value = get(travelerValues, path);
+        switch (fieldName) {
+            case 'gender':
+                return React__default.createElement(GenderControl, { translations: translations, value: travelerValues, formik: formik, name: name });
+            case 'hasInsurance':
+                return (React__default.createElement("div", { className: buildClassName(['form__group', hasVisibleError(name) && 'form__group--error']) },
+                    React__default.createElement("div", { className: "checkbox" },
+                        React__default.createElement("label", { className: "checkbox__label" },
+                            React__default.createElement("input", { type: "checkbox", className: "checkbox__input", checked: !!value, onChange: (e) => formik.setFieldValue(name, e.target.checked), onBlur: formik.handleBlur, name: name }),
+                            compact([translations.TRAVELERS_FORM.HAS_INSURANCE, isRequired && '*']).join(' ')))));
+            case 'countryId':
+                return (React__default.createElement(LabeledSelect, { hasError: hasVisibleError(name), label: translations.TRAVELERS_FORM.COUNTRY, required: isRequired, name: name, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value, options: countryOptions }));
+            case 'weight':
+                return renderWeightControl(namePrefix, travelerValues, isRequired);
+            case 'height':
+                return renderHeightControl(namePrefix, travelerValues, isRequired);
+            default: {
+                const meta = BUILT_IN_FIELD_CONTROL_META[fieldName] ?? { label: fieldName };
+                return (React__default.createElement(LabeledInput, { type: meta.type, hasError: hasVisibleError(name), label: meta.label, required: isRequired, name: name, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value ?? '' }));
+            }
+        }
+    };
+    const CORE_FIELD_DEFAULTS = {
+        gender: { isRequired: true, col: 4 },
+        firstName: { isRequired: true, col: 4 },
+        lastName: { isRequired: true, col: 4 },
+        dateOfBirth: { isRequired: true, col: 4 }
+    };
+    const resolveBuiltInField = (fieldName, travelerValues) => {
+        const isMainBooker = travelerValues.id === formik.values.mainBookerId;
+        const configured = getBuiltInPaxField(paxFields, fieldName, isMainBooker);
+        const fallback = CORE_FIELD_DEFAULTS[fieldName];
+        if (!configured && !fallback)
+            return undefined;
+        return { isRequired: configured?.isRequired ?? fallback.isRequired, col: configured?.col ?? fallback.col };
+    };
+    const renderBuiltInField = (fieldName, travelerValues, namePrefix) => {
+        const resolved = resolveBuiltInField(fieldName, travelerValues);
+        if (!resolved)
+            return null;
+        return (React__default.createElement("div", { key: fieldName, style: { gridColumn: `span ${resolved.col || 12}` } }, renderBuiltInFieldControl(fieldName, resolved.isRequired, travelerValues, namePrefix)));
+    };
+    const renderTravelerAddressFields = (travelerValues, namePrefix) => {
+        const fields = ADDRESS_FIELD_NAMES.map((fieldName) => renderBuiltInField(fieldName, travelerValues, namePrefix)).filter(Boolean);
+        if (!fields.length)
+            return null;
+        return React__default.createElement("div", { className: "travelers-form__custom-fields-grid" }, fields);
+    };
+    const getControl = (type, value, name) => {
+        switch (type) {
+            case 'country':
+                return (React__default.createElement(LabeledSelect, { hasError: hasVisibleError('country'), label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: countryOptions }));
+            case 'phone':
+                return (React__default.createElement(PhoneInput, { countries: travellersSettings?.countries ?? [], countryIso2: formik.values.country, hasError: hasVisibleError('phone'), label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }));
+            case 'email':
+                return (React__default.createElement(React__default.Fragment, null,
+                    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 })));
+            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;
+        }
+    };
+    const renderRoomLabel = (room) => compact([
+        room.adults.length,
+        room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
+        room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
+        room.adults?.length && room.children?.length && ', ',
+        room.children.length,
+        room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
+        room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
+    ]).join('');
+    const renderTravelerFields = (travelerValues, namePrefix, isAdult, roomIndex, travelerIndex) => {
+        if (useCompactForm) {
+            return (React__default.createElement("div", { className: "form__row" },
+                React__default.createElement(LabeledInput, { hasError: hasVisibleError(`${namePrefix}.age`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.AGE, required: true, name: `${namePrefix}.age`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.age })));
+        }
+        // 'birthDate' (the legacy formFields type string) is normalized to the paxFields catalog's
+        // 'dateOfBirth' fieldName for config lookups.
+        const baseFieldNames = (travellersSettings?.formFields?.length ? travellersSettings.formFields.map((field) => field.type) : ['gender', 'firstName', 'lastName', 'dateOfBirth']).map((fieldName) => (fieldName === 'birthDate' ? 'dateOfBirth' : fieldName));
+        const isMainBooker = travelerValues.id === formik.values.mainBookerId;
+        const extraFieldNames = getApplicableBuiltInPaxFields(paxFields, isMainBooker)
+            .map((field) => field.fieldName)
+            .filter((fieldName) => !baseFieldNames.includes(fieldName) && !ADDRESS_FIELD_NAMES.includes(fieldName));
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "travelers-form__custom-fields-grid" }, [...baseFieldNames, ...extraFieldNames].map((fieldName) => renderBuiltInField(fieldName, travelerValues, namePrefix))),
+            renderTravelerAddressFields(travelerValues, namePrefix),
+            renderCustomFields(travelerValues, namePrefix),
+            travelersFirstStep && isAdult && formik.values.rooms[roomIndex].adults.length > 1 && (React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleRemoveTraveler(roomIndex, travelerIndex) }, translations.TRAVELERS_FORM.REMOVE_TRAVELER))));
+    };
+    return (React__default.createElement("form", { className: "form form__travelers", name: "booking--travellers", id: "booking--travellers", noValidate: true, onSubmit: formik.handleSubmit, onReset: formik.handleReset },
+        React__default.createElement("div", { className: "form__travelers__wrapper" },
+            formik.values.rooms.map((room, roomIndex) => (React__default.createElement("div", { 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: () => handleRemoveRoom(roomIndex) }, "Verwijder reisgezelschap")))),
+                room.adults.map((travelerValues, index) => (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))),
+                    renderTravelerFields(travelerValues, `rooms[${roomIndex}].adults[${index}]`, true, roomIndex, index)))),
+                room.children.map((travelerValues, index) => (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" }, travelerValues.isBaby ? translations.TRAVELERS_FORM.BABY : translations.TRAVELERS_FORM.CHILD)),
+                    renderTravelerFields(travelerValues, `rooms[${roomIndex}].children[${index}]`, false, roomIndex, index)))),
+                !useCompactForm && travelersFirstStep && (React__default.createElement("div", { className: "form__region" },
+                    React__default.createElement("button", { type: "button", className: "cta cta--select", onClick: () => handleAddTraveler(roomIndex) }, translations.TRAVELERS_FORM.ADD_TRAVELER)))))),
+            !useCompactForm && (bookingType !== 'b2b' || travellersSettings?.mainBookerFormFields?.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?.firstName, mainBooker?.lastName]).join(' '), formatBirthDate$1(mainBooker?.birthDate)]).join(', '))),
+                travellersSettings?.mainBookerFormFields?.length ? (React__default.createElement("div", { className: "main-booker-form__grid" }, travellersSettings.mainBookerFormFields.map((field, index) => (React__default.createElement("div", { key: index, className: `control control--${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: countryOptions })))),
+                    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 })))))) : !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("label", { className: "checkbox__label" },
+                            React__default.createElement("input", { type: "checkbox", name: "booking--mainbooker", checked: showAgents, onChange: () => 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 }))))))),
+        !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((key) => (React__default.createElement("li", { key: key }, get(flatErrors, key))))))))),
+        travelersFirstStep && (React__default.createElement("div", { className: "booking__navigator" },
+            React__default.createElement("button", { type: "button", className: "cta cta--select", onClick: handleAddRoom }, translations.TRAVELERS_FORM.ADD_ROOM))),
+        React__default.createElement("div", { className: "booking__navigator" },
+            renderPreviousButton?.(),
+            React__default.createElement("button", { type: "submit", title: translations.STEPS.NEXT, className: 'cta' + (isUnavailable ? ' cta--disabled' : '') }, translations.STEPS.NEXT))));
+};
+
+const fetchPriceDetails$1 = async (apiSettings, request, signal, languageCode) => {
+    const tideClientConfig = buildTideClientConfig(apiSettings);
+    return await build.priceDetails(tideClientConfig, request, signal, languageCode);
+};
+const priceDetailsApi = {
+    fetchPriceDetails: fetchPriceDetails$1
+};
+
+const updatePackageDetails = (packageDetails, changedLines) => {
+    return {
+        ...packageDetails,
+        options: packageDetails.options.map((opt) => {
+            return {
+                ...opt,
+                rooms: opt.isSelected ? updateRooms(opt.rooms, changedLines) : opt.rooms,
+                groups: opt.isSelected ? updateBookingGroups(opt.groups, changedLines) : opt.groups,
+                optionUnits: opt.isSelected ? updateOptionUnits(opt.optionUnits, changedLines) : opt.optionUnits,
+                optionPax: opt.isSelected ? updateOptionPax(opt.optionPax, changedLines) : opt.optionPax
+            };
+        })
+    };
+};
+// ROOMS
+const updateRooms = (rooms, changedLines) => {
+    return rooms.map((room) => ({
+        ...room,
+        options: room.options.map((option) => ({
+            ...option,
+            price: changedLines.find((x) => x.entryLineGuid == option.entryLineGuid)?.price ?? option.price
+        }))
+    }));
+};
+// PAX
+const updateOptionPax = (pax, changedLines) => {
+    return pax.map((p) => ({
+        ...p,
+        groups: updatePaxGroups(p.groups, changedLines)
+    }));
+};
+const updatePaxGroups = (groups, changedLines) => {
+    return groups.map((g) => ({
+        ...g,
+        options: g.options.map((o) => ({
+            ...o,
+            groups: updatePaxGroups(o.groups, changedLines),
+            line: {
+                ...o.line,
+                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+            },
+            alternatives: o.alternatives.map((a) => ({
+                ...a,
+                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+            }))
+        }))
+    }));
+};
+// UNITS
+const updateOptionUnits = (units, changedLines) => {
+    return units.map((u) => ({
+        ...u,
+        groups: updateUnitGroups(u.groups, changedLines)
+    }));
+};
+const updateUnitGroups = (groups, changedLines) => {
+    return groups.map((g) => ({
+        ...g,
+        options: g.options.map((o) => ({
+            ...o,
+            groups: updateUnitGroups(o.groups, changedLines),
+            pax: updateOptionPax(o.pax, changedLines),
+            line: {
+                ...o.line,
+                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+            },
+            alternatives: o.alternatives.map((a) => ({
+                ...a,
+                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+            }))
+        }))
+    }));
+};
+// BOOKING
+const updateBookingGroups = (groups, changedLines) => {
+    return groups.map((g) => ({
+        ...g,
+        options: g.options.map((o) => ({
+            ...o,
+            groups: updateBookingGroups(o.groups, changedLines),
+            units: updateOptionUnits(o.units, changedLines),
+            pax: updateOptionPax(o.pax, changedLines),
+            line: {
+                ...o.line,
+                price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+            },
+            alternatives: o.alternatives.map((a) => ({
+                ...a,
+                price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+            }))
+        }))
+    }));
+};
+
+const fetchPriceDetails = createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
+    const state = getState();
+    const languageCode = selectLanguageCode(state);
+    const request = selectBookingPackageBookRequest(state);
+    if (!request) {
+        throw Error('Product not available.');
+    }
+    dispatch(setFetchingPriceDetails(true));
+    dispatch(resetPriceDetails());
+    const priceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
+    dispatch(setFetchingPriceDetails(false));
+    const packageDetails = selectPackageDetails(state);
+    if (packageDetails) {
+        const updatedPackageDetails = updatePackageDetails(packageDetails, priceDetails.changedLines);
+        dispatch(setPackage(updatedPackageDetails));
+    }
+    return priceDetails;
+});
+const priceDetailsSlice = createSlice({
+    name: 'priceDetails',
+    initialState: {
+        priceDetails: [],
+        notifications: [],
+        isBusy: false
+    },
+    reducers: {
+        setFetchingPriceDetails(state, action) {
+            state.isBusy = action.payload;
+        },
+        setNotifications(state, action) {
+            state.notifications = action.payload;
+        },
+        resetPriceDetails(state, _) {
+            state.priceDetails = [];
+        }
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetchPriceDetails.fulfilled, (state, action) => {
+            if (action.payload) {
+                state.deposit = action.payload.deposit;
+                state.commission = action.payload.commission;
+                state.priceDetails = action.payload.details;
+                state.notifications = action.payload.notifications;
+            }
+        });
+        builder.addCase(fetchPriceDetails.rejected, (state) => {
+            state.isBusy = false;
+        });
+    }
+});
+const { setFetchingPriceDetails } = priceDetailsSlice.actions;
+const { resetPriceDetails, setNotifications } = priceDetailsSlice.actions;
+const selectNotifications = (state) => state.priceDetails.notifications;
+var priceDetailsReducer = priceDetailsSlice.reducer;
+
+const selectHasMounted = (state) => state.booking.hasMounted;
+const selectGeneratePaymentUrl = (state) => state.booking.generatePaymentUrl;
+const selectSkipPaymentWithAgent = (state) => state.booking.skipPaymentWithAgent;
+const selectIsFetchingProductOptions = (state) => state.booking.isBusy;
+const selectDepartureFlight = (state) => state.booking.package?.outwardFlights?.find((x) => x.isSelected);
+const selectReturnFlight = (state) => state.booking.package?.returnFlights?.find((x) => x.isSelected);
+const selectPackageRooms = (state) => state.booking.package?.options.find((x) => x.isSelected)?.rooms;
+const selectIncludedServiceTypes = (state) => selectActiveOption(state)?.includedServiceTypes;
+const selectAvailabilities = (state) => state.booking.package?.options.find((x) => x.isSelected)?.availabilities;
+const selectPackageTags = (state) => state.booking.package?.tags;
+const selectIsOnRequest = (state) => state.booking.package?.options.find((x) => x.isSelected)?.isOnRequest;
+const selectPackageOptionUnits = (state) => state.booking.package?.options.find((x) => x.isSelected)?.optionUnits;
+const selectPackageOptionPax = (state) => state.booking.package?.options.find((x) => x.isSelected)?.optionPax;
+const selectPackageGroups = (state) => state.booking.package?.options.find((x) => x.isSelected)?.groups;
+const selectPackageDetails = (state) => state.booking.package;
+const selectPaxFields = (state) => state.booking.package?.paxFields ?? [];
+const selectPackageFlights = (state) => ({
+    outward: state.booking.package?.outwardFlights,
+    return: state.booking.package?.returnFlights
+});
+const selectFlightMetaData = (state) => state.booking.package?.flightInfo.metaData;
+const selectActiveOption = (state) => state.booking.package?.options.find((x) => x.isSelected);
+const selectPackageAirlineGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, (option, departureFlight, returnFlight) => option?.airlineGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? '')));
+const selectPackageAirportGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, (option, departureFlight, returnFlight) => option?.airportGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? '')));
+const selectRoomOptionDepartureFlightsMetaData = createSelector(selectActiveOption, selectFlightMetaData, (ativeOption, flightMetaData) => {
+    const roomOptions = ativeOption?.rooms.map((r) => r.options.filter((o) => o.isSelected).shift());
+    return roomOptions?.map((ro) => flightMetaData?.find((f) => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter((f) => f !== undefined) ?? [];
+});
+const selectRoomOptionReturnFlightsMetaData = createSelector(selectActiveOption, selectFlightMetaData, (ativeOption, flightMetaData) => {
+    const selectedRoomOptions = ativeOption?.rooms.map((r) => r.options.filter((o) => o.isSelected));
+    // check if there are return flights selected
+    if (selectedRoomOptions?.some((ro) => ro.length > 1)) {
+        const roomOptions = ativeOption?.rooms.map((r) => r.options
+            .filter((o) => o.isSelected)
+            .reverse()
+            .shift());
+        return roomOptions?.map((ro) => flightMetaData?.find((f) => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter((f) => f !== undefined) ?? [];
+    }
+    return undefined;
+});
+const selectApiSettings = (state) => state.apiSettings;
+const selectIsUnavailable = (state) => state.booking.isUnavailable;
+const selectRequestRooms = (state) => state.booking.package?.options.find((x) => x.isSelected)?.requestRooms;
+const selectOfficeId = (state) => state.booking.officeId;
+const selectLanguageCode = (state) => state.booking.languageCode;
+const selectCurrencyCode = (state) => state.booking.package?.currencyCode ?? 'EUR';
+const selectLanguage = (state) => state.booking.languageCode;
+const selectAllDynamicTranslations = (state) => state.booking.translations;
+const selectDynamicTranslations = createSelector([selectAllDynamicTranslations, selectLanguage], (allDynamicTranslations, language) => {
+    return allDynamicTranslations?.find((x) => x.language == language)?.value ?? {};
+});
+// Host override files are hand-maintained, and a null only ever blanks a key the component
+// then reads, so treat it like a missing key (lodash merge already skips undefined).
+const withoutNulls = (value) => isPlainObject$1(value)
+    ? mapValues(pickBy(value, (x) => x !== null), withoutNulls)
+    : value;
+// getTranslations deep-merges the overrides over a clone of the built-in translations, so a
+// host override of a nested group (TRAVELERS_FORM.VALIDATION, TRAVELERS_FORM.COUNTRIES)
+// only replaces the keys it actually contains. Merging per section one level deep dropped
+// every other built-in key of such a group, which made those keys resolve to undefined and
+// crash format() in the consuming component.
+const selectTranslations = createSelector([selectLanguage, selectDynamicTranslations], (language, dynamicTranslations) => getTranslations(language, isEmpty$1(dynamicTranslations) ? undefined : withoutNulls(dynamicTranslations)));
+const selectBookingOptions = (state) => state.booking.bookingOptions;
+const selectBookingType = (state) => state.booking.bookingType;
+const selectTagIds = (state) => state.booking.tagIds;
+const selectAgentAdressId = (state) => state.booking.agentAdressId;
+const selectProductAttributes = (state) => state.booking.productAttributes;
+const selectBookingAttributes = (state) => state.booking.bookingAttributes;
+const selectBookingNumber = (state) => state.booking.bookingNumber;
+const selectIsOption = (state) => state.booking.isOption;
+const selectBookingRooms = (state) => state.booking.bookingAttributes?.rooms;
+const selectBookingRemarks = (state) => state.booking.remarks;
+const selectVoucherCodes = (state) => state.booking.voucherCodes;
+const selectCalculateDeposit = (state) => state.booking.calculateDeposit;
+const selectShowCommission = (state) => state.booking.showCommission;
+const selectIsRetry = (state) => state.booking.isRetry;
+const selectStartDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
+const selectEndDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.toDate;
+const selectAgents = (state) => state.booking.agents;
+const selectCountries = (state) => state.booking.countries;
+const selectProductCode = (state) => state.booking.productAttributes?.productCode;
+const selectAccommodationCodes = (state) => {
+    const accommodationCodes = [];
+    state.booking.package?.options.forEach((o) => {
+        o.rooms.forEach((r) => r.options.forEach((ro) => {
+            if (!accommodationCodes.some((y) => y === ro.accommodationCode)) {
+                accommodationCodes.push(ro.accommodationCode);
+            }
+        }));
+    });
+    return accommodationCodes;
+};
+const selectAccommodationViews = (state) => state.booking.accommodationViews;
+const selectMappingInfo = (state) => state.booking.package?.options.find((x) => x.isSelected)?.mappingInfo;
+const selectBookingQuery = (state) => {
+    const bookingAttributes = state.booking.bookingAttributes;
+    if (!bookingAttributes) {
+        return undefined;
+    }
+    const params = {};
+    Object.entries(bookingAttributes).forEach(([key, value]) => {
+        if (key === 'startDate' || key === 'endDate') {
+            value = format$2(parseISO(value), 'yyyy-MM-dd');
+        }
+        if (key === 'rooms') {
+            value = JsonURL.stringify(value.map((room) => omit(room, ['children'])), {
+                AQF: true
+            });
+        }
+        if (key === 'allotmentIds' && !value.length) {
+            value = undefined;
+        }
+        if (key === 'flight' && value) {
+            var flightInfo = value;
+            value = JsonURL.stringify(flightInfo, { AQF: true });
+        }
+        if (value) {
+            params[key] = value;
+        }
+    });
+    return params;
+};
+const selectBookingQueryString = createSelector(selectBookingQuery, (params) => {
+    if (!params) {
+        return undefined;
+    }
+    return Object.keys(params)
+        .filter((key) => typeof params[key] !== 'undefined')
+        .map((key) => `${key}=${params[key]}`)
+        .join('&');
+});
+createSelector(selectTravelersFormValues, (formValues) => formValues?.mainBookerId);
+const selectBookingPackagePax = createSelector(selectTravelersFormValues, (formValues) => {
+    var pax = [];
+    formValues?.rooms.forEach((r) => r.adults.forEach((x) => {
+        const adultPax = buildPax(x, formValues?.mainBookerId);
+        if (adultPax.isMainBooker) {
+            adultPax.mobilePhone = formValues?.phone;
+            adultPax.email = formValues?.email;
+        }
+        pax.push(adultPax);
+    }));
+    formValues?.rooms.forEach((r) => r.children.forEach((x) => {
+        pax.push(buildPax(x));
+    }));
+    return pax;
+});
+const selectBookingAddress = createSelector(selectTravelersFormValues, selectBookingPackagePax, selectBookingType, (formValues, pax, bookingType) => {
+    const mainBooker = pax.find((x) => x.isMainBooker);
+    if (!mainBooker || bookingType == 'b2b')
+        return undefined;
+    // The backend treats the main booker's per-pax address as authoritative, so keep the
+    // booking-level address in sync with it rather than sending two independent values.
+    const mainBookerAddress = mainBooker.address;
+    return {
+        name: `${mainBooker.firstName} ${mainBooker.lastName}`,
+        street: mainBookerAddress?.street || formValues?.street,
+        number: mainBookerAddress?.number || formValues?.houseNumber,
+        box: formValues?.box,
+        postalCode: mainBookerAddress?.postalCode || formValues?.zipCode,
+        location: mainBookerAddress?.location || formValues?.place,
+        country: mainBookerAddress?.country || formValues?.country,
+        mobilePhone: formValues?.phone,
+        email: formValues?.email
+    };
+});
+const selectBookingPackageRequest = createSelector(selectOfficeId, selectAgentId, selectAgentAdressId, (officeId, agentId, agentAdressId) => {
+    const agencyId = (agentId ?? agentAdressId ?? 0) > 0 ? agentId ?? agentAdressId : null;
+    return {
+        officeId: officeId,
+        agentId: agencyId,
+        payload: null
+    };
+});
+const selectBookingPackageBookRequest = createSelector(selectBookingPackageRequest, selectBookingOptions, selectBookingType, selectBookingPackagePax, selectBookingAddress, selectPackageDetails, selectCalculateDeposit, selectShowCommission, selectAgentId, selectGeneratePaymentUrl, selectSkipPaymentWithAgent, selectNotifications, selectTagIds, selectBookingRemarks, selectVoucherCodes, (bookingPackageRequest, bookingOptions, bookingType, pax, address, packageDetails, calculateDeposit, showCommission, agentId, generatePaymentUrl, skipPaymentWithAgent, notifications, tagIds, remarks, voucherCodes) => {
     if (!packageDetails)
         return null;
     let returnPaymentUrl = false;
@@ -19122,22 +20260,11 @@ const selectBookingPackageBookRequest = createSelector(selectBookingPackageReque
     return bookingPackageRequest;
 });
 const selectTravelersFirstStep = (state) => state.booking.travelersFirstStep;
-const buildPax = (traveler, mainBookerId) => {
-    return {
-        id: traveler.id,
-        gender: parseGender(traveler.gender),
-        firstName: traveler.firstName,
-        lastName: traveler.lastName,
-        dateOfBirth: traveler.birthDate,
-        age: traveler.birthDate ? null : traveler.age,
-        isMainBooker: traveler.id == mainBookerId,
-        weight: traveler.weight ?? null,
-        weightType: traveler.weightType ?? build.WeightType.kilograms,
-        height: traveler.height ?? null,
-        heightType: traveler.heightType ?? build.HeightType.centimeters,
-        customFields: traveler.customFields ?? []
-    };
-};
+const buildPax = (traveler, mainBookerId) => applyTravelerToPax({
+    id: traveler.id,
+    gender: parseGender(traveler.gender),
+    age: traveler.birthDate ? null : traveler.age
+}, traveler, mainBookerId);
 const parseGender = (gender) => {
     switch (gender) {
         case 'm':
@@ -19645,9 +20772,7 @@ const SettingsContext = React__default.createContext({
     travellers: {
         pathSuffix: '/reizigers',
         travelersFirstStep: false,
-        showAllCountries: false,
-        showWeightField: false,
-        showHeightField: false
+        showAllCountries: false
     },
     summary: {
         pathSuffix: '/samenvatting',
@@ -22724,1072 +23849,440 @@ const SummaryPerPaxOptionGroup = ({ group }) => {
                 opt.line.accommodationName,
                 !isNil(opt.line?.regimeName) && ', ',
                 opt.line.regimeName)),
-        getDateText(opt.line.startDate),
-        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
-        React__default.createElement("ul", { className: "list" }, !isEmpty$1(opt?.groups) &&
-            opt?.groups.map((x) => {
-                if (!x.options.some((y) => y.isSelected))
-                    return;
-                return React__default.createElement(SummaryPerPaxOptionGroup, { group: x });
-            })))))));
-    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
-        React__default.createElement("h6", null, group.title),
-        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
-};
-
-const SummaryBookingOptionPax = ({ pax }) => {
-    return (React__default.createElement(React__default.Fragment, null, pax.groups.map((y, i) => {
-        const paxOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty$1(paxOptions))
-            return;
-        return React__default.createElement(SummaryPerPaxOptionGroup, { key: i, group: y });
-    })));
-};
-
-const SummaryPerUnitOptionGroup = ({ group }) => {
-    const groupOptions = group.options.filter((x) => x.isSelected);
-    const renderOptions = () => (React__default.createElement(React__default.Fragment, null, groupOptions.map((opt) => (React__default.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
-        opt.line.productName,
-        React__default.createElement("ul", null,
-            React__default.createElement("li", null,
-                opt.line.accommodationName,
-                !isNil(opt.line?.regimeName) && ', ',
-                opt.line.regimeName)),
-        getDateText(opt.line.startDate),
-        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
-        React__default.createElement("ul", null,
-            !isEmpty$1(opt?.groups) &&
-                opt?.groups.map((x) => {
-                    if (!x.options.some((y) => y.isSelected))
-                        return;
-                    return React__default.createElement(SummaryPerUnitOptionGroup, { group: x });
-                }),
-            !isEmpty$1(opt?.pax) && opt?.pax.map((x) => React__default.createElement(SummaryBookingOptionPax, { pax: x }))))))));
-    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
-        React__default.createElement("h6", null, group.title),
-        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
-};
-
-const SummaryBookingOptionUnit = ({ unit }) => {
-    return (React__default.createElement(React__default.Fragment, null, unit.groups.map((y) => {
-        const unitOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty$1(unitOptions))
-            return;
-        return React__default.createElement(SummaryPerUnitOptionGroup, { group: y });
-    })));
-};
-
-const SummaryFlight = ({ flightMetaData, header }) => {
-    const translations = useSelector(selectTranslations);
-    return (React__default.createElement("li", null,
-        React__default.createElement("h6", null, header),
-        parseFlightLines(flightMetaData)?.map((flightLine) => (React__default.createElement("p", { key: flightLine.departureAirportIata },
-            flightLine.departureAirportDescription,
-            " (",
-            flightLine.departureAirportIata,
-            ") > ",
-            flightLine.arrivalAirportDescription,
-            " (",
-            flightLine.arrivalAirportIata,
-            ") ",
-            ' - ',
-            flightLine.travelClass,
-            " ",
-            ' - ',
-            flightLine.airlineCode,
-            flightLine.number,
-            React__default.createElement("br", null),
-            getDateText(flightLine.departureDate),
-            " ",
-            flightLine.departureTime,
-            " > ",
-            getDateText(flightLine.arrivalDate),
-            " ",
-            flightLine.arrivalTime,
-            React__default.createElement("br", null),
-            flightLine.airlineDescription))),
-        flightMetaData.luggageIncluded && React__default.createElement("p", null, translations.SIDEBAR.LUGGAGE_INCLUDED)));
-};
-
-const SummaryPerBookingOptionGroup = ({ group }) => {
-    const groupOptions = group.options.filter((x) => x.isSelected);
-    const renderOptions = () => (React__default.createElement(React__default.Fragment, null, groupOptions.map((opt) => (React__default.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
-        opt.line.productName,
-        React__default.createElement("ul", null,
-            React__default.createElement("li", null,
-                opt.line.accommodationName,
-                !isNil(opt.line?.regimeName) && ', ',
-                opt.line.regimeName)),
-        getDateText(opt.line.startDate),
-        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
-        React__default.createElement("ul", null,
-            !isEmpty$1(opt?.groups) &&
-                opt?.groups.map((x) => {
-                    if (!x.options.some((y) => y.isSelected))
-                        return;
-                    return React__default.createElement(SummaryPerBookingOptionGroup, { group: x });
-                }),
-            !isEmpty$1(opt?.units) && opt?.units.map((x) => React__default.createElement(SummaryBookingOptionUnit, { unit: x })),
-            !isEmpty$1(opt?.pax) && opt?.pax.map((x) => React__default.createElement(SummaryBookingOptionPax, { pax: x }))))))));
-    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
-        React__default.createElement("h6", null, group.title),
-        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
-};
-
-const Summary = () => {
-    const dispatch = useAppDispatch();
-    const settings = useContext(SettingsContext);
-    const navigate = settings.skipRouter ? () => { } : useNavigate();
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [checkboxes, setCheckboxes] = useState(settings.summary?.checkboxes);
-    const [remarks, setRemarks] = useState('');
-    const [voucher, setVoucher] = useState({});
-    const bookingQueryString = useSelector(selectBookingQueryString);
-    const travelersFirstStep = useSelector(selectTravelersFirstStep);
-    const travelerFormValues = useSelector(selectTravelersFormValues);
-    const packageDetails = useSelector(selectPackageDetails);
-    const activeOption = useSelector(selectActiveOption);
-    const apiSettings = useSelector(selectApiSettings);
-    const languageCode = useSelector(selectLanguageCode);
-    const officeId = useSelector(selectOfficeId);
-    const agentId = useSelector(selectAgentAdressId);
-    const departureFlight = useSelector(selectDepartureFlight);
-    const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
-    const returnFlight = useSelector(selectReturnFlight);
-    const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
-    if (!travelerFormValues) {
-        if (settings.skipRouter) {
-            dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
-        }
-        else {
-            navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`);
-        }
-    }
-    const rooms = useSelector(selectRooms);
-    const userValidated = useSelector(selectUserValidated);
-    const notifications = useSelector(selectNotifications);
-    const bookRequest = useSelector(selectBookingPackageBookRequest);
-    useEffect(() => {
-        // Every checkbox should be checked, or no checkboxes
-        const checkboxesValidated = !isNil(checkboxes) ? checkboxes.every((checkbox) => checkbox.isSelected) : true;
-        const notificationsValidated = !isNil(notifications) ? notifications.filter((x) => x.hasToBeConfirmed).every((checkbox) => checkbox.isConfirmed) : true;
-        dispatch(setUserValidated(checkboxesValidated && notificationsValidated));
-    }, [checkboxes, notifications]);
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        const submitter = e.nativeEvent.submitter?.name;
-        setIsSubmitting(true);
-        if (typeof window !== 'undefined') {
-            window.scrollTo(0, 0);
-        }
-        const tideClientConfig = buildTideClientConfig(apiSettings);
-        if (!bookRequest || !tideClientConfig) {
-            return;
-        }
-        if (bookRequest.payload.returnPaymentUrl) {
-            if (typeof window !== 'undefined') {
-                window.scrollTo(0, 0);
-                if (settings.paymentRedirectUrl) {
-                    bookRequest.payload.redirectUrl = settings.paymentRedirectUrl;
-                }
-                else {
-                    const location = window.location;
-                    bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath ?? location.pathname}?${bookingQueryString}`;
-                }
-            }
-        }
-        try {
-            if (submitter === 'option') {
-                bookRequest.payload.status = build.EntryStatus.option;
-                bookRequest.payload.customStatusId = settings.customOptionStatus;
-                dispatch(setIsOption(true));
-            }
-            const bookingResponse = await build.book(tideClientConfig, bookRequest, undefined, languageCode);
-            // Booking successfull
-            dispatch(setBookingNumber$1(bookingResponse.number));
-            if (bookingResponse.paymentUrl) {
-                const event = new CustomEvent('tide-booking-payment-url', {
-                    detail: {
-                        paymentUrl: bookingResponse.paymentUrl,
-                        bookingNumber: bookingResponse.number
-                    },
-                    cancelable: true,
-                    bubbles: true
-                });
-                const target = typeof document !== 'undefined' ? document.getElementById('tide-booking') ?? window : window;
-                const shouldAutoRedirect = target.dispatchEvent(event);
-                if (shouldAutoRedirect) {
-                    window.location.href = bookingResponse.paymentUrl;
-                }
-            }
-            else {
-                if (settings.skipRouter) {
-                    dispatch(setCurrentStep$1(CONFIRMATION_STEP));
-                }
-                else {
-                    navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.confirmation.pathSuffix}?${bookingQueryString}`);
-                }
-            }
-        }
-        catch (error) {
-            if (settings.skipRouter) {
-                dispatch(setCurrentStep$1(ERROR_STEP));
-            }
-            else {
-                navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.error.pathSuffix}?${bookingQueryString}`);
-            }
-        }
-        finally {
-            setIsSubmitting(false);
-        }
-    };
-    const handleNotificationChange = (id, checked) => {
-        const updatedNotifications = notifications.map((notification) => (notification.id === id ? { ...notification, isConfirmed: checked } : notification));
-        dispatch(setNotifications(updatedNotifications));
-    };
-    const handleCheckboxChange = (id, checked) => {
-        if (isNil(checkboxes)) {
-            return;
-        }
-        const newCheckboxes = [...checkboxes];
-        const index = findIndex$1(checkboxes, (checkbox) => checkbox.id === id);
-        newCheckboxes[index].isSelected = !newCheckboxes[index].isSelected;
-        setCheckboxes(newCheckboxes);
-    };
-    const handleRemarksChange = (text) => {
-        dispatch(setBookingRemarks(text));
-        setRemarks(text);
-    };
-    const handleValidateVoucher = async () => {
-        if (!voucher?.code)
-            return;
-        const request = {
-            officeId: officeId,
-            agentId: agentId,
-            payload: {
-                code: voucher.code,
-                otherCodes: bookRequest?.payload.voucherCodes ?? []
-            }
-        };
-        const tideClientConfig = buildTideClientConfig(apiSettings);
-        if (!tideClientConfig)
-            return;
-        const result = await build.validateVoucher(tideClientConfig, request);
-        if (result) {
-            setVoucher({
-                ...voucher,
-                isValidated: true,
-                isValid: result.isValid
-            });
-        }
-    };
-    const handleAddVoucher = (event) => {
-        if (!voucher.isValid)
-            return;
-        dispatch(setVoucherCodes([...(bookRequest?.payload.voucherCodes ?? []), voucher.code ?? ''].filter((x) => x !== '')));
-        dispatch(fetchPriceDetails());
-        setVoucher({});
-    };
-    const handleRemoveVoucher = (code) => {
-        dispatch(setVoucherCodes(bookRequest?.payload.voucherCodes?.filter((x) => x !== code) ?? []));
-        dispatch(fetchPriceDetails());
-    };
-    const goPrevious = () => {
-        dispatch(setCurrentStep$1(travelersFirstStep ? OPTIONS_FORM_STEP : TRAVELERS_FORM_STEP));
-    };
-    const translations = useSelector(selectTranslations);
-    return (React__default.createElement(React__default.Fragment, null,
-        isSubmitting && (settings.loaderComponent || React__default.createElement(Loader, null)),
-        !isSubmitting && (React__default.createElement("form", { className: "form", name: "booking--summary", id: "booking--summary", onSubmit: handleSubmit },
-            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)))),
-                    rooms.map((r, rIndex) => (React__default.createElement("div", { className: "form__row", key: rIndex },
-                        React__default.createElement("div", { className: "form__group" },
-                            React__default.createElement("div", { className: "form__region-header" },
-                                React__default.createElement("h5", { className: "form__region-heading" }, rooms.length > 1 ? `${translations.SHARED.ROOM} ${rIndex + 1}` : translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP),
-                                React__default.createElement("p", { className: "form__region-label" }, `${r.adults.length + r.children.length} ${r.adults.length + r.children.length === 1 ? translations.SUMMARY.TRAVELER : translations.SUMMARY.TRAVELERS}: ${compact([
-                                    r.adults.length,
-                                    r.adults.length === 1 && ` ${translations.SUMMARY.ADULT}`,
-                                    r.adults.length > 1 && ` ${translations.SUMMARY.ADULTS}`,
-                                    r.adults && r.adults.length && r.children && r.children.length && ', ',
-                                    r.children.length,
-                                    r.children.length === 1 && ` ${translations.SUMMARY.CHILD}`,
-                                    r.children.length > 1 && ` ${translations.SUMMARY.CHILDREN}`
-                                ]).join('')}`))),
-                        [...r.adults, ...r.children].map((traveler) => {
-                            const 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" }, traveler.birthDate.split('-').reverse().join('/')),
-                                    isMainBooker && (React__default.createElement(React__default.Fragment, null,
-                                        travelerFormValues?.street && (React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement("li", { className: "list__item" }, `${travelerFormValues?.street} ${compact([
-                                                travelerFormValues?.houseNumber,
-                                                travelerFormValues?.box
-                                            ]).join(' ')}, ${travelerFormValues?.zipCode} ${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" }, activeOption?.serviceType == build.ServiceType.flight ? (React__default.createElement(React__default.Fragment, null,
-                                departureFlightMetaData && React__default.createElement(SummaryFlight, { flightMetaData: departureFlightMetaData, header: translations.SIDEBAR.DEPARTURE_FLIGHT }),
-                                returnFlightMetaData && React__default.createElement(SummaryFlight, { flightMetaData: returnFlightMetaData, header: translations.SIDEBAR.ARRIVAL_FLIGHT }))) : (React__default.createElement(React__default.Fragment, null, activeOption?.rooms
-                                .flatMap((r) => r.options)
-                                .filter((x) => x.isSelected)
-                                .map((roomOption, roomOptionIndex) => (React__default.createElement(React__default.Fragment, { key: roomOptionIndex },
-                                React__default.createElement("li", null,
-                                    React__default.createElement("h6", null, roomOption?.productName),
-                                    React__default.createElement("ul", null,
-                                        React__default.createElement("li", { className: "list__item" },
-                                            roomOption?.accommodationName,
-                                            !isNil(roomOption?.regimeName) && ', ',
-                                            roomOption?.regimeName)),
-                                    React__default.createElement("p", null,
-                                        "(",
-                                        roomOption?.from === roomOption?.to ? (getDateText(roomOption?.from)) : (React__default.createElement(React__default.Fragment, null,
-                                            getDateText(roomOption?.from),
-                                            " > ",
-                                            getDateText(roomOption?.to))),
-                                        ")")),
-                                !isEmpty$1(activeOption?.groups) &&
-                                    activeOption?.groups.map((x, i) => {
-                                        if (!x.options.some((y) => y.isSelected))
-                                            return;
-                                        return React__default.createElement(SummaryPerBookingOptionGroup, { key: i, group: x });
-                                    }),
-                                !isEmpty$1(activeOption?.optionUnits) && activeOption?.optionUnits.map((x, i) => React__default.createElement(SummaryBookingOptionUnit, { key: i, unit: x })),
-                                !isEmpty$1(activeOption?.optionPax) && activeOption?.optionPax.map((x, i) => React__default.createElement(SummaryBookingOptionPax, { key: i, pax: x })),
-                                packageDetails?.outwardFlights &&
-                                    packageDetails.outwardFlights
-                                        .filter((x) => x.isSelected)
-                                        .map((flight, i) => (React__default.createElement(SummaryFlight, { key: i, flightMetaData: flight.flightMetaData, header: translations.SIDEBAR.DEPARTURE_FLIGHT }))),
-                                packageDetails?.returnFlights &&
-                                    packageDetails.returnFlights
-                                        .filter((x) => x.isSelected)
-                                        .map((flight, i) => (React__default.createElement(SummaryFlight, { key: i, flightMetaData: flight.flightMetaData, header: translations.SIDEBAR.ARRIVAL_FLIGHT })))))))))))),
-                settings.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", defaultValue: voucher.code, onChange: (e) => setVoucher({ code: e.target.value }) }),
-                            React__default.createElement("button", { type: "button", className: buildClassName(['cta', !voucher.code && 'cta--disabled']), onClick: (e) => handleValidateVoucher() }, 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: handleAddVoucher }, 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$1(bookRequest?.payload.voucherCodes) &&
-                            bookRequest?.payload.voucherCodes?.map((y, i) => (React__default.createElement("li", { key: i },
-                                React__default.createElement("div", { className: "info-message__voucher__list" },
-                                    y,
-                                    ' ',
-                                    React__default.createElement("button", { type: "button", className: "cta--add-remove", onClick: (e) => handleRemoveVoucher(y) },
-                                        React__default.createElement(Icon, { height: 16, name: "ui-trashcan" })))))))))),
-                !isEmpty$1(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),
-                                    React__default.createElement(React__default.Fragment, null,
-                                        uniqBy(notifications.filter((x) => !x.hasToBeConfirmed), 'id').map((notification) => (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.filter((x) => x.hasToBeConfirmed), 'id').map((notification) => (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: (e) => handleNotificationChange(notification.id, e.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", defaultValue: remarks, onChange: (e) => handleRemarksChange(e.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),
-                                    settings.customValidateText ? (React__default.createElement("div", { dangerouslySetInnerHTML: {
-                                            __html: settings.customValidateText
-                                        } })) : (React__default.createElement(React__default.Fragment, null,
-                                        React__default.createElement("p", null, settings.isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING),
-                                        settings.allowOption && React__default.createElement("p", null, translations.SUMMARY.VALIDATE_TEXT_OPTION))),
-                                    checkboxes &&
-                                        checkboxes.map((checkbox) => (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: (e) => handleCheckboxChange(checkbox.id, e.target.checked) }),
-                                                React__default.createElement("span", { className: "checkbox__label-text", dangerouslySetInnerHTML: {
-                                                        __html: checkbox.text
-                                                    } }))))))))))),
-            React__default.createElement("div", { className: "booking__navigator" },
-                settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${travelersFirstStep ? settings.options.pathSuffix : settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
-                settings.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: settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "default" }, settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING))))));
+        getDateText(opt.line.startDate),
+        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
+        React__default.createElement("ul", { className: "list" }, !isEmpty$1(opt?.groups) &&
+            opt?.groups.map((x) => {
+                if (!x.options.some((y) => y.isSelected))
+                    return;
+                return React__default.createElement(SummaryPerPaxOptionGroup, { group: x });
+            })))))));
+    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
+        React__default.createElement("h6", null, group.title),
+        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
 };
 
-const LabeledInput = ({ name, type, required, value, defaultValue, min, max, label, placeholder, extraClassName, hasError, onChange, 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 ?? 'text', required: required, className: "form__input", min: min, max: max, placeholder: placeholder, onChange: onChange, onBlur: onBlur, value: value, defaultValue: defaultValue })));
+const SummaryBookingOptionPax = ({ pax }) => {
+    return (React__default.createElement(React__default.Fragment, null, pax.groups.map((y, i) => {
+        const paxOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty$1(paxOptions))
+            return;
+        return React__default.createElement(SummaryPerPaxOptionGroup, { key: i, group: y });
+    })));
 };
 
-const LabeledSelect = ({ name, id, required, value, defaultValue, label, extraClassName, extraDropdownClassName, hasError, options, onChange, 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?.map((option) => (React__default.createElement("option", { key: option.key, value: option.value }, option.label)))))));
+const SummaryPerUnitOptionGroup = ({ group }) => {
+    const groupOptions = group.options.filter((x) => x.isSelected);
+    const renderOptions = () => (React__default.createElement(React__default.Fragment, null, groupOptions.map((opt) => (React__default.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
+        opt.line.productName,
+        React__default.createElement("ul", null,
+            React__default.createElement("li", null,
+                opt.line.accommodationName,
+                !isNil(opt.line?.regimeName) && ', ',
+                opt.line.regimeName)),
+        getDateText(opt.line.startDate),
+        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
+        React__default.createElement("ul", null,
+            !isEmpty$1(opt?.groups) &&
+                opt?.groups.map((x) => {
+                    if (!x.options.some((y) => y.isSelected))
+                        return;
+                    return React__default.createElement(SummaryPerUnitOptionGroup, { group: x });
+                }),
+            !isEmpty$1(opt?.pax) && opt?.pax.map((x) => React__default.createElement(SummaryBookingOptionPax, { pax: x }))))))));
+    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
+        React__default.createElement("h6", null, group.title),
+        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
 };
 
-const normalize = (v) => (v == null ? '' : String(v));
-const parseCombined = (raw, countries) => {
-    const value = normalize(raw).trim();
-    if (!value)
-        return { prefix: '', number: '' };
-    // Try to match a known prefix at the start. Prefer longest match.
-    const sorted = [...countries].sort((a, b) => b.phonePrefix.length - a.phonePrefix.length);
-    const hit = sorted.find((c) => value.startsWith(c.phonePrefix));
-    if (hit) {
-        const rest = value
-            .slice(hit.phonePrefix.length)
-            .trim()
-            .replace(/^[-\s]+/, '');
-        return { prefix: hit.phonePrefix, number: rest };
-    }
-    // Fallback: split on first space if it looks like a +prefix number
-    const m = value.match(/^(\+\d{1,4})[\s-]*(.*)$/);
-    if (m)
-        return { prefix: m[1], number: m[2] };
-    return { prefix: '', number: value };
-};
-const PhoneInput = ({ name, required, value, label, placeholder, extraClassName, hasError, countries, countryIso2, onChange, onBlur }) => {
-    // Derive initial state from `value`
-    const initialCountry = countries.find((c) => c.iso2 === countryIso2);
-    const initial = useMemo(() => parseCombined(normalize(value), countries), [value, countries]);
-    const [prefix, setPrefix] = useState(initial.prefix);
-    const [number, setNumber] = useState(initial.number);
-    // Keep state in sync if the parent changes `value`
-    useEffect(() => {
-        const parsed = !prefix && !number && initialCountry ? { prefix: initialCountry.phonePrefix, number: '' } : parseCombined(normalize(value), countries);
-        if (parsed.prefix)
-            setPrefix(parsed.prefix);
-        if (parsed.number)
-            setNumber(parsed.number);
-    }, [value, countries, countryIso2]);
-    const emitCombinedChange = (e, nextPrefix, nextNumber) => {
-        // Combine with a space, unless the number already starts with a dash or space
-        const combined = nextPrefix && nextNumber ? compact([nextPrefix, nextNumber]).join(' ') : null;
-        onChange?.({
-            ...e,
-            type: 'change',
-            target: { name, value: combined },
-            currentTarget: { name, value: combined }
-        });
-    };
-    const handleCountryBlur = (e) => {
-        onBlur?.(e);
-    };
-    const onCountryChange = (e) => {
-        const next = e.target.value;
-        setPrefix(next);
-        emitCombinedChange(e, next, number);
-    };
-    const onPhoneChange = (e) => {
-        const cleaned = e.target.value.replace(/[^\d\s-]/g, '');
-        setNumber(cleaned);
-        emitCombinedChange(e, prefix, cleaned);
-    };
-    const handleNumberBlur = (e) => {
-        onBlur?.(e);
-    };
-    // Ensure the select shows a reasonable default when prefix is empty
-    const selectValue = prefix || '';
-    return (React__default.createElement("label", { className: buildClassName(['form__group', extraClassName, hasError && 'form__group--error']) },
-        label && React__default.createElement("span", { className: "form__label" }, compact([label, required && '*']).join(' ')),
-        React__default.createElement("div", { className: "phone-input" },
-            React__default.createElement("div", { className: "dropdown" },
-                React__default.createElement("select", { "aria-label": label ? `${label} – country code` : 'Country calling code', name: `${name}__country`, value: selectValue, onBlur: handleCountryBlur, onChange: onCountryChange },
-                    React__default.createElement("option", { value: "", disabled: true }),
-                    countries?.map((option) => (React__default.createElement("option", { key: option.iso2, value: option.phonePrefix },
-                        option.name,
-                        " (",
-                        option.phonePrefix,
-                        ")"))))),
-            React__default.createElement("input", { "aria-label": label ? `${label} – number` : 'Phone number', name: `${name}__number`, type: "tel", inputMode: "tel", required: required, className: "form__input", placeholder: placeholder, onChange: onPhoneChange, onBlur: handleNumberBlur, value: number }),
-            React__default.createElement("input", { type: "hidden", name: name, value: compact([prefix, number]).join(' ') }))));
+const SummaryBookingOptionUnit = ({ unit }) => {
+    return (React__default.createElement(React__default.Fragment, null, unit.groups.map((y) => {
+        const unitOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty$1(unitOptions))
+            return;
+        return React__default.createElement(SummaryPerUnitOptionGroup, { group: y });
+    })));
 };
 
-const hasVisibleError = (formik, key) => get(formik.errors, key) && get(formik.touched, key);
+const SummaryFlight = ({ flightMetaData, header }) => {
+    const translations = useSelector(selectTranslations);
+    return (React__default.createElement("li", null,
+        React__default.createElement("h6", null, header),
+        parseFlightLines(flightMetaData)?.map((flightLine) => (React__default.createElement("p", { key: flightLine.departureAirportIata },
+            flightLine.departureAirportDescription,
+            " (",
+            flightLine.departureAirportIata,
+            ") > ",
+            flightLine.arrivalAirportDescription,
+            " (",
+            flightLine.arrivalAirportIata,
+            ") ",
+            ' - ',
+            flightLine.travelClass,
+            " ",
+            ' - ',
+            flightLine.airlineCode,
+            flightLine.number,
+            React__default.createElement("br", null),
+            getDateText(flightLine.departureDate),
+            " ",
+            flightLine.departureTime,
+            " > ",
+            getDateText(flightLine.arrivalDate),
+            " ",
+            flightLine.arrivalTime,
+            React__default.createElement("br", null),
+            flightLine.airlineDescription))),
+        flightMetaData.luggageIncluded && React__default.createElement("p", null, translations.SIDEBAR.LUGGAGE_INCLUDED)));
+};
 
-const GenderControl = ({ translations, value, formik, 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)))));
+const SummaryPerBookingOptionGroup = ({ group }) => {
+    const groupOptions = group.options.filter((x) => x.isSelected);
+    const renderOptions = () => (React__default.createElement(React__default.Fragment, null, groupOptions.map((opt) => (React__default.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
+        opt.line.productName,
+        React__default.createElement("ul", null,
+            React__default.createElement("li", null,
+                opt.line.accommodationName,
+                !isNil(opt.line?.regimeName) && ', ',
+                opt.line.regimeName)),
+        getDateText(opt.line.startDate),
+        opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : '',
+        React__default.createElement("ul", null,
+            !isEmpty$1(opt?.groups) &&
+                opt?.groups.map((x) => {
+                    if (!x.options.some((y) => y.isSelected))
+                        return;
+                    return React__default.createElement(SummaryPerBookingOptionGroup, { group: x });
+                }),
+            !isEmpty$1(opt?.units) && opt?.units.map((x) => React__default.createElement(SummaryBookingOptionUnit, { unit: x })),
+            !isEmpty$1(opt?.pax) && opt?.pax.map((x) => React__default.createElement(SummaryBookingOptionPax, { pax: x }))))))));
+    return (React__default.createElement(React__default.Fragment, null, group.title ? (React__default.createElement("li", { className: "list__item" },
+        React__default.createElement("h6", null, group.title),
+        React__default.createElement("ul", { className: "list" }, renderOptions()))) : (React__default.createElement(React__default.Fragment, null, renderOptions()))));
 };
 
-const TypeAheadInput = ({ name, value, placeholder, options, onChange, onSelect, onClear }) => {
-    const [showItems, setShowItems] = useState(false);
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e.target.value);
+const Summary = () => {
+    const dispatch = useAppDispatch();
+    const settings = useContext(SettingsContext);
+    const navigate = settings.skipRouter ? () => { } : useNavigate();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [checkboxes, setCheckboxes] = useState(settings.summary?.checkboxes);
+    const [remarks, setRemarks] = useState('');
+    const [voucher, setVoucher] = useState({});
+    const bookingQueryString = useSelector(selectBookingQueryString);
+    const travelersFirstStep = useSelector(selectTravelersFirstStep);
+    const travelerFormValues = useSelector(selectTravelersFormValues);
+    const packageDetails = useSelector(selectPackageDetails);
+    const activeOption = useSelector(selectActiveOption);
+    const apiSettings = useSelector(selectApiSettings);
+    const languageCode = useSelector(selectLanguageCode);
+    const officeId = useSelector(selectOfficeId);
+    const agentId = useSelector(selectAgentAdressId);
+    const departureFlight = useSelector(selectDepartureFlight);
+    const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
+    const returnFlight = useSelector(selectReturnFlight);
+    const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
+    if (!travelerFormValues) {
+        if (settings.skipRouter) {
+            dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
         }
-    };
-    const handleClearClick = (e) => {
-        if (onClear) {
-            onClear();
+        else {
+            navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`);
         }
-        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: (e) => {
-                    if (e.key === 'Tab' && options && onSelect) {
-                        onSelect(options[0].key);
-                        setShowItems(false);
-                    }
-                }, onFocus: () => 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 ?? []).map((option) => {
-            const matchIndex = typeof value !== 'undefined' ? option.text.indexOf(value) : 0;
-            const prefix = option.text.slice(0, matchIndex);
-            const highlight = option.text.slice(matchIndex, value?.length ?? 0);
-            const 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: () => {
-                            if (onSelect)
-                                onSelect(option.key);
-                            setShowItems(false);
-                        }, type: "button", className: "button button--plain" },
-                        prefix,
-                        React__default.createElement("span", { className: "typeahead__option-highlight" }, highlight),
-                        suffix))));
-        })))));
-};
-
-// A traveler is a baby when the age they were booked with is at or below the baby
-// boundary. Babies get their own label and birth date validation (TIDE-3269). Only
-// meaningful for the regular form: the compact form asks for an age instead of a birth
-// date, so it has nothing to validate and its own age input already states the age.
-function isBabyAge(age, maxBabyAge = BABY_MAX_AGE) {
-    return typeof age === 'number' && age <= maxBabyAge;
-}
-// The native date input can hold values format() throws on (e.g. a 5+ digit year while typing), so never format an unvalidated birthDate
-function formatBirthDate$1(birthDate) {
-    if (!birthDate)
-        return '';
-    const parsed = parse(birthDate, 'yyyy-MM-dd', new Date());
-    return isValid(parsed) ? format$2(parsed, 'dd-MM-yyyy') : '';
-}
-// A customFieldConfigurationId can have separate "main-booker"/other-pax variants; resolved per traveler below.
-const MAIN_BOOKER_GROUP = 'main-booker';
-function buildEmptyCustomFields(paxCustomFields = []) {
-    const uniqueIds = Array.from(new Set(paxCustomFields.map((field) => field.customFieldConfigurationId)));
-    return uniqueIds.map((customFieldConfigurationId) => ({ customFieldConfigurationId, value: '' }));
-}
-function getApplicablePaxCustomFields(paxCustomFields = [], isMainBooker) {
-    const variantsById = new Map();
-    paxCustomFields.forEach((field) => {
-        const variants = variantsById.get(field.customFieldConfigurationId) ?? [];
-        variants.push(field);
-        variantsById.set(field.customFieldConfigurationId, variants);
-    });
-    const applicableFields = [];
-    variantsById.forEach((variants) => {
-        const hasRoleSplit = variants.some((v) => v.group === MAIN_BOOKER_GROUP);
-        if (!hasRoleSplit) {
-            applicableFields.push(variants[0]);
+    }
+    const rooms = useSelector(selectRooms);
+    const userValidated = useSelector(selectUserValidated);
+    const notifications = useSelector(selectNotifications);
+    const bookRequest = useSelector(selectBookingPackageBookRequest);
+    useEffect(() => {
+        // Every checkbox should be checked, or no checkboxes
+        const checkboxesValidated = !isNil(checkboxes) ? checkboxes.every((checkbox) => checkbox.isSelected) : true;
+        const notificationsValidated = !isNil(notifications) ? notifications.filter((x) => x.hasToBeConfirmed).every((checkbox) => checkbox.isConfirmed) : true;
+        dispatch(setUserValidated(checkboxesValidated && notificationsValidated));
+    }, [checkboxes, notifications]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const submitter = e.nativeEvent.submitter?.name;
+        setIsSubmitting(true);
+        if (typeof window !== 'undefined') {
+            window.scrollTo(0, 0);
+        }
+        const tideClientConfig = buildTideClientConfig(apiSettings);
+        if (!bookRequest || !tideClientConfig) {
             return;
         }
-        const roleMatch = variants.find((v) => (v.group === MAIN_BOOKER_GROUP) === isMainBooker);
-        if (roleMatch)
-            applicableFields.push(roleMatch);
-    });
-    return applicableFields;
-}
-function createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxCustomFields) {
-    if (isCompact) {
-        return {
-            id: traveler.id,
-            firstName: personTranslation,
-            lastName: `${followNumber.number++}`,
-            birthDate: '',
-            gender: '',
-            // Keep a booked age of 0 instead of submitting and pricing the traveler as a 30 year
-            // old, while still falling back for a missing or unusable age. `??` alone would let a
-            // NaN (unparseable date of birth upstream) reach the age input and the booked pax.
-            // See TIDE-3269.
-            age: Number.isFinite(traveler.age) ? traveler.age : 30,
-            // No isBaby here on purpose: the age below is editable and nothing revalidates it
-            // in compact mode, so a stored flag would end up contradicting the entered age.
-            weight: null,
-            weightType: build.WeightType.kilograms,
-            height: null,
-            heightType: build.HeightType.centimeters,
-            customFields: buildEmptyCustomFields(paxCustomFields)
-        };
-    }
-    return {
-        id: traveler.id,
-        firstName: '',
-        lastName: '',
-        birthDate: '',
-        gender: '',
-        isBaby: isBabyAge(traveler.age, maxBabyAge),
-        weight: null,
-        weightType: build.WeightType.kilograms,
-        height: null,
-        heightType: build.HeightType.centimeters,
-        customFields: buildEmptyCustomFields(paxCustomFields)
-    };
-}
-function createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, personTranslation, isCompact, maxBabyAge, paxCustomFields) {
-    const followNumber = { number: 1 };
-    const initialValues = {
-        startDate,
-        endDate,
-        rooms: formRooms.map((room) => ({
-            adults: room.adults.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxCustomFields)),
-            children: room.children.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact, maxBabyAge, paxCustomFields))
-        })),
-        mainBookerId: -1,
-        street: '',
-        houseNumber: '',
-        box: '',
-        zipCode: '',
-        place: '',
-        country: '',
-        phone: '',
-        email: '',
-        emailConfirmation: '',
-        travelAgentId: agentAdressId ?? 0,
-        travelAgentName: ''
-    };
-    if (initialValues.rooms?.[0]?.adults?.[0]) {
-        initialValues.mainBookerId = initialValues.rooms[0].adults[0].id;
-    }
-    return initialValues;
-}
-function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, agentAdressId) {
-    const pax = editablePackagingEntry?.pax ?? [];
-    const rooms = editablePackagingEntry.rooms.map((room) => {
-        const roomPax = pax.filter((x) => room.paxIds.includes(x.id));
-        const adults = roomPax.filter((x) => x.age >= 18);
-        const children = roomPax.filter((x) => x.age < 18);
-        return {
-            adults: adults.map((roomTraveler) => {
-                return {
-                    id: roomTraveler.id,
-                    firstName: roomTraveler.firstName ?? '',
-                    lastName: roomTraveler.lastName ?? '',
-                    birthDate: roomTraveler.dateOfBirth ? format$2(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
-                    gender: ''
-                };
-            }),
-            children: children.map((roomTraveler) => {
-                return {
-                    id: roomTraveler.id,
-                    firstName: roomTraveler.firstName ?? '',
-                    lastName: roomTraveler.lastName ?? '',
-                    birthDate: roomTraveler.dateOfBirth ? format$2(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
-                    gender: '',
-                    isBaby: isBabyAge(roomTraveler.age)
-                };
-            })
-        };
-    });
-    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), first(editablePackagingEntry?.lines)?.from, last(editablePackagingEntry?.lines)?.to, agentAdressId);
-    values.rooms = rooms;
-    values.mainBookerId = pax.find((x) => x.isMainBooker)?.id ?? rooms[0]?.adults?.[0]?.id ?? -1;
-    const address = editablePackagingEntry?.address;
-    values.street = address?.street ?? '';
-    values.houseNumber = address?.houseNumber ?? '';
-    values.box = address?.box ?? '';
-    values.zipCode = address?.zipCode ?? '';
-    values.place = address?.place ?? '';
-    values.country = address?.country ?? '';
-    values.phone = address?.phone ?? '';
-    values.email = address?.email ?? '';
-    values.emailConfirmation = address?.email ?? '';
-    values.travelAgentId = address?.travelAgentId ?? agentAdressId ?? 0;
-    return values;
-}
-function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values) {
-    const travelers = values.rooms.flatMap((room) => [...room.adults, ...room.children]);
-    return {
-        ...editablePackagingEntry,
-        pax: (editablePackagingEntry.pax ?? []).map((pax) => {
-            const traveler = travelers.find((x) => x.id === pax.id);
-            if (!traveler)
-                return pax;
-            return {
-                ...pax,
-                firstName: traveler.firstName ?? '',
-                lastName: traveler.lastName ?? '',
-                dateOfBirth: traveler.birthDate || null,
-                isMainBooker: traveler.id === values.mainBookerId
-            };
-        }),
-        address: {
-            ...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
+        if (bookRequest.payload.returnPaymentUrl) {
+            if (typeof window !== 'undefined') {
+                window.scrollTo(0, 0);
+                if (settings.paymentRedirectUrl) {
+                    bookRequest.payload.redirectUrl = settings.paymentRedirectUrl;
+                }
+                else {
+                    const location = window.location;
+                    bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath ?? location.pathname}?${bookingQueryString}`;
+                }
+            }
         }
-    };
-}
-const SharedTravelersForm = ({ formik, translations, travellersSettings, countries, agents, bookingType, agentAdressId, travelersFirstStep = false, isUnavailable = false, useCompactForm = false, showAllCountries = false, showWeightField = false, showHeightField = false, paxCustomFields, showAgentSelection = false, initialShowAgents = false, renderPreviousButton, onBookingTypeChange }) => {
-    const [showAgents, setShowAgents] = useState(initialShowAgents);
-    const typeaheadAgents = useMemo(() => sortBy(agents?.map((agent) => ({
-        key: `${agent.id}`,
-        value: `${agent.name}${agent.postalCode || agent.location ? ` (${compact([agent.postalCode, agent.location]).join(' ')})` : ''}`,
-        text: `${agent.name}${agent.postalCode || agent.location ? ` (${compact([agent.postalCode, agent.location]).join(' ')})` : ''}`
-    })), 'value') ?? [], [agents]);
-    const [filteredAgents, setFilteredAgents] = useState(typeaheadAgents);
-    const flatErrors = flat(formik.errors);
-    const errorKeys = Object.keys(flatErrors).filter((key) => get(formik.touched, key));
-    const hasVisibleError = (key) => get(formik.errors, key) && get(formik.touched, key);
-    const mainBooker = formik.values.rooms
-        .find((room) => room.adults.find((traveler) => traveler.id === formik.values.mainBookerId))
-        ?.adults.find((traveler) => traveler.id === formik.values.mainBookerId);
-    const countryOptions = [
-        { key: 'empty', value: undefined, label: translations.TRAVELERS_FORM.SELECT_COUNTRY },
-        ...(showAllCountries
-            ? countries?.map((country) => ({ key: country.iso2, value: country.iso2, label: country.name })) ?? []
-            : travellersSettings?.countries?.map((country) => ({ key: country.iso2, value: country.iso2, label: country.name })) ?? [
-                { 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 }
-            ])
-    ];
-    const handleMainBookerChange = (event) => {
-        formik.setFieldValue('mainBookerId', parseInt(event.currentTarget.value, 10));
-    };
-    const handleAgentChange = (value) => {
-        setFilteredAgents(typeaheadAgents.filter((x) => x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1));
-        formik.setFieldValue('travelAgentName', value);
-    };
-    const handleAgentSelect = (key) => {
-        const agent = typeaheadAgents.find((x) => x.key === key);
-        formik.setValues({
-            ...formik.values,
-            travelAgentId: Number(agent?.key),
-            travelAgentName: agent?.value ?? ''
-        });
-        onBookingTypeChange?.(agentAdressId && agentAdressId !== 0 ? 'b2b' : 'b2b2c');
-    };
-    const handleAgentClear = () => {
-        formik.setValues({ ...formik.values, travelAgentId: 0, travelAgentName: '' });
-        onBookingTypeChange?.('b2c');
-    };
-    const toggleAgent = (value) => {
-        setShowAgents(value);
-        if (!value) {
-            handleAgentClear();
-            setFilteredAgents([]);
+        try {
+            if (submitter === 'option') {
+                bookRequest.payload.status = build.EntryStatus.option;
+                bookRequest.payload.customStatusId = settings.customOptionStatus;
+                dispatch(setIsOption(true));
+            }
+            const bookingResponse = await build.book(tideClientConfig, bookRequest, undefined, languageCode);
+            // Booking successfull
+            dispatch(setBookingNumber$1(bookingResponse.number));
+            if (bookingResponse.paymentUrl) {
+                const event = new CustomEvent('tide-booking-payment-url', {
+                    detail: {
+                        paymentUrl: bookingResponse.paymentUrl,
+                        bookingNumber: bookingResponse.number
+                    },
+                    cancelable: true,
+                    bubbles: true
+                });
+                const target = typeof document !== 'undefined' ? document.getElementById('tide-booking') ?? window : window;
+                const shouldAutoRedirect = target.dispatchEvent(event);
+                if (shouldAutoRedirect) {
+                    window.location.href = bookingResponse.paymentUrl;
+                }
+            }
+            else {
+                if (settings.skipRouter) {
+                    dispatch(setCurrentStep$1(CONFIRMATION_STEP));
+                }
+                else {
+                    navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.confirmation.pathSuffix}?${bookingQueryString}`);
+                }
+            }
+        }
+        catch (error) {
+            if (settings.skipRouter) {
+                dispatch(setCurrentStep$1(ERROR_STEP));
+            }
+            else {
+                navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.error.pathSuffix}?${bookingQueryString}`);
+            }
+        }
+        finally {
+            setIsSubmitting(false);
         }
     };
-    const handleAddTraveler = (roomIndex) => {
-        const rooms = [...formik.values.rooms];
-        const newAdult = {
-            id: Date.now(),
-            firstName: '',
-            lastName: '',
-            birthDate: '',
-            gender: '',
-            weight: null,
-            weightType: build.WeightType.kilograms,
-            height: null,
-            heightType: build.HeightType.centimeters,
-            customFields: buildEmptyCustomFields(paxCustomFields)
-        };
-        rooms[roomIndex] = { ...rooms[roomIndex], adults: [...rooms[roomIndex].adults, newAdult] };
-        formik.setFieldValue('rooms', rooms);
+    const handleNotificationChange = (id, checked) => {
+        const updatedNotifications = notifications.map((notification) => (notification.id === id ? { ...notification, isConfirmed: checked } : notification));
+        dispatch(setNotifications(updatedNotifications));
     };
-    const handleRemoveTraveler = (roomIndex, travelerIndex) => {
-        const rooms = [...formik.values.rooms];
-        const adults = [...rooms[roomIndex].adults];
-        if (adults.length <= 1)
+    const handleCheckboxChange = (id, checked) => {
+        if (isNil(checkboxes)) {
             return;
-        adults.splice(travelerIndex, 1);
-        rooms[roomIndex] = { ...rooms[roomIndex], adults };
-        formik.setFieldValue('rooms', rooms);
-    };
-    const handleAddRoom = () => {
-        const rooms = [...formik.values.rooms];
-        rooms.push({
-            adults: [
-                {
-                    id: Date.now(),
-                    firstName: '',
-                    lastName: '',
-                    birthDate: '',
-                    gender: '',
-                    weight: null,
-                    weightType: build.WeightType.kilograms,
-                    height: null,
-                    heightType: build.HeightType.centimeters,
-                    customFields: buildEmptyCustomFields(paxCustomFields)
-                }
-            ],
-            children: []
-        });
-        formik.setFieldValue('rooms', rooms);
+        }
+        const newCheckboxes = [...checkboxes];
+        const index = findIndex$1(checkboxes, (checkbox) => checkbox.id === id);
+        newCheckboxes[index].isSelected = !newCheckboxes[index].isSelected;
+        setCheckboxes(newCheckboxes);
     };
-    const handleRemoveRoom = (roomIndex) => {
-        const rooms = [...formik.values.rooms];
-        rooms.splice(roomIndex, 1);
-        formik.setFieldValue('rooms', rooms);
+    const handleRemarksChange = (text) => {
+        dispatch(setBookingRemarks(text));
+        setRemarks(text);
     };
-    const renderGenderControl = (name, value) => (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(([gender, label]) => (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)))))));
-    const renderWeightControl = (namePrefix, value) => (React__default.createElement("div", { className: "form__row" },
-        React__default.createElement(LabeledInput, { type: "number", min: 0, hasError: hasVisibleError(`${namePrefix}.weight`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.WEIGHT, name: `${namePrefix}.weight`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.weight ?? '' }),
-        React__default.createElement(LabeledSelect, { extraClassName: "form__group--md-33", name: `${namePrefix}.weightType`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.weightType, options: [
-                { key: 'kg', value: build.WeightType.kilograms, label: translations.TRAVELERS_FORM.WEIGHT_UNIT_KG },
-                { key: 'lb', value: build.WeightType.pounds, label: translations.TRAVELERS_FORM.WEIGHT_UNIT_LB }
-            ] })));
-    const renderHeightControl = (namePrefix, value) => (React__default.createElement("div", { className: "form__row" },
-        React__default.createElement(LabeledInput, { type: "number", min: 0, hasError: hasVisibleError(`${namePrefix}.height`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.HEIGHT, name: `${namePrefix}.height`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.height ?? '' }),
-        React__default.createElement(LabeledSelect, { extraClassName: "form__group--md-33", name: `${namePrefix}.heightType`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.heightType, options: [
-                { key: 'cm', value: build.HeightType.centimeters, label: translations.TRAVELERS_FORM.HEIGHT_UNIT_CM },
-                { key: 'ftIn', value: build.HeightType.feetInches, label: translations.TRAVELERS_FORM.HEIGHT_UNIT_FT_IN }
-            ] })));
-    const getCustomFieldControl = (field, value, name) => {
-        const label = compact([field.fieldName, field.isRequired && '*']).join(' ');
-        switch (field.dataType) {
-            case build.CustomFieldDataType.bool:
-                return (React__default.createElement("div", { className: buildClassName(['form__group', hasVisibleError(name) && 'form__group--error']) },
-                    React__default.createElement("div", { className: "checkbox" },
-                        React__default.createElement("label", { className: "checkbox__label" },
-                            React__default.createElement("input", { type: "checkbox", className: "checkbox__input", checked: value === 'true', onChange: (e) => formik.setFieldValue(name, e.target.checked ? 'true' : 'false'), onBlur: formik.handleBlur, name: name }),
-                            label))));
-            case build.CustomFieldDataType.date:
-                return (React__default.createElement(LabeledInput, { type: "date", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
-            case build.CustomFieldDataType.time:
-                return (React__default.createElement(LabeledInput, { type: "time", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
-            case build.CustomFieldDataType.numeric:
-                return (React__default.createElement(LabeledInput, { type: "number", hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
-            case build.CustomFieldDataType.string:
-            default:
-                return (React__default.createElement(LabeledInput, { hasError: hasVisibleError(name), label: label, name: name, onChange: (e) => formik.setFieldValue(name, e.target.value), onBlur: formik.handleBlur, value: value }));
+    const handleValidateVoucher = async () => {
+        if (!voucher?.code)
+            return;
+        const request = {
+            officeId: officeId,
+            agentId: agentId,
+            payload: {
+                code: voucher.code,
+                otherCodes: bookRequest?.payload.voucherCodes ?? []
+            }
+        };
+        const tideClientConfig = buildTideClientConfig(apiSettings);
+        if (!tideClientConfig)
+            return;
+        const result = await build.validateVoucher(tideClientConfig, request);
+        if (result) {
+            setVoucher({
+                ...voucher,
+                isValidated: true,
+                isValid: result.isValid
+            });
         }
     };
-    const renderCustomFields = (travelerValues, namePrefix) => {
-        if (!paxCustomFields?.length)
-            return null;
-        const isMainBooker = travelerValues.id === formik.values.mainBookerId;
-        const applicableFields = getApplicablePaxCustomFields(paxCustomFields, isMainBooker);
-        if (!applicableFields.length)
-            return null;
-        return (React__default.createElement("div", { className: "travelers-form__custom-fields-grid" }, applicableFields.map((field) => {
-            const fieldIndex = travelerValues.customFields?.findIndex((c) => c.customFieldConfigurationId === field.customFieldConfigurationId) ?? -1;
-            if (fieldIndex < 0)
-                return null;
-            const name = `${namePrefix}.customFields[${fieldIndex}].value`;
-            const value = travelerValues.customFields[fieldIndex].value;
-            return (React__default.createElement("div", { key: field.customFieldConfigurationId, style: { gridColumn: `span ${field.col || 12}` } }, getCustomFieldControl(field, value, name)));
-        })));
+    const handleAddVoucher = (event) => {
+        if (!voucher.isValid)
+            return;
+        dispatch(setVoucherCodes([...(bookRequest?.payload.voucherCodes ?? []), voucher.code ?? ''].filter((x) => x !== '')));
+        dispatch(fetchPriceDetails());
+        setVoucher({});
     };
-    const getControl = (type, value, name) => {
-        switch (type) {
-            case 'gender':
-                return React__default.createElement(GenderControl, { translations: translations, value: value, formik: formik, name: name });
-            case 'firstName':
-                return (React__default.createElement(LabeledInput, { hasError: hasVisibleError(name), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: name, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.firstName }));
-            case 'lastName':
-                return (React__default.createElement(LabeledInput, { hasError: hasVisibleError(name), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: name, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.lastName }));
-            case 'birthDate':
-                return (React__default.createElement(LabeledInput, { type: "date", hasError: hasVisibleError(name), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: name, onChange: formik.handleChange, onBlur: formik.handleBlur, value: value.birthDate }));
-            case 'country':
-                return (React__default.createElement(LabeledSelect, { hasError: hasVisibleError('country'), label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: countryOptions }));
-            case 'phone':
-                return (React__default.createElement(PhoneInput, { countries: travellersSettings?.countries ?? [], countryIso2: formik.values.country, hasError: hasVisibleError('phone'), label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }));
-            case 'email':
-                return (React__default.createElement(React__default.Fragment, null,
-                    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 })));
-            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;
-        }
+    const handleRemoveVoucher = (code) => {
+        dispatch(setVoucherCodes(bookRequest?.payload.voucherCodes?.filter((x) => x !== code) ?? []));
+        dispatch(fetchPriceDetails());
     };
-    const renderRoomLabel = (room) => compact([
-        room.adults.length,
-        room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
-        room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
-        room.adults?.length && room.children?.length && ', ',
-        room.children.length,
-        room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
-        room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
-    ]).join('');
-    const renderTravelerFields = (travelerValues, namePrefix, isAdult, roomIndex, travelerIndex) => {
-        if (useCompactForm) {
-            return (React__default.createElement("div", { className: "form__row" },
-                React__default.createElement(LabeledInput, { hasError: hasVisibleError(`${namePrefix}.age`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.AGE, required: true, name: `${namePrefix}.age`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.age })));
-        }
-        if (travellersSettings?.formFields?.length) {
-            return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "travelers-form__grid" }, travellersSettings.formFields.map((field, index) => (React__default.createElement("div", { key: index, className: `control control--${field.type}` }, getControl(field.type, travelerValues, `${namePrefix}.${field.type}`))))),
-                showWeightField && renderWeightControl(namePrefix, travelerValues),
-                showHeightField && renderHeightControl(namePrefix, travelerValues),
-                renderCustomFields(travelerValues, namePrefix)));
-        }
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: "form__row" }, renderGenderControl(`${namePrefix}.gender`, travelerValues)),
-            React__default.createElement("div", { className: "form__row" },
-                React__default.createElement(LabeledInput, { hasError: hasVisibleError(`${namePrefix}.firstName`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: `${namePrefix}.firstName`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
-                React__default.createElement(LabeledInput, { hasError: hasVisibleError(`${namePrefix}.lastName`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: `${namePrefix}.lastName`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
-                React__default.createElement(LabeledInput, { type: "date", hasError: hasVisibleError(`${namePrefix}.birthDate`), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: `${namePrefix}.birthDate`, onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })),
-            showWeightField && renderWeightControl(namePrefix, travelerValues),
-            showHeightField && renderHeightControl(namePrefix, travelerValues),
-            renderCustomFields(travelerValues, namePrefix),
-            travelersFirstStep && isAdult && formik.values.rooms[roomIndex].adults.length > 1 && (React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleRemoveTraveler(roomIndex, travelerIndex) }, translations.TRAVELERS_FORM.REMOVE_TRAVELER))));
+    const goPrevious = () => {
+        dispatch(setCurrentStep$1(travelersFirstStep ? OPTIONS_FORM_STEP : TRAVELERS_FORM_STEP));
     };
-    return (React__default.createElement("form", { className: "form form__travelers", name: "booking--travellers", id: "booking--travellers", noValidate: true, onSubmit: formik.handleSubmit, onReset: formik.handleReset },
-        React__default.createElement("div", { className: "form__travelers__wrapper" },
-            formik.values.rooms.map((room, roomIndex) => (React__default.createElement("div", { 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: () => handleRemoveRoom(roomIndex) }, "Verwijder reisgezelschap")))),
-                room.adults.map((travelerValues, index) => (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))),
-                    renderTravelerFields(travelerValues, `rooms[${roomIndex}].adults[${index}]`, true, roomIndex, index)))),
-                room.children.map((travelerValues, index) => (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" }, travelerValues.isBaby ? translations.TRAVELERS_FORM.BABY : translations.TRAVELERS_FORM.CHILD)),
-                    renderTravelerFields(travelerValues, `rooms[${roomIndex}].children[${index}]`, false, roomIndex, index)))),
-                !useCompactForm && travelersFirstStep && (React__default.createElement("div", { className: "form__region" },
-                    React__default.createElement("button", { type: "button", className: "cta cta--select", onClick: () => handleAddTraveler(roomIndex) }, translations.TRAVELERS_FORM.ADD_TRAVELER)))))),
-            !useCompactForm && (bookingType !== 'b2b' || travellersSettings?.mainBookerFormFields?.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?.firstName, mainBooker?.lastName]).join(' '), formatBirthDate$1(mainBooker?.birthDate)]).join(', '))),
-                travellersSettings?.mainBookerFormFields?.length ? (React__default.createElement("div", { className: "main-booker-form__grid" }, travellersSettings.mainBookerFormFields.map((field, index) => (React__default.createElement("div", { key: index, className: `control control--${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: countryOptions })))),
+    const translations = useSelector(selectTranslations);
+    return (React__default.createElement(React__default.Fragment, null,
+        isSubmitting && (settings.loaderComponent || React__default.createElement(Loader, null)),
+        !isSubmitting && (React__default.createElement("form", { className: "form", name: "booking--summary", id: "booking--summary", onSubmit: handleSubmit },
+            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(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 })))))) : !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("label", { className: "checkbox__label" },
-                            React__default.createElement("input", { type: "checkbox", name: "booking--mainbooker", checked: showAgents, onChange: () => 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 }))))))),
-        !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((key) => (React__default.createElement("li", { key: key }, get(flatErrors, key))))))))),
-        travelersFirstStep && (React__default.createElement("div", { className: "booking__navigator" },
-            React__default.createElement("button", { type: "button", className: "cta cta--select", onClick: handleAddRoom }, translations.TRAVELERS_FORM.ADD_ROOM))),
-        React__default.createElement("div", { className: "booking__navigator" },
-            renderPreviousButton?.(),
-            React__default.createElement("button", { type: "submit", title: translations.STEPS.NEXT, className: 'cta' + (isUnavailable ? ' cta--disabled' : '') }, translations.STEPS.NEXT))));
+                        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)))),
+                    rooms.map((r, rIndex) => (React__default.createElement("div", { className: "form__row", key: rIndex },
+                        React__default.createElement("div", { className: "form__group" },
+                            React__default.createElement("div", { className: "form__region-header" },
+                                React__default.createElement("h5", { className: "form__region-heading" }, rooms.length > 1 ? `${translations.SHARED.ROOM} ${rIndex + 1}` : translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP),
+                                React__default.createElement("p", { className: "form__region-label" }, `${r.adults.length + r.children.length} ${r.adults.length + r.children.length === 1 ? translations.SUMMARY.TRAVELER : translations.SUMMARY.TRAVELERS}: ${compact([
+                                    r.adults.length,
+                                    r.adults.length === 1 && ` ${translations.SUMMARY.ADULT}`,
+                                    r.adults.length > 1 && ` ${translations.SUMMARY.ADULTS}`,
+                                    r.adults && r.adults.length && r.children && r.children.length && ', ',
+                                    r.children.length,
+                                    r.children.length === 1 && ` ${translations.SUMMARY.CHILD}`,
+                                    r.children.length > 1 && ` ${translations.SUMMARY.CHILDREN}`
+                                ]).join('')}`))),
+                        [...r.adults, ...r.children].map((traveler) => {
+                            const 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" }, traveler.birthDate.split('-').reverse().join('/')),
+                                    isMainBooker && (React__default.createElement(React__default.Fragment, null,
+                                        travelerFormValues?.street && (React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement("li", { className: "list__item" }, `${travelerFormValues?.street} ${compact([
+                                                travelerFormValues?.houseNumber,
+                                                travelerFormValues?.box
+                                            ]).join(' ')}, ${travelerFormValues?.zipCode} ${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" }, activeOption?.serviceType == build.ServiceType.flight ? (React__default.createElement(React__default.Fragment, null,
+                                departureFlightMetaData && React__default.createElement(SummaryFlight, { flightMetaData: departureFlightMetaData, header: translations.SIDEBAR.DEPARTURE_FLIGHT }),
+                                returnFlightMetaData && React__default.createElement(SummaryFlight, { flightMetaData: returnFlightMetaData, header: translations.SIDEBAR.ARRIVAL_FLIGHT }))) : (React__default.createElement(React__default.Fragment, null, activeOption?.rooms
+                                .flatMap((r) => r.options)
+                                .filter((x) => x.isSelected)
+                                .map((roomOption, roomOptionIndex) => (React__default.createElement(React__default.Fragment, { key: roomOptionIndex },
+                                React__default.createElement("li", null,
+                                    React__default.createElement("h6", null, roomOption?.productName),
+                                    React__default.createElement("ul", null,
+                                        React__default.createElement("li", { className: "list__item" },
+                                            roomOption?.accommodationName,
+                                            !isNil(roomOption?.regimeName) && ', ',
+                                            roomOption?.regimeName)),
+                                    React__default.createElement("p", null,
+                                        "(",
+                                        roomOption?.from === roomOption?.to ? (getDateText(roomOption?.from)) : (React__default.createElement(React__default.Fragment, null,
+                                            getDateText(roomOption?.from),
+                                            " > ",
+                                            getDateText(roomOption?.to))),
+                                        ")")),
+                                !isEmpty$1(activeOption?.groups) &&
+                                    activeOption?.groups.map((x, i) => {
+                                        if (!x.options.some((y) => y.isSelected))
+                                            return;
+                                        return React__default.createElement(SummaryPerBookingOptionGroup, { key: i, group: x });
+                                    }),
+                                !isEmpty$1(activeOption?.optionUnits) && activeOption?.optionUnits.map((x, i) => React__default.createElement(SummaryBookingOptionUnit, { key: i, unit: x })),
+                                !isEmpty$1(activeOption?.optionPax) && activeOption?.optionPax.map((x, i) => React__default.createElement(SummaryBookingOptionPax, { key: i, pax: x })),
+                                packageDetails?.outwardFlights &&
+                                    packageDetails.outwardFlights
+                                        .filter((x) => x.isSelected)
+                                        .map((flight, i) => (React__default.createElement(SummaryFlight, { key: i, flightMetaData: flight.flightMetaData, header: translations.SIDEBAR.DEPARTURE_FLIGHT }))),
+                                packageDetails?.returnFlights &&
+                                    packageDetails.returnFlights
+                                        .filter((x) => x.isSelected)
+                                        .map((flight, i) => (React__default.createElement(SummaryFlight, { key: i, flightMetaData: flight.flightMetaData, header: translations.SIDEBAR.ARRIVAL_FLIGHT })))))))))))),
+                settings.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", defaultValue: voucher.code, onChange: (e) => setVoucher({ code: e.target.value }) }),
+                            React__default.createElement("button", { type: "button", className: buildClassName(['cta', !voucher.code && 'cta--disabled']), onClick: (e) => handleValidateVoucher() }, 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: handleAddVoucher }, 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$1(bookRequest?.payload.voucherCodes) &&
+                            bookRequest?.payload.voucherCodes?.map((y, i) => (React__default.createElement("li", { key: i },
+                                React__default.createElement("div", { className: "info-message__voucher__list" },
+                                    y,
+                                    ' ',
+                                    React__default.createElement("button", { type: "button", className: "cta--add-remove", onClick: (e) => handleRemoveVoucher(y) },
+                                        React__default.createElement(Icon, { height: 16, name: "ui-trashcan" })))))))))),
+                !isEmpty$1(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),
+                                    React__default.createElement(React__default.Fragment, null,
+                                        uniqBy(notifications.filter((x) => !x.hasToBeConfirmed), 'id').map((notification) => (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.filter((x) => x.hasToBeConfirmed), 'id').map((notification) => (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: (e) => handleNotificationChange(notification.id, e.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", defaultValue: remarks, onChange: (e) => handleRemarksChange(e.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),
+                                    settings.customValidateText ? (React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                            __html: settings.customValidateText
+                                        } })) : (React__default.createElement(React__default.Fragment, null,
+                                        React__default.createElement("p", null, settings.isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING),
+                                        settings.allowOption && React__default.createElement("p", null, translations.SUMMARY.VALIDATE_TEXT_OPTION))),
+                                    checkboxes &&
+                                        checkboxes.map((checkbox) => (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: (e) => handleCheckboxChange(checkbox.id, e.target.checked) }),
+                                                React__default.createElement("span", { className: "checkbox__label-text", dangerouslySetInnerHTML: {
+                                                        __html: checkbox.text
+                                                    } }))))))))))),
+            React__default.createElement("div", { className: "booking__navigator" },
+                settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${travelersFirstStep ? settings.options.pathSuffix : settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
+                settings.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: settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "default" }, settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING))))));
 };
 
 function isValidEmail(email) {
@@ -23813,7 +24306,7 @@ function getAge(birthDateText, startDateText) {
     }
     return age;
 }
-const validateForm$1 = (values, agentRequired, bookingType, translations, formFields, mainBookerFormFields, maxChildAge = CHILD_MAX_AGE, maxBabyAge = BABY_MAX_AGE, paxCustomFields = []) => {
+const validateForm$1 = (values, agentRequired, bookingType, translations, formFields, mainBookerFormFields, maxChildAge = CHILD_MAX_AGE, maxBabyAge = BABY_MAX_AGE, paxFields = []) => {
     const errors = {};
     const isFormFieldPresent = (type) => {
         return formFields?.some((f) => f.type === type) ?? true;
@@ -23851,7 +24344,7 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
     };
     const validateRequiredCustomFields = (traveler, path, room, pax) => {
         const isMainBooker = traveler.id === values.mainBookerId;
-        const requiredFields = getApplicablePaxCustomFields(paxCustomFields, isMainBooker).filter((f) => f.isRequired);
+        const requiredFields = getApplicablePaxCustomFields(paxFields, isMainBooker).filter((f) => f.isRequired);
         requiredFields.forEach((field) => {
             const fieldIndex = traveler.customFields?.findIndex((c) => c.customFieldConfigurationId === field.customFieldConfigurationId) ?? -1;
             if (fieldIndex < 0)
@@ -23861,6 +24354,19 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             }
         });
     };
+    // Excludes the 4 core fields, which are already validated unconditionally below.
+    const validateRequiredBuiltInFields = (traveler, path, room, pax) => {
+        const isMainBooker = traveler.id === values.mainBookerId;
+        const requiredFields = getApplicableBuiltInPaxFields(paxFields, isMainBooker).filter((f) => f.isRequired && !CORE_FIELD_NAMES.has(f.fieldName));
+        requiredFields.forEach((field) => {
+            const fieldPath = BUILT_IN_FIELD_PATHS[field.fieldName];
+            if (!fieldPath)
+                return;
+            if (isEmpty$1(get(traveler, fieldPath))) {
+                set(errors, `${path}.${fieldPath}`, formatTravelerField(room, pax, field.fieldName));
+            }
+        });
+    };
     values.rooms.forEach((r, rIndex) => r.adults.forEach((adult, index) => {
         if (isEmpty$1(adult.gender) && isFormFieldPresent('gender')) {
             set(errors, `rooms[${rIndex}].adults[${index}].gender`, formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.GENDER));
@@ -23894,6 +24400,7 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             }
         }
         validateRequiredCustomFields(adult, `rooms[${rIndex}].adults[${index}]`, rIndex + 1, index + 1);
+        validateRequiredBuiltInFields(adult, `rooms[${rIndex}].adults[${index}]`, rIndex + 1, index + 1);
     }));
     values.rooms.forEach((r, rIndex) => r.children.forEach((child, index) => {
         if (isEmpty$1(child.gender) && isFormFieldPresent('gender')) {
@@ -23936,6 +24443,7 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             }
         }
         validateRequiredCustomFields(child, `rooms[${rIndex}].children[${index}]`, rIndex + 1, r.adults.length + index + 1);
+        validateRequiredBuiltInFields(child, `rooms[${rIndex}].children[${index}]`, rIndex + 1, r.adults.length + index + 1);
     }));
     if (values.mainBookerId < 0) {
         errors.mainBookerId = translations.TRAVELERS_FORM.VALIDATION.NO_MAIN_BOOKER_SELECTED;
@@ -24003,15 +24511,13 @@ const TravelersForm = () => {
     const bookingAttributes = useSelector(selectBookingAttributes);
     const hasMounted = useSelector(selectHasMounted);
     const countries = useSelector(selectCountries);
-    const paxCustomFields = useSelector(selectPaxCustomFields);
+    const paxFields = useSelector(selectPaxFields);
     const inFlight = useRef(false);
     const pendingRefetch = useRef(false);
     const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
     const showAllCountries = !!settings.travellers.showAllCountries;
-    const showWeightField = !!settings.travellers.showWeightField;
-    const showHeightField = !!settings.travellers.showHeightField;
     const initialValues = useSelector(selectTravelersFormValues) ??
-        createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm, settings.maxBabyAge, paxCustomFields);
+        createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm, settings.maxBabyAge, paxFields);
     const [showAgentSelection, setShowAgentSelection] = useState(!settings.agentAdressId && !settings.hideAgentSelection);
     const formik = useFormik({
         initialValues,
@@ -24021,7 +24527,7 @@ const TravelersForm = () => {
             // The travel dates are captured into initialValues once and then persisted in
             // redux, so validating against the values would use the dates of whichever
             // package option was selected first. Age checks need the current ones.
-            { ...values, startDate, endDate }, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields, settings.maxChildAge, settings.maxBabyAge, paxCustomFields),
+            { ...values, startDate, endDate }, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields, settings.maxChildAge, settings.maxBabyAge, paxFields),
         onSubmit: (values) => {
             dispatch(setFormValues(values));
             if (useCompactForm) {
@@ -24104,7 +24610,7 @@ const TravelersForm = () => {
         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, showWeightField: showWeightField, showHeightField: showHeightField, paxCustomFields: paxCustomFields, showAgentSelection: showAgentSelection, initialShowAgents: settings.agentRequired ?? false, onBookingTypeChange: (nextBookingType) => dispatch(setBookingType(nextBookingType)), renderPreviousButton: () => !travelersFirstStep && settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep$1(OPTIONS_FORM_STEP)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : !travelersFirstStep ? (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : null }));
+    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, paxFields: paxFields, showAgentSelection: showAgentSelection, initialShowAgents: settings.agentRequired ?? false, onBookingTypeChange: (nextBookingType) => dispatch(setBookingType(nextBookingType)), renderPreviousButton: () => !travelersFirstStep && settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep$1(OPTIONS_FORM_STEP)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : !travelersFirstStep ? (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : null }));
 };
 
 const Booking = ({ productCode, productName, thumbnailUrl }) => {
@@ -28251,6 +28757,22 @@ const getPackagingRequestRoomsFromBookingRooms = (rooms) => {
     });
 };
 
+// Administrative service lines (fees, insurances, reductions, ...) live on the entry but say
+// nothing about the journey itself, so the itinerary never draws them.
+const HIDDEN_ITINERARY_SERVICE_TYPES = new Set([
+    build.ServiceType.insurance,
+    build.ServiceType.extraService,
+    build.ServiceType.serviceFee,
+    build.ServiceType.gift,
+    build.ServiceType.reduction,
+    build.ServiceType.fee,
+    build.ServiceType.visum,
+    build.ServiceType.voucher,
+    build.ServiceType.specialServices
+]);
+const isMeaningfulItineraryLine = (line) => {
+    return !HIDDEN_ITINERARY_SERVICE_TYPES.has(line.serviceType ?? -1);
+};
 const getFlightLines = (flight) => {
     return flight?.flightInformation?.flightLines ?? [];
 };
@@ -28705,6 +29227,8 @@ const applyResultToLine = (line, result, roomIndex = 0) => {
         isChanged: true
     };
 };
+const buildNodeSelectionLines = (item, result, bookedMode) => bookedMode && matchesCode(result, item.node.code ?? '') ? item.lines : applyResultToLines(item.lines, result);
+const buildFlightSelectionLine = (item, flight, bookedMode) => bookedMode && flight.outwardGuid === item.line.guid ? item.line : applyFlightToLine(item.line, flight);
 const toDateOnlyUtcString = (value) => {
     const date = new Date(value);
     return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).toISOString();
@@ -28762,11 +29286,21 @@ const buildTrajectFlightRequest = ({ node, line }, context, pax) => ({
  * mapper gave them. This swaps in the guid of whatever each line resolved onto, leaving the
  * lines the traveller added themselves alone — those were built from a search result and already
  * carry the right one.
+ *
+ * A booked entry (the traject was rebuilt from a magic-link entry) is the other way around: its
+ * lines live in the dossier under their own guids, and only a line the traveller actually swapped
+ * (isChanged) exists in the search cache. Swapping an untouched line's guid would orphan it —
+ * the backend drops the dossier line and finds nothing to add — so those keep theirs.
  */
 const withCachedEntryLineGuids = (entry, trajectEntry, nodeAvailability, flightAvailability) => {
     const cachedGuids = new Map();
+    const bookedMode = !!trajectEntry.entry.magicLink;
+    const editableByGuid = new Map((entry.lines ?? []).map((line) => [line.guid, line]));
+    const keepsOwnGuid = (guid) => bookedMode && !editableByGuid.get(guid)?.isChanged;
     getTrajectNodesWithLines(trajectEntry).forEach((item) => {
         if (isTrajectFlightNode(item.node)) {
+            if (keepsOwnGuid(item.line.guid))
+                return;
             // A flight search caches the outward line under the guid it reports as outwardGuid.
             const guid = flightAvailability[item.line.guid]?.selectedGuid;
             if (guid)
@@ -28779,6 +29313,8 @@ const withCachedEntryLineGuids = (entry, trajectEntry, nodeAvailability, flightA
             return;
         // Room i took option i when the result was stamped on, so it takes option i here too.
         item.lines.forEach((line, index) => {
+            if (keepsOwnGuid(line.guid))
+                return;
             const guid = getOptionForRoom(result, index)?.guid;
             if (guid)
                 cachedGuids.set(line.guid, guid);
@@ -28842,7 +29378,7 @@ const TrajectItinerary = ({ trajectEntry, packagingEntry, translations }) => {
             return { node, lines };
         });
         const claimed = new Set(nodes.flatMap((item) => item.lines.map((line) => line.guid)));
-        const extras = (packagingEntry.lines ?? []).filter((line) => !claimed.has(line.guid));
+        const extras = (packagingEntry.lines ?? []).filter((line) => !claimed.has(line.guid)).filter(isMeaningfulItineraryLine);
         if (!extras.length)
             return nodes;
         const dayOrderOf = (date) => trajectEntry.traject.days.find((day) => isSameDay(new Date(day.date), new Date(date)))?.order ??
@@ -29019,6 +29555,195 @@ const TrajectItinerary = ({ trajectEntry, packagingEntry, translations }) => {
     })));
 };
 
+/**
+ * A booked entry opened through its magic link knows nothing about the traject it may once have
+ * been composed from — the dossier only keeps the lines. To give it the same day-by-day services
+ * screen a traject gets, the traject structure is rebuilt from those lines: every booked service
+ * becomes a node whose one "alternative" is the booked product itself, and the days span the trip.
+ *
+ * The synthesized response keeps the entry untouched (magic link included), which is also how the
+ * rest of the component tells this mode apart from a real traject: see isBookedEntryTraject.
+ */
+const isBookedEntryTraject = (trajectEntry) => !!trajectEntry?.entry?.magicLink;
+const NODE_SERVICE_TYPES = new Set([ACCOMMODATION_SERVICE_TYPE, EXCURSION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE]);
+/**
+ * A room or option line joins its parent's node; a flight line never does — an outward and its
+ * return are separate legs of the trip even though the return points at the outward as parent.
+ */
+const groupNodeLines = (lines) => {
+    const groups = [];
+    const groupByGuid = new Map();
+    lines.forEach((line) => {
+        const parentGroup = line.serviceType !== FLIGHT_SERVICE_TYPE && line.parentGuid ? groupByGuid.get(line.parentGuid) : undefined;
+        if (parentGroup) {
+            parentGroup.push(line);
+            return;
+        }
+        const group = [line];
+        groups.push(group);
+        groupByGuid.set(line.guid, group);
+    });
+    return groups;
+};
+const buildBookedTrajectEntry = (entry) => {
+    const lines = (entry.lines ?? []).filter((line) => NODE_SERVICE_TYPES.has(line.serviceType));
+    const froms = lines.map((line) => new Date(line.from).getTime());
+    const tos = lines.map((line) => new Date(line.to).getTime());
+    const start = froms.length ? new Date(Math.min(...froms)) : new Date();
+    const end = tos.length ? new Date(Math.max(...tos)) : start;
+    const dayCount = Math.max(differenceInCalendarDays(end, start), 0) + 1;
+    const days = Array.from({ length: dayCount }, (_, order) => ({
+        order,
+        name: '',
+        date: toDateOnlyString(addDays(start, order))
+    }));
+    const nodes = groupNodeLines(lines).map((groupLines, index) => {
+        const line = groupLines[0];
+        const flightLines = line.flightInformation?.flightLines ?? [];
+        return {
+            lineGuid: line.guid,
+            lineGuids: groupLines.map((x) => x.guid),
+            nodeId: index + 1,
+            dayOrder: Math.max(differenceInCalendarDays(new Date(line.from), start), 0),
+            order: line.order,
+            name: line.productName,
+            serviceType: line.serviceType,
+            trajectNodeType: REGULAR_TRAJECT_NODE_TYPE,
+            requirementType: 0,
+            contentSource: 0,
+            code: line.productCode,
+            preferredAccommodationCode: line.productCode,
+            preferredAccommodationName: line.productName,
+            alternatives: [],
+            departureAirportCode: first(flightLines)?.departureAirportCode ?? null,
+            arrivalAirportCode: last(flightLines)?.arrivalAirportCode ?? null,
+            duration: 0,
+            durationType: 0,
+            from: line.from,
+            to: line.to
+        };
+    });
+    return {
+        entry,
+        traject: {
+            id: 0,
+            name: entry.dossierNumber ?? '',
+            imageUrl: null,
+            startDate: days[0]?.date ?? toDateOnlyString(start),
+            endDate: last(days)?.date ?? toDateOnlyString(end),
+            durationInDays: days.length,
+            includeGroupHotelAlternatives: false,
+            days
+        },
+        nodes
+    };
+};
+/**
+ * The card for a booked service when no search result carries it any more (sold out, delisted).
+ * Rendered from the line, so the traveller still sees what they booked; price 0 makes the card
+ * leave its price out — the paid price lives in the price details, not on the line.
+ */
+const buildBookedNodeResult = (node, lines) => {
+    const line = lines[0];
+    return {
+        code: line.productCode,
+        name: line.productName,
+        serviceType: line.serviceType,
+        countryId: line.country?.id ?? null,
+        countryName: line.country?.name ?? '',
+        regionId: line.region?.id ?? null,
+        regionName: line.region?.name ?? '',
+        oordId: line.oord?.id ?? null,
+        oordName: line.oord?.name ?? '',
+        locationId: line.location?.id ?? null,
+        locationName: line.location?.name ?? '',
+        latitude: line.latitude ?? null,
+        longitude: line.longitude ?? null,
+        price: 0,
+        averagePricePerPerson: 0,
+        originalPrice: 0,
+        originalAveragePricePerPerson: 0,
+        currencyCode: 'EUR',
+        fromDate: line.from,
+        toDate: line.to,
+        contents: '',
+        rooms: lines.map((roomLine) => ({
+            options: [
+                {
+                    price: 0,
+                    originalPrice: 0,
+                    accommodationCode: roomLine.accommodationCode ?? '',
+                    accommodationName: roomLine.accommodationName ?? '',
+                    regimeCode: roomLine.regimeCode ?? '',
+                    regimeName: roomLine.regimeName ?? '',
+                    isSelected: true,
+                    guid: roomLine.guid,
+                    paxIds: (roomLine.pax ?? []).map((pax) => pax.paxId)
+                }
+            ]
+        }))
+    };
+};
+/**
+ * The flight search API serializes these as ISO strings, whatever the type declaration says, and
+ * the store must stay serializable — so the synthesized segments carry the same string form.
+ */
+const toDateTime = (date, time) => `${toDateOnlyString(date)}T${time || '00:00:00'}`;
+/** The booked flight as a flight result, so the card that shows it is the card the search results use. */
+const buildBookedFlightResult = (line) => {
+    const flightLines = line.flightInformation?.flightLines ?? [];
+    const segments = flightLines.map((flightLine, index) => ({
+        order: index,
+        flightNumber: flightLine.flightNumber,
+        operatingFlightNumber: flightLine.operatingFlightNumber ?? flightLine.flightNumber,
+        marketingAirlineCode: flightLine.airlineCode,
+        marketingAirlineName: flightLine.airlineDescription,
+        operatingAirlineCode: flightLine.operatingAirlineCode ?? flightLine.airlineCode,
+        operatingAirlineName: flightLine.operatingAirlineDescription ?? flightLine.airlineDescription,
+        departureAirportCode: flightLine.departureAirportCode,
+        departureAirportName: flightLine.departureAirportDescription,
+        arrivalAirportCode: flightLine.arrivalAirportCode,
+        arrivalAirportName: flightLine.arrivalAirportDescription,
+        departureDateTime: toDateTime(flightLine.departureDate, flightLine.departureTime),
+        arrivalDateTime: toDateTime(flightLine.arrivalDate, flightLine.arrivalTime),
+        bookingClassCode: '',
+        travelClass: 0,
+        durationInTicks: flightLine.durationInTicks ?? 0
+    }));
+    const firstSegment = first(segments);
+    const lastSegment = last(segments);
+    // .NET ticks are 100ns, so a millisecond is 10 000 of them.
+    const durationInTicks = firstSegment && lastSegment ? (new Date(lastSegment.arrivalDateTime).getTime() - new Date(firstSegment.departureDateTime).getTime()) * 10_000 : 0;
+    return {
+        code: line.productCode,
+        name: line.productName,
+        serviceType: line.serviceType,
+        countryName: '',
+        regionName: '',
+        oordName: '',
+        locationName: '',
+        price: 0,
+        averagePricePerPerson: 0,
+        originalPrice: 0,
+        originalAveragePricePerPerson: 0,
+        currencyCode: 'EUR',
+        fromDate: line.from,
+        toDate: line.to,
+        flightRouteId: line.guid,
+        airlineCode: firstSegment?.marketingAirlineCode ?? '',
+        airlineName: firstSegment?.marketingAirlineName ?? '',
+        isLuggageIncluded: false,
+        luggageInfo: '',
+        outwardGuid: line.guid,
+        outward: { code: line.productCode, fareType: 0, durationInTicks, segments },
+        returnGuid: '',
+        return: { code: '', fareType: 0, durationInTicks: 0, segments: [] },
+        source: 0,
+        provider: '',
+        paxes: []
+    };
+};
+
 const getSegmentIcon = (segment) => {
     switch (segment.serviceType) {
         case 3:
@@ -29058,14 +29783,14 @@ const SERVICE_TYPE_PRIORITY = {
 const getServiceTypePriority = (serviceType) => {
     return SERVICE_TYPE_PRIORITY[serviceType ?? -1] ?? 2;
 };
-const Itinerary = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
+const Itinerary = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation, onSaveEntry }) => {
     const context = useContext(SearchResultsConfigurationContext);
     const translations = getTranslations(context?.languageCode ?? 'en-GB');
     const { editablePackagingEntry, priceDetails, trajectItineraryView } = useSelector((state) => state.searchResults);
     const dispatch = useDispatch();
     const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
     const sortedLines = useMemo(() => {
-        return [...(packagingEntry?.lines ?? [])].sort((a, b) => {
+        return (packagingEntry?.lines ?? []).filter(isMeaningfulItineraryLine).sort((a, b) => {
             const dateA = getDateOnlyTime(a.from);
             const dateB = getDateOnlyTime(b.from);
             if (dateA !== dateB) {
@@ -29136,7 +29861,7 @@ const Itinerary = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation })
                                 " ",
                                 translations.SRP.TOTAL,
                                 ")"))),
-                    React__default.createElement("button", { className: "cta", onClick: handleConfirm }, translations.QSM.CONFIRM),
+                    isBookedEntryTraject(context?.trajectEntry) ? (React__default.createElement("button", { className: "cta", onClick: onSaveEntry, disabled: !(packagingEntry?.lines ?? []).some((line) => line.isChanged) }, translations.SHARED.SAVE)) : (React__default.createElement("button", { className: "cta", onClick: handleConfirm }, translations.QSM.CONFIRM)),
                     !!context?.trajectEntry && (React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleTrajectView(!trajectItineraryView) }, trajectItineraryView ? translations.SRP.SHOW_SERVICES : translations.SRP.VIEW_FULL_ITINERARY))))),
                 React__default.createElement("div", { className: "search__filter__itinerary" },
                     React__default.createElement("p", null, translations.SRP.DAY_BY_DAY),
@@ -31193,7 +31918,7 @@ const selectSelectedCombinationFlight = createSelector([selectPackagingFlightRes
     return (packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey) ?? null);
 });
 
-const IndependentFlightOption = ({ item, onSelect, guid, selectedGuid, isOutward, showSelectedState, currentSelectedPrice, price }) => {
+const IndependentFlightOption = ({ item, onSelect, guid, selectedGuid, isOutward, showSelectedState, currentSelectedPrice, price, selectLabel, selectedLabel }) => {
     const context = useContext(SearchResultsConfigurationContext);
     const language = context?.languageCode ?? 'en-GB';
     const translations = getTranslations(language);
@@ -31218,7 +31943,7 @@ const IndependentFlightOption = ({ item, onSelect, guid, selectedGuid, isOutward
                                             priceDifference > 0 ? '+' : '-',
                                             "\u00A0",
                                             formatPrice$3(Math.abs(priceDifference), 'EUR', context?.languageCode ?? 'en-GB'))))),
-                                    React__default.createElement("button", { type: "button", className: `cta ${selectedGuid === guid ? 'cta--selected' : 'cta--select'}`, onClick: () => onSelect?.() }, selectedGuid === guid ? 'Selected' : 'Select')))),
+                                    React__default.createElement("button", { type: "button", className: `cta ${selectedGuid === guid ? 'cta--selected' : 'cta--select'}`, onClick: () => onSelect?.() }, selectedGuid === guid ? selectedLabel ?? translations.SHARED.SELECTED : selectLabel ?? translations.SHARED.SELECT)))),
                         React__default.createElement("div", { className: "flight__flight" },
                             React__default.createElement("div", { className: "flight__flight__container" },
                                 React__default.createElement("div", { className: "flight__flight__wrapper" },
@@ -31852,7 +32577,7 @@ const TrajectNodeCard = ({ node, result, isSelected, languageCode, translations,
     const image = candidate?.imageUrl ?? null;
     const description = toPlainText(candidate?.description);
     const title = candidate?.name ?? result.name;
-    const priceBlock = (React__default.createElement("div", { className: "search__result-card__price__wrapper" },
+    const priceBlock = result.price > 0 && (React__default.createElement("div", { className: "search__result-card__price__wrapper" },
         React__default.createElement("span", { className: "search__result-card__price__label" }, translations?.SHARED.TOTAL_PRICE),
         React__default.createElement("span", { className: "search__result-card__price" }, price)));
     const canEditOptions = isSelected && !!onEditOptions && (result.rooms ?? []).some((room) => (room.options ?? []).length > 1);
@@ -31905,6 +32630,7 @@ const TrajectResultsFlyIn = ({ isLoading }) => {
     const translations = getTranslations(context?.languageCode ?? 'en-GB');
     const { trajectNodeAvailability, trajectEditLineGuid } = useSelector((state) => state.searchResults);
     const trajectEntry = context?.trajectEntry;
+    const bookedMode = isBookedEntryTraject(trajectEntry);
     const item = useMemo(() => {
         if (!trajectEntry || !trajectEditLineGuid)
             return null;
@@ -31924,7 +32650,7 @@ const TrajectResultsFlyIn = ({ isLoading }) => {
         if (!result)
             return;
         dispatch(setTrajectNodeSelection({ lineGuid: item.line.guid, code }));
-        applyResultToLines(item.lines, result).forEach((line) => dispatch(updateEditableEntryLine(line)));
+        buildNodeSelectionLines(item, result, bookedMode).forEach((line) => dispatch(updateEditableEntryLine(line)));
         dispatch(setTrajectEditLineGuid(null));
         dispatch(setFlyInIsOpen(false));
     };
@@ -31937,7 +32663,7 @@ const TrajectResultsFlyIn = ({ isLoading }) => {
                 ordered.length,
                 "\u00A0",
                 translations.SRP.TOTAL_RESULTS_LABEL)),
-        ordered.length === 0 ? (React__default.createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS)) : (React__default.createElement("div", { className: "search__results__cards" }, ordered.map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: item.node, result: result, isSelected: result.code === availability?.selectedCode, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(result.code), showNights: item.node.serviceType === ACCOMMODATION_SERVICE_TYPE })))))));
+        ordered.length === 0 ? (React__default.createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS)) : (React__default.createElement("div", { className: "search__results__cards" }, ordered.map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: item.node, result: result, isSelected: result.code === availability?.selectedCode, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(result.code), showNights: item.node.serviceType === ACCOMMODATION_SERVICE_TYPE, selectedLabel: bookedMode && matchesCode(result, item.node.code ?? '') ? translations.SHARED.BOOKED : undefined })))))));
 };
 
 /**
@@ -31999,6 +32725,7 @@ const TrajectDayActivitiesFlyIn = ({ isLoading }) => {
     const translations = getTranslations(context?.languageCode ?? 'en-GB');
     const { trajectNodeAvailability, trajectDaySuggestions, trajectActivitiesDayOrder, editablePackagingEntry } = useSelector((state) => state.searchResults);
     const trajectEntry = context?.trajectEntry;
+    const bookedMode = isBookedEntryTraject(trajectEntry);
     const items = useMemo(() => {
         if (!trajectEntry || trajectActivitiesDayOrder === null)
             return [];
@@ -32031,7 +32758,7 @@ const TrajectDayActivitiesFlyIn = ({ isLoading }) => {
         if (!item)
             return;
         dispatch(setTrajectNodeSelection({ lineGuid: item.line.guid, code: result.code }));
-        applyResultToLines(item.lines, result).forEach((line) => dispatch(updateEditableEntryLine(line)));
+        buildNodeSelectionLines(item, result, bookedMode).forEach((line) => dispatch(updateEditableEntryLine(line)));
         dispatch(setTrajectActivitiesDayOrder(null));
         dispatch(setFlyInIsOpen(false));
     };
@@ -32047,7 +32774,8 @@ const TrajectDayActivitiesFlyIn = ({ isLoading }) => {
         cards.length === 0 ? (React__default.createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS)) : (React__default.createElement("div", { className: "search__results__cards" }, cards.map((card) => {
             const { result, item } = card;
             const isSelected = item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedLines(result).length > 0;
-            return (React__default.createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(card) : handleToggle(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? undefined : translations.SRP.REMOVE }));
+            const isBookedCard = !!item && bookedMode && matchesCode(result, item.node.code ?? '');
+            return (React__default.createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(card) : handleToggle(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? (isBookedCard ? translations.SHARED.BOOKED : undefined) : translations.SRP.REMOVE }));
         })))));
 };
 
@@ -33657,6 +34385,10 @@ const getUniqueItems = (items = []) => {
         return true;
     });
 };
+const isMeaningfulItem = (item, lines) => {
+    const line = lines.find((l) => l.guid === item.itemGuid);
+    return !line || isMeaningfulItineraryLine(line);
+};
 const findAccommodationForDay = (nodes, currentDay) => {
     for (const node of nodes ?? []) {
         const { startDay } = getNodeDayRange(node);
@@ -33738,7 +34470,7 @@ const buildItineraryHtml = (itinerary, translations, lines) => {
         const { startDay } = getNodeDayRange(node);
         const day = node.startDate ? format$2(node.startDate, 'd') : null;
         const month = node.startDate ? format$2(node.startDate, 'MMM') : null;
-        const uniqueItems = getUniqueItems(node.items ?? []);
+        const uniqueItems = getUniqueItems(node.items ?? []).filter((item) => isMeaningfulItem(item, lines));
         const hasItems = uniqueItems.length > 0;
         const hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
         const activeAccommodation = findAccommodationForDay(allNodes, startDay);
@@ -33782,11 +34514,12 @@ const buildItineraryHtml = (itinerary, translations, lines) => {
       `;
     })
         .join('');
-    const defaultItemsHtml = itinerary.defaultItems && itinerary.defaultItems.length > 0
+    const defaultItems = getUniqueItems(itinerary.defaultItems ?? []).filter((item) => isMeaningfulItem(item, lines));
+    const defaultItemsHtml = defaultItems.length > 0
         ? `
         <section class="itinerary-default-items">
           <h2 class="itinerary-default-items__title">Algemene info</h2>
-          ${getUniqueItems(itinerary.defaultItems)
+          ${defaultItems
             .map((item) => `
                 <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
                   ${hasVisibleContent(item.contents)
@@ -34445,7 +35178,7 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
     const formik = useFormik({
         initialValues,
         enableReinitialize: true,
-        validate: (values) => validateForm$1(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
+        validate: (values) => validateForm$1(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields, undefined, undefined, editablePackagingEntry?.paxFields ?? []),
         onSubmit: (values) => {
             if (!editablePackagingEntry)
                 return;
@@ -34530,7 +35263,7 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
                         ".\u00A0",
                         stepLabels[step])) },
                     isConfirmationPage && isLoading && React__default.createElement(Spinner, { label: translations.SUMMARY.PROCESS_BOOKING }),
-                    currentStep === 0 && (React__default.createElement(SharedTravelersForm, { formik: formik, translations: translations, travellersSettings: travellersSettings, countries: countries, travelersFirstStep: false, isUnavailable: false, useCompactForm: false, showAgentSelection: false })),
+                    currentStep === 0 && (React__default.createElement(SharedTravelersForm, { formik: formik, translations: translations, travellersSettings: travellersSettings, countries: countries, travelersFirstStep: false, isUnavailable: false, useCompactForm: false, showAgentSelection: false, paxFields: editablePackagingEntry?.paxFields ?? [] })),
                     currentStep === 1 && (React__default.createElement(SharedSummary, { translations: translations, travelerFormValues: formik.values, isSubmitting: isSubmitting, skipPayment: !context.generatePaymentUrl, userValidated: userValidated, remarks: remarks, enableVoucher: false, allowOption: false, isOffer: false, onUserValidatedChange: setUserValidated, onRemarksChange: setRemarks, onSubmit: handleSummarySubmit, renderOptions: () => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails, translations, selectedPackagingAccoResult?.currencyCode), renderPreviousButton: () => (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep(0)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) })),
                     currentStep === 2 && (React__default.createElement(SharedConfirmation, { bookingNumber: bookingNumber ?? editablePackagingEntry?.dossierNumber ?? '', isOption: false, isOffer: false, translations: translations.CONFIRMATION })),
                     currentStep === 3 && React__default.createElement("div", null))),
@@ -34594,6 +35327,7 @@ const TrajectResults = ({ isLoading }) => {
     const locale = getLocale(context?.languageCode ?? 'en-GB');
     const { trajectNodeAvailability, trajectFlightAvailability, trajectDaySuggestions, editablePackagingEntry } = useSelector((state) => state.searchResults);
     const trajectEntry = context?.trajectEntry;
+    const bookedMode = isBookedEntryTraject(trajectEntry);
     const hideShowMoreResults = !!context?.hideShowMoreResults;
     const loadDayActivitiesOnDemand = !!context?.loadDayActivitiesOnDemand;
     const showNonPreferredHotels = !!context?.showNonPreferredHotels;
@@ -34650,7 +35384,7 @@ const TrajectResults = ({ isLoading }) => {
         if (!result)
             return;
         dispatch(setTrajectNodeSelection({ lineGuid: item.line.guid, code }));
-        applyResultToLines(item.lines, result).forEach((line) => dispatch(updateEditableEntryLine(line)));
+        buildNodeSelectionLines(item, result, bookedMode).forEach((line) => dispatch(updateEditableEntryLine(line)));
     };
     /** The remaining legs for a flight node open in the fly-in, as the regular flight results do. */
     const handleShowMoreFlights = (item) => {
@@ -34738,7 +35472,7 @@ const TrajectResults = ({ isLoading }) => {
                         node.preferredAccommodationName,
                         " \u2014 ",
                         translations.SRP.NO_RESULTS))),
-                React__default.createElement("div", { className: "search__results__cards search__results__cards--scroll" }, [selected, ...configured, ...fill].map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE })))),
+                React__default.createElement("div", { className: "search__results__cards search__results__cards--scroll" }, [selected, ...configured, ...fill].map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE, selectedLabel: bookedMode && matchesCode(result, node.code ?? '') ? translations.SHARED.BOOKED : undefined })))),
                 remaining > 0 && !hideShowMoreResults && (React__default.createElement("div", { className: "search__results__cards__actions" },
                     React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleShowMore(item) },
                         translations.SRP.SHOW_MORE,
@@ -34748,7 +35482,7 @@ const TrajectResults = ({ isLoading }) => {
     };
     const handleSelectFlight = (item, flight) => {
         dispatch(setTrajectFlightSelection({ lineGuid: item.line.guid, guid: flight.outwardGuid }));
-        dispatch(updateEditableEntryLine(applyFlightToLine(item.line, flight)));
+        dispatch(updateEditableEntryLine(buildFlightSelectionLine(item, flight, bookedMode)));
     };
     const renderFlightNode = (item) => {
         const { node, line } = item;
@@ -34774,7 +35508,7 @@ const TrajectResults = ({ isLoading }) => {
             status === 'unavailable' && React__default.createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS),
             status === 'resolved' && selected && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "search__results__cards search__results__cards--extended" },
-                    React__default.createElement(IndependentFlightOption, { key: `flight-${selected.outwardGuid}`, item: selected.outward, guid: selected.outwardGuid, selectedGuid: selected.outwardGuid, isOutward: true, showSelectedState: true, price: selected.price }),
+                    React__default.createElement(IndependentFlightOption, { key: `flight-${selected.outwardGuid}`, item: selected.outward, guid: selected.outwardGuid, selectedGuid: selected.outwardGuid, isOutward: true, showSelectedState: true, price: selected.price, selectedLabel: bookedMode && selected.outwardGuid === line.guid ? translations.SHARED.BOOKED : undefined }),
                     visible.map((result) => (React__default.createElement(IndependentFlightOption, { key: `flight-${result.outwardGuid}`, item: result.outward, guid: result.outwardGuid, isOutward: true, price: result.price, currentSelectedPrice: selected.price, onSelect: () => handleSelectFlight(item, result) })))),
                 others.length > 2 && !hideShowMoreResults && (React__default.createElement("div", { className: "search__results__cards__actions" },
                     React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleShowMoreFlights(item) },
@@ -34858,7 +35592,8 @@ const TrajectResults = ({ isLoading }) => {
      */
     const renderActivityCard = ({ result, item }) => {
         const isSelected = item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedExcursionLines(result).length > 0;
-        return (React__default.createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(item, result.code) : handleToggleActivity(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? undefined : translations.SRP.REMOVE }));
+        const isBookedCard = !!item && bookedMode && matchesCode(result, item.node.code ?? '');
+        return (React__default.createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(item, result.code) : handleToggleActivity(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? (isBookedCard ? translations.SHARED.BOOKED : undefined) : translations.SRP.REMOVE }));
     };
     if (isLoading)
         return React__default.createElement(Spinner, { label: translations.SRP.LOADING_ITINERARY });
@@ -34902,6 +35637,7 @@ const useTrajectAvailability = () => {
         const controller = new AbortController();
         dispatch(resetTrajectAvailability());
         dispatch(setTrajectResolving(true));
+        const bookedMode = isBookedEntryTraject(trajectEntry);
         const config = {
             host: context.tideConnection.host,
             apiKey: context.tideConnection.apiKey
@@ -34963,6 +35699,17 @@ const useTrajectAvailability = () => {
                 });
                 const configuredCodes = new Set(configuredResults.map((x) => x.code));
                 const destinationResults = areaResults.filter((x) => !configuredCodes.has(x.code));
+                if (bookedMode) {
+                    const results = [...configuredResults, ...destinationResults];
+                    let booked = results.find((x) => matchesCode(x, item.node.code ?? '')) ?? null;
+                    // Not searchable any more (sold out, delisted) — drawn from the line instead.
+                    if (!booked) {
+                        booked = buildBookedNodeResult(item.node, item.lines);
+                        results.unshift(booked);
+                    }
+                    dispatch(setTrajectNodeAvailability({ lineGuid, results, selectedCode: booked.code, preferredUnavailable: false }));
+                    return [];
+                }
                 const preferredCandidate = candidates.find((x) => x.isPreferred) ?? candidates[0];
                 const preferredUnavailable = configuredResults.length
                     ? !!preferredCandidate && !configuredResults.some((x) => matchesCode(x, preferredCandidate.code))
@@ -34985,6 +35732,11 @@ const useTrajectAvailability = () => {
                 if (controller.signal.aborted)
                     return [];
                 console.error('Failed to resolve traject node availability', item.node.name, error);
+                if (bookedMode) {
+                    const booked = buildBookedNodeResult(item.node, item.lines);
+                    dispatch(setTrajectNodeAvailability({ lineGuid, results: [booked], selectedCode: booked.code, preferredUnavailable: false }));
+                    return [];
+                }
                 dispatch(setTrajectNodeAvailability({ lineGuid, results: [], selectedCode: null, preferredUnavailable: false }));
                 return item.lines.map((x) => x.guid);
             }
@@ -34992,6 +35744,11 @@ const useTrajectAvailability = () => {
         const resolveFlightNode = async (item) => {
             const lineGuid = item.line.guid;
             if (!item.node.departureAirportCode || !item.node.arrivalAirportCode) {
+                if (bookedMode) {
+                    const booked = buildBookedFlightResult(item.line);
+                    dispatch(setTrajectFlightAvailability({ lineGuid, results: [booked], selectedGuid: booked.outwardGuid }));
+                    return [];
+                }
                 dispatch(setTrajectFlightAvailability({ lineGuid, results: [], selectedGuid: null }));
                 return item.lines.map((x) => x.guid);
             }
@@ -35000,6 +35757,11 @@ const useTrajectAvailability = () => {
                 const flights = (await build.searchPackagingFlights(config, buildTrajectFlightRequest(item, searchContext, flightPax), controller.signal)) ?? [];
                 if (controller.signal.aborted)
                     return [];
+                if (bookedMode) {
+                    const booked = buildBookedFlightResult(item.line);
+                    dispatch(setTrajectFlightAvailability({ lineGuid, results: [booked, ...flights], selectedGuid: booked.outwardGuid }));
+                    return [];
+                }
                 const picked = pickCheapestFlight(flights);
                 dispatch(setTrajectFlightAvailability({ lineGuid, results: flights, selectedGuid: picked?.outwardGuid ?? null }));
                 if (!picked)
@@ -35011,6 +35773,11 @@ const useTrajectAvailability = () => {
                 if (controller.signal.aborted)
                     return [];
                 console.error('Failed to resolve traject flight', item.node.name, error);
+                if (bookedMode) {
+                    const booked = buildBookedFlightResult(item.line);
+                    dispatch(setTrajectFlightAvailability({ lineGuid, results: [booked], selectedGuid: booked.outwardGuid }));
+                    return [];
+                }
                 dispatch(setTrajectFlightAvailability({ lineGuid, results: [], selectedGuid: null }));
                 return item.lines.map((x) => x.guid);
             }
@@ -35048,6 +35815,7 @@ const SearchResultsContainer = ({ onBookingStarted }) => {
     const [detailsIsLoading, setDetailsIsLoading] = useState(false);
     const [pricesAreLoading, setPricesAreLoading] = useState(false);
     const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
+    const [entrySaving, setEntrySaving] = useState(false);
     const [itineraryOpen, setItineraryOpen] = useState(false);
     const [isBookingConfirmation, setIsBookingConfirmation] = useState(false);
     const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState(null);
@@ -35804,6 +36572,31 @@ const SearchResultsContainer = ({ onBookingStarted }) => {
     useEffect(() => {
         setInitialFiltersSet(false);
     }, [activeSearchSeed]);
+    const handleSaveEntry = async () => {
+        if (!context || !bookableEntry || entrySaving)
+            return;
+        setEntrySaving(true);
+        try {
+            const config = {
+                host: context.tideConnection.host,
+                apiKey: context.tideConnection.apiKey
+            };
+            const request = {
+                language: context.languageCode ?? 'en-GB',
+                officeId: context.tideConnection.officeId,
+                catalogueId: context.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+                agentId: context.agentId,
+                payload: bookableEntry
+            };
+            await build.savePackagingEntry(config, request);
+            if (typeof window !== 'undefined')
+                window.location.reload();
+        }
+        catch (err) {
+            console.error('Failed to save the entry', err);
+            setEntrySaving(false);
+        }
+    };
     useEffect(() => {
         const fetchPriceDetails = async () => {
             if (!context || !editablePackagingEntry || isEmpty$1(editablePackagingEntry.lines))
@@ -36188,11 +36981,18 @@ const SearchResultsContainer = ({ onBookingStarted }) => {
                 const id = paxId++;
                 pax.push({
                     id,
+                    guid: '',
                     firstName: _.firstName || '',
                     lastName: _.lastName || '',
-                    dateOfBirth: _.dateOfBirth || null,
-                    age: _.age || null,
-                    isMainBooker: roomIndex === 0 && paxIndex === 0
+                    dateOfBirth: _.dateOfBirth || undefined,
+                    age: _.age || undefined,
+                    isMainBooker: roomIndex === 0 && paxIndex === 0,
+                    email: '',
+                    weight: null,
+                    weightType: build.WeightType.kilograms,
+                    height: null,
+                    heightType: build.HeightType.centimeters,
+                    customFields: []
                 });
                 return id;
             });
@@ -36212,6 +37012,7 @@ const SearchResultsContainer = ({ onBookingStarted }) => {
             depositAmount: 0,
             pax,
             rooms,
+            paxFields: [],
             lines: [],
             address: {}
         };
@@ -36231,7 +37032,7 @@ const SearchResultsContainer = ({ onBookingStarted }) => {
             context.searchConfiguration.qsmType != build.PortalQsmType.AccommodationAndFlight && context.showFilters && (React__default.createElement(Filters, { initialFilters: initialFilters, filters: filters, isOpen: filtersOpen, handleSetIsOpen: () => setFiltersOpen(!filtersOpen), 
                 // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
                 isLoading: isLoading, setFilters: (filters) => dispatch(setFilters(filters)), resetFilters: (filters) => dispatch(resetFilters(filters)) })),
-            context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight && (React__default.createElement(Itinerary, { isOpen: itineraryOpen, handleSetIsOpen: () => setItineraryOpen(!itineraryOpen), isLoading: isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading || trajectResolving, onEditAccommodation: handleEditAccommodation })),
+            context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight && (React__default.createElement(Itinerary, { isOpen: itineraryOpen, handleSetIsOpen: () => setItineraryOpen(!itineraryOpen), isLoading: isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading || trajectResolving || entrySaving, onEditAccommodation: handleEditAccommodation, onSaveEntry: handleSaveEntry })),
             React__default.createElement("div", { className: "search__results" },
                 isMobile && (React__default.createElement("div", { className: "search__result-row" },
                     React__default.createElement("div", { className: "search__results__actions" },
@@ -36319,8 +37120,15 @@ const createSearchResultsStore = () => configureStore({
 
 const SearchResults = ({ configuration, onBookingStarted }) => {
     const store = React__default.useMemo(() => createSearchResultsStore(), []);
+    // A booked entry opened through its magic link gets the traject services screen by carrying a
+    // traject rebuilt from its own lines. The magic link on the entry is what marks the mode.
+    const effectiveConfiguration = React__default.useMemo(() => {
+        if (!configuration.allowBookedEntryChanges || configuration.trajectEntry || !configuration.packagingEntry?.magicLink)
+            return configuration;
+        return { ...configuration, trajectEntry: buildBookedTrajectEntry(configuration.packagingEntry) };
+    }, [configuration]);
     return (React__default.createElement(Provider, { store: store },
-        React__default.createElement(SearchResultsConfigurationContext.Provider, { value: configuration },
+        React__default.createElement(SearchResultsConfigurationContext.Provider, { value: effectiveConfiguration },
             React__default.createElement(SearchResultsContainer, { onBookingStarted: onBookingStarted }))));
 };