@qite/tide-booking-component 1.2.4 → 1.3.0

package/build/build-esm/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable */
-import React, { useLayoutEffect as useLayoutEffect$1, useEffect, useContext, useState, useRef } from 'react';
+import React, { useLayoutEffect as useLayoutEffect$1, useEffect, useContext, useState, useRef, useCallback } from 'react';
 import JsonURL from '@jsonurl/jsonurl';
 import { isToday, getDate, getYear, getMonth, startOfWeek, startOfMonth, endOfWeek, addWeeks, endOfMonth, eachDayOfInterval, format as format$1, getISOWeek, getISODay, isSameMonth, startOfDay, isAfter, isEqual, isWithinInterval, endOfDay, isBefore, addMonths, addDays, formatISO, differenceInYears, parseISO, differenceInMinutes, differenceInCalendarDays, parse } from 'date-fns';
 import { isNil, isArray, compact, isEmpty, range, chunk, isFunction, clamp, omit, sum, first, orderBy, uniq, uniqBy, sortBy, last, findIndex, set, get as get$2 } from 'lodash';
-import { nlBE, fr } from 'date-fns/locale';
+import { nlBE, fr, enGB } from 'date-fns/locale';
 import { usePopper } from 'react-popper';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 import { navigate, Link, useLocation, Router } from '@reach/router';
@@ -49,8 +49,8 @@ function __awaiter$1(thisArg, _arguments, P, generator) {
 }
 
 function __generator$1(thisArg, body) {
-  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-  return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
   function verb(n) { return function (v) { return step([n, v]); }; }
   function step(op) {
       if (f) throw new TypeError("Generator is already executing.");
@@ -91,7 +91,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var STEPS$1 = {
+var STEPS$2 = {
 	PERSONAL_DETAILS: "Coordonnées personnelles",
 	EXTRA_OPTIONS: "Options de voyage",
 	SUMMARY: "Récapitulatif",
@@ -105,11 +105,11 @@ var STEPS$1 = {
 	ROOM_OPTIONS: "Options de chambre",
 	FLIGHT_OPTIONS: "Options de vol"
 };
-var INPUT$1 = {
+var INPUT$2 = {
 	INCREASE: "Augmenter",
 	DECREASE: "Diminuer"
 };
-var FLIGHTS_FORM$1 = {
+var FLIGHTS_FORM$2 = {
 	OUTWARD_FLIGHTS: "Vols aller",
 	OUTWARD_FLIGHT: "Vol aller",
 	RETURN_FLIGHTS: "Vols retour",
@@ -142,7 +142,7 @@ var FLIGHTS_FORM$1 = {
 	FLIGHTS_FOUND_2: "vols",
 	FLIGHTS_FOUND_3: "trouvés"
 };
-var PRODUCT$1 = {
+var PRODUCT$2 = {
 	STAY_INCLUDED: "Séjour inclus",
 	FLIGHT_INCLUDED: "Vol inclus",
 	TRANSFER_INCLUDED: "Transfert inclus",
@@ -166,12 +166,12 @@ var PRODUCT$1 = {
 	TRAVEL_PERIOD: "Période de voyage",
 	CLOSE: "Fermer"
 };
-var MAIN$1 = {
+var MAIN$2 = {
 	PREPARING_BOOKING: "Veuillez patienter, nous préparons votre réservation",
 	PREPARING_OFFER: "Veuillez patienter, nous préparons votre devis",
 	PRODUCT_UNAVAILABLE: "Produit non disponible"
 };
-var SHARED$1 = {
+var SHARED$2 = {
 	ROOM: "Chambre",
 	ROOMS: "Chambres",
 	TOTAL_PRICE: "Prix total",
@@ -180,7 +180,7 @@ var SHARED$1 = {
 	SELECT: "Sélectionner",
 	SELECTED: "Sélectionné"
 };
-var SIDEBAR$1 = {
+var SIDEBAR$2 = {
 	OVERVIEW: "Aperçu",
 	SLIDE_TOTAL_PRICE: "Montant total : ",
 	SLIDE_DEPOSIT: "Acompte à payer : ",
@@ -214,7 +214,7 @@ var SIDEBAR$1 = {
 	ON_REQUEST: "Sur demande",
 	CHANGES: "correspondances"
 };
-var TRAVELERS_FORM$1 = {
+var TRAVELERS_FORM$2 = {
 	TRAVELER: "Voyageur",
 	ADULT: "adulte",
 	ADULTS: "adultes",
@@ -260,7 +260,7 @@ var TRAVELERS_FORM$1 = {
 		AGENT_IS_REQUIRED: "Agent de voyage requis"
 	}
 };
-var OPTIONS_FORM$1 = {
+var OPTIONS_FORM$2 = {
 	NO_OPTIONS_TITLE: "Aucune option",
 	NO_OPTIONS_MESSAGE: "Ce voyage n'a pas d'options supplémentaires.",
 	UNIT_TITLE: "Groupe",
@@ -274,12 +274,12 @@ var OPTIONS_FORM$1 = {
 	PER_UNIT_TITLE: "Sélectionner les options par groupe",
 	NONE: "Aucune"
 };
-var ROOM_OPTIONS_FORM$1 = {
+var ROOM_OPTIONS_FORM$2 = {
 	TRAVELER_GROUP: "Groupe de voyageurs",
 	ALTERNATIVES_TRAVELER_GROUP: "Options de chambre alternatives pour le groupe de voyageurs",
 	SHOW_ALTERNATIVES: "Afficher les options de chambre alternatives"
 };
-var SUMMARY$1 = {
+var SUMMARY$2 = {
 	PERSONAL_DETAILS: "Coordonnées personnelles",
 	TRAVELERS: "voyageurs",
 	TRAVELER: "voyageur",
@@ -300,7 +300,7 @@ var SUMMARY$1 = {
 	VOUCHER_VALID: "Bon valide",
 	VOUCHER_INVALID: "Bon invalide"
 };
-var CONFIRMATION$1 = {
+var CONFIRMATION$2 = {
 	TITLE_TEXT_OFFER: "Votre devis numéro {0} a été demandé",
 	TITLE_TEXT_BOOKING: "Votre réservation avec le numéro {0} est confirmée",
 	MESSAGE_TEXT1: "Votre voyage de rêve est maintenant très proche.",
@@ -312,7 +312,7 @@ var CONFIRMATION$1 = {
 	QUESTIONS_ALT: "Contactez-nous",
 	MAIL_SUBJECT: "Infos réservation"
 };
-var ERROR$1 = {
+var ERROR$2 = {
 	TRY_AGAIN: "Réessayez de réserver",
 	MESSAGE_TEXT1: "Une erreur s'est produite lors de la confirmation de votre voyage.",
 	MESSAGE_TEXT2: "Cliquez ci-dessous pour réessayer.",
@@ -321,23 +321,29 @@ var ERROR$1 = {
 	ERROR_TEXT3: ".",
 	ERROR_ALT: "Contactez-nous"
 };
+var PRINT_OFFER_BUTTON$2 = {
+	LABEL_IDLE: "Imprimer le devis",
+	LABEL_CREATING: "Génération du devis…",
+	LABEL_PRINTING: "Génération du PDF…"
+};
 var frJson = {
-	STEPS: STEPS$1,
-	INPUT: INPUT$1,
-	FLIGHTS_FORM: FLIGHTS_FORM$1,
-	PRODUCT: PRODUCT$1,
-	MAIN: MAIN$1,
-	SHARED: SHARED$1,
-	SIDEBAR: SIDEBAR$1,
-	TRAVELERS_FORM: TRAVELERS_FORM$1,
-	OPTIONS_FORM: OPTIONS_FORM$1,
-	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM$1,
-	SUMMARY: SUMMARY$1,
-	CONFIRMATION: CONFIRMATION$1,
-	ERROR: ERROR$1
+	STEPS: STEPS$2,
+	INPUT: INPUT$2,
+	FLIGHTS_FORM: FLIGHTS_FORM$2,
+	PRODUCT: PRODUCT$2,
+	MAIN: MAIN$2,
+	SHARED: SHARED$2,
+	SIDEBAR: SIDEBAR$2,
+	TRAVELERS_FORM: TRAVELERS_FORM$2,
+	OPTIONS_FORM: OPTIONS_FORM$2,
+	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM$2,
+	SUMMARY: SUMMARY$2,
+	CONFIRMATION: CONFIRMATION$2,
+	ERROR: ERROR$2,
+	PRINT_OFFER_BUTTON: PRINT_OFFER_BUTTON$2
 };
 
-var STEPS = {
+var STEPS$1 = {
 	PERSONAL_DETAILS: "Persoonlijke gegevens",
 	EXTRA_OPTIONS: "Extra opties",
 	SUMMARY: "Overzicht",
@@ -351,11 +357,11 @@ var STEPS = {
 	ROOM_OPTIONS: "Kamer opties",
 	FLIGHT_OPTIONS: "Vlucht opties"
 };
-var INPUT = {
+var INPUT$1 = {
 	INCREASE: "Verhogen",
 	DECREASE: "Verminderen"
 };
-var FLIGHTS_FORM = {
+var FLIGHTS_FORM$1 = {
 	OUTWARD_FLIGHTS: "Heenvluchten",
 	OUTWARD_FLIGHT: "Heenvlucht",
 	RETURN_FLIGHTS: "Retourvluchten",
@@ -388,7 +394,7 @@ var FLIGHTS_FORM = {
 	FLIGHTS_FOUND_2: "vluchten",
 	FLIGHTS_FOUND_3: "gevonden"
 };
-var PRODUCT = {
+var PRODUCT$1 = {
 	STAY_INCLUDED: "Inclusief verblijf",
 	FLIGHT_INCLUDED: "Inclusief vlucht",
 	TRANSFER_INCLUDED: "Inclusief transfer",
@@ -412,12 +418,12 @@ var PRODUCT = {
 	TRAVEL_PERIOD: "Reisperiode",
 	CLOSE: "Sluiten"
 };
-var MAIN = {
+var MAIN$1 = {
 	PREPARING_BOOKING: "Even geduld, we bereiden uw boeking voor",
 	PREPARING_OFFER: "Even geduld, we bereiden uw offerte voor",
 	PRODUCT_UNAVAILABLE: "Product niet beschikbaar"
 };
-var SHARED = {
+var SHARED$1 = {
 	ROOM: "Kamer",
 	ROOMS: "Kamers",
 	TOTAL_PRICE: "Totale prijs",
@@ -426,7 +432,7 @@ var SHARED = {
 	SELECT: "Selecteer",
 	SELECTED: "Geselecteerd"
 };
-var SIDEBAR = {
+var SIDEBAR$1 = {
 	OVERVIEW: "Overzicht",
 	SLIDE_TOTAL_PRICE: "Totaalbedrag: ",
 	SLIDE_DEPOSIT: "Te betalen voorschot: ",
@@ -460,7 +466,7 @@ var SIDEBAR = {
 	ON_REQUEST: "Op aanvraag",
 	CHANGES: "overstappen"
 };
-var TRAVELERS_FORM = {
+var TRAVELERS_FORM$1 = {
 	TRAVELER: "Reiziger",
 	ADULT: "volwassene",
 	ADULTS: "volwassenen",
@@ -506,7 +512,7 @@ var TRAVELERS_FORM = {
 		AGENT_IS_REQUIRED: "Reisagent is verplicht"
 	}
 };
-var OPTIONS_FORM = {
+var OPTIONS_FORM$1 = {
 	NO_OPTIONS_TITLE: "Geen opties",
 	NO_OPTIONS_MESSAGE: "Deze reis heeft geen bijkomende opties.",
 	UNIT_TITLE: "Gezelschap",
@@ -520,12 +526,12 @@ var OPTIONS_FORM = {
 	PER_UNIT_TITLE: "Opties per gezelschap selecteren",
 	NONE: "Geen"
 };
-var ROOM_OPTIONS_FORM = {
+var ROOM_OPTIONS_FORM$1 = {
 	TRAVELER_GROUP: "Reisgezelschap",
 	ALTERNATIVES_TRAVELER_GROUP: "Alternatieve kameropties voor reisgezelschap",
 	SHOW_ALTERNATIVES: "Toon alternatieve kameropties"
 };
-var SUMMARY = {
+var SUMMARY$1 = {
 	PERSONAL_DETAILS: "Persoonlijke gegevens",
 	TRAVELERS: "reizigers",
 	TRAVELER: "reiziger",
@@ -546,7 +552,7 @@ var SUMMARY = {
 	VOUCHER_VALID: "Voucher is geldig",
 	VOUCHER_INVALID: "Voucher is niet geldig"
 };
-var CONFIRMATION = {
+var CONFIRMATION$1 = {
 	TITLE_TEXT_OFFER: "Je offerte met nummer {0} is aangevraagd",
 	TITLE_TEXT_BOOKING: "Je boeking met nummer {0} is bevestigd",
 	MESSAGE_TEXT1: "Jouw droomreis komt nu heel dichtbij.",
@@ -558,7 +564,7 @@ var CONFIRMATION = {
 	QUESTIONS_ALT: "Contacteer ons",
 	MAIL_SUBJECT: "Boeking info"
 };
-var ERROR = {
+var ERROR$1 = {
 	TRY_AGAIN: "Probeer opnieuw te boeken",
 	MESSAGE_TEXT1: "Tijdens het bevestigen van uw reis is er iets misgelopen.",
 	MESSAGE_TEXT2: "Klik hieronder om nog eens te proberen.",
@@ -567,7 +573,264 @@ var ERROR = {
 	ERROR_TEXT3: ".",
 	ERROR_ALT: "Contacteer ons"
 };
+var PRINT_OFFER_BUTTON$1 = {
+	LABEL_IDLE: "Print offerte",
+	LABEL_CREATING: "Offerte genereren...",
+	LABEL_PRINTING: "PDF genereren..."
+};
 var nlJson = {
+	STEPS: STEPS$1,
+	INPUT: INPUT$1,
+	FLIGHTS_FORM: FLIGHTS_FORM$1,
+	PRODUCT: PRODUCT$1,
+	MAIN: MAIN$1,
+	SHARED: SHARED$1,
+	SIDEBAR: SIDEBAR$1,
+	TRAVELERS_FORM: TRAVELERS_FORM$1,
+	OPTIONS_FORM: OPTIONS_FORM$1,
+	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM$1,
+	SUMMARY: SUMMARY$1,
+	CONFIRMATION: CONFIRMATION$1,
+	ERROR: ERROR$1,
+	PRINT_OFFER_BUTTON: PRINT_OFFER_BUTTON$1
+};
+
+var STEPS = {
+	PERSONAL_DETAILS: "Personal details",
+	EXTRA_OPTIONS: "Extra options",
+	SUMMARY: "Summary",
+	CONFIRMATION: "Confirmation",
+	ERROR: "Booking failed",
+	PREVIOUS: "Previous step",
+	NEXT: "Next step",
+	SUBMIT_BOOKING: "Confirm booking",
+	SUBMIT_OFFER: "Request quote",
+	COMPOSE: "Compose",
+	ROOM_OPTIONS: "Room options",
+	FLIGHT_OPTIONS: "Flight options"
+};
+var INPUT = {
+	INCREASE: "Increase",
+	DECREASE: "Decrease"
+};
+var FLIGHTS_FORM = {
+	OUTWARD_FLIGHTS: "Outbound flights",
+	OUTWARD_FLIGHT: "Outbound flight",
+	RETURN_FLIGHTS: "Return flights",
+	RETURN_FLIGHT: "Return flight",
+	DIRECT_FLIGHT: "Direct flight",
+	STOP: "stop",
+	STOPS: "stops",
+	FLIGHT_STOPS: "stop(s)",
+	DIFFERENT_OPTION_WARNING: "Warning: This flight changes the duration of the stay.",
+	FILTER_OPTIONS: "Filter options",
+	AIRLINES: "Airlines",
+	AIRPORTS: "Airports",
+	NUMBER_OF_STOPS: "Number of stops",
+	FLIGHT_OUTWARD: "Outbound flight",
+	DEPARTURE_TIME: "Departure time",
+	TRAVEL_DURATION: "Travel duration",
+	CHANGE_TIME: "Change time",
+	FLIGHT_RETURN: "Return flight",
+	NO_FLIGHTS_FOUND: "No flights found.",
+	STARTING: "Starting from",
+	LOWEST_PRICE: "Lowest price",
+	CHOOSE_YOUR_CLASS: "Choose your class:",
+	PLUS_ONE_DAY: "+1 day",
+	STOP_TIME: "Change time",
+	NIGHT_DEPARTURE: "Night (00:00 - 05:00)",
+	MORNING_DEPARTURE: "Morning (05:00 - 12:00)",
+	AFTERNOON_DEPARTURE: "Afternoon (12:00 - 18:00)",
+	EVENING_DEPARTURE: "Evening (18:00 - 00:00)",
+	FLIGHTS_FOUND_1: "",
+	FLIGHTS_FOUND_2: "flights",
+	FLIGHTS_FOUND_3: "found"
+};
+var PRODUCT = {
+	STAY_INCLUDED: "Stay included",
+	FLIGHT_INCLUDED: "Flight included",
+	TRANSFER_INCLUDED: "Transfer included",
+	LOADING_PRICE: "Your price is being composed.",
+	PER_PERSON: "Per person",
+	PER_NIGHT: "Per night",
+	PER_PERSON_PER_NIGHT: "Per person / per night",
+	BOOK_NOW: "Book now",
+	TO_YOUR_OFFER: "To your quote",
+	NOT_AVAILABLE: "Not available",
+	NUMBER_OF_ROOMS: "Number of rooms",
+	AGE_BY_DEPARTURE_DATE: "Age of children on departure date",
+	YEAR: "Year",
+	APPLY: "Apply",
+	EDIT: "Edit",
+	DEPARTURE: "Departure",
+	DEPARTURE_DATE: "Departure date",
+	RETURN: "Return",
+	RETURN_DATE: "Return date",
+	WHO_YOU_TRAVELING_WITH: "Who are you traveling with?",
+	TRAVEL_PERIOD: "Travel period",
+	CLOSE: "Close"
+};
+var MAIN = {
+	PREPARING_BOOKING: "Please wait, we are preparing your booking",
+	PREPARING_OFFER: "Please wait, we are preparing your quote",
+	PRODUCT_UNAVAILABLE: "Product not available"
+};
+var SHARED = {
+	ROOM: "Room",
+	ROOMS: "Rooms",
+	TOTAL_PRICE: "Total price",
+	ADULTS: "Adults",
+	CHILDREN: "Children",
+	SELECT: "Select",
+	SELECTED: "Selected"
+};
+var SIDEBAR = {
+	OVERVIEW: "Summary",
+	SLIDE_TOTAL_PRICE: "Total amount: ",
+	SLIDE_DEPOSIT: "Deposit to be paid: ",
+	TRAVEL_INFO: "Travel information",
+	TRAVELERS: "Travelers",
+	TRAVELERS_ADULTS: "adults",
+	TRAVELERS_ADULT: "adult",
+	TRAVELERS_CHILDREN: "children",
+	TRAVELERS_CHILD: "child",
+	DEPARTURE: "Outbound",
+	DEPARTURE_SINGLE: "Date",
+	ARRIVAL: "Return",
+	FLIGHT: "Flight",
+	ACCOMMODATION: "Accommodation booked",
+	BASE_PRICE: "Base price",
+	OPTIONS: "Options",
+	INCLUDED_COSTS: "Included costs",
+	EXTRA_COSTS: "Additional costs",
+	DEPOSIT: "Deposit to be paid",
+	DEPOSIT_TEXT1: "The steps for the ",
+	DEPOSIT_TEXT2: "remaining balance",
+	DEPOSIT_TEXT3: " of ",
+	DEPOSIT_TEXT4: " are described in ",
+	DEPOSIT_TEXT5: "step 3 (\"summary\")",
+	DEPOSIT_TEXT6: " of the booking process.",
+	LUGGAGE_INCLUDED: "Luggage included",
+	DEPARTURE_FLIGHT: "Outbound flight",
+	ARRIVAL_FLIGHT: "Return flight",
+	FLIGHT_DEPARTURE: "Departure",
+	FLIGHT_ARRIVAL: "Arrival",
+	ON_REQUEST: "On request",
+	CHANGES: "transfers"
+};
+var TRAVELERS_FORM = {
+	TRAVELER: "Traveler",
+	ADULT: "adult",
+	ADULTS: "adults",
+	CHILD: "child",
+	CHILDREN: "children",
+	GENDER: "Salutation",
+	MALE: "Mr.",
+	FEMALE: "Mrs.",
+	OTHER: "Other",
+	MAIN_BOOKER: "Main booker",
+	FIRST_NAME: "First name",
+	LAST_NAME: "Last name",
+	BIRTHDATE: "Date of birth",
+	STREET: "Street",
+	STREET_PLACEHOLDER: "Your street",
+	HOUSE_NUMBER: "House number",
+	POST_BOX: "Box",
+	ZIPCODE: "Postal code",
+	CITY: "City",
+	CITY_PLACEHOLDER: "City",
+	COUNTRY: "Country",
+	SELECT_COUNTRY: "Select country",
+	PHONE: "Phone number",
+	EMAIL: "Email",
+	REPEAT_EMAIL: "Repeat email",
+	VALIDATION_MESSAGE: "Please check the fields below and fill them in correctly.",
+	BOOK_WITH_AGENT: "I want to book through my local travel agent",
+	CHOOSE_OFFICE: "I choose an office",
+	COUNTRIES: {
+		BELGIUM: "Belgium",
+		NETHERLANDS: "Netherlands",
+		FRANCE: "France"
+	},
+	CHOOSE_AGENT_PLACEHOLDER: "Choose your travel agent",
+	VALIDATION: {
+		TRAVELER_X_FIELD: "Room {0} - Traveler {1}: {2}",
+		TRAVELER_X_IS_NO_ADULT: "Room {0} - Traveler {1}: is not an adult",
+		TRAVELER_X_IS_NO_CHILD: "Room {0} - Traveler {1}: is not a child",
+		NO_MAIN_BOOKER_SELECTED: "No main booker has been selected",
+		MAIN_BOOKER_FIELD: "Main booker: {0}",
+		MAIN_BOOKER_EMAIL_IS_INVALID: "Main booker: email is invalid",
+		MAIN_BOOKER_EMAIL_DOES_NOT_MATCH: "Main booker: email does not match",
+		AGENT_IS_REQUIRED: "Travel agent is required"
+	}
+};
+var OPTIONS_FORM = {
+	NO_OPTIONS_TITLE: "No options",
+	NO_OPTIONS_MESSAGE: "This trip has no additional options.",
+	UNIT_TITLE: "Party",
+	PACKAGE: "Package",
+	DAY: "day",
+	DAYS: "days",
+	NIGHT: "night",
+	NIGHTS: "nights",
+	PER_PAX_TITLE: "Select options per traveler",
+	PER_BOOKING_TITLE: "Select options per booking",
+	PER_UNIT_TITLE: "Select options per party",
+	NONE: "None"
+};
+var ROOM_OPTIONS_FORM = {
+	TRAVELER_GROUP: "Travel party",
+	ALTERNATIVES_TRAVELER_GROUP: "Alternative room options for travel party",
+	SHOW_ALTERNATIVES: "Show alternative room options"
+};
+var SUMMARY = {
+	PERSONAL_DETAILS: "Personal details",
+	TRAVELERS: "travelers",
+	TRAVELER: "traveler",
+	ADULTS: "adults",
+	ADULT: "adult",
+	CHILDREN: "children",
+	CHILD: "child",
+	MAIN_BOOKER: "Main booker",
+	NOTIFICATIONS_TITLE: "Attention",
+	VALIDATE_TITLE: "Check your information",
+	VALIDATE_TEXT_BOOKING: "You are about to confirm your booking. Please check that all information is correct and that names are exactly as shown on your ID or passport. This information is final and cannot be changed.",
+	VALIDATE_TEXT_OFFER: "You are about to request a quote. Please check that all information is correct and that names are exactly as shown on your ID or passport. This helps us avoid problems if you book later.",
+	OPTIONS: "Options",
+	REMARKS: "Remarks",
+	VOUCHERS: "Vouchers",
+	VOUCHER_VALIDATE: "Validate voucher",
+	ADD_VOUCHER: "Add voucher",
+	VOUCHER_VALID: "Voucher is valid",
+	VOUCHER_INVALID: "Voucher is not valid"
+};
+var CONFIRMATION = {
+	TITLE_TEXT_OFFER: "Your quote with number {0} has been requested",
+	TITLE_TEXT_BOOKING: "Your booking with number {0} has been confirmed",
+	MESSAGE_TEXT1: "Your dream trip is now very close.",
+	MESSAGE_TEXT2_OFFER: "Our travel specialists are processing your request and will contact you within 48 hours.",
+	MESSAGE_TEXT2_BOOKING: "Our travel specialists are processing your booking and will contact you within 48 hours.",
+	QUESTIONS_TEXT1: "Do you have any questions? ",
+	QUESTIONS_TEXT2: "Let us know",
+	QUESTIONS_TEXT3: ".",
+	QUESTIONS_ALT: "Contact us",
+	MAIL_SUBJECT: "Booking info"
+};
+var ERROR = {
+	TRY_AGAIN: "Try booking again",
+	MESSAGE_TEXT1: "Something went wrong while confirming your trip.",
+	MESSAGE_TEXT2: "Click below to try again.",
+	ERROR_TEXT1: "Still not working? ",
+	ERROR_TEXT2: "Be sure to let us know",
+	ERROR_TEXT3: ".",
+	ERROR_ALT: "Contact us"
+};
+var PRINT_OFFER_BUTTON = {
+	LABEL_IDLE: "Print offer",
+	LABEL_CREATING: "Generating offer…",
+	LABEL_PRINTING: "Generating PDF…"
+};
+var enJson = {
 	STEPS: STEPS,
 	INPUT: INPUT,
 	FLIGHTS_FORM: FLIGHTS_FORM,
@@ -580,7 +843,8 @@ var nlJson = {
 	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM,
 	SUMMARY: SUMMARY,
 	CONFIRMATION: CONFIRMATION,
-	ERROR: ERROR
+	ERROR: ERROR,
+	PRINT_OFFER_BUTTON: PRINT_OFFER_BUTTON
 };
 
 var formatPrice = function (price, locale) {
@@ -599,6 +863,8 @@ var getTranslations = function (language) {
             return nlJson;
         case "fr-BE":
             return frJson;
+        case "en-GB":
+            return enJson;
         default:
             throw new Error("The language '".concat(language, "' is not yet supported."));
     }
@@ -606,6 +872,7 @@ var getTranslations = function (language) {
 var locales = {
     "nl-BE": nlBE,
     "fr-BE": fr,
+    "en-GB": enGB,
 };
 function getLocale(code) {
     switch (code) {
@@ -613,6 +880,8 @@ function getLocale(code) {
             return locales[code];
         case "fr-BE":
             return locales[code];
+        case "en-GB":
+            return locales[code];
         default:
             return locales["nl-BE"];
     }
@@ -700,8 +969,8 @@ var SettingsContext$1 = React.createContext({
     officeId: 1,
     catalogueId: 1,
     language: "nl-BE",
-    basePath: 'boeken',
-    priceMode: 0
+    basePath: "boeken",
+    priceMode: 0,
 });
 
 var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7463,7 +7732,7 @@ build.login = login;
 build.logout = logout;
 var priceDetails_1 = build.priceDetails = priceDetails;
 build.prices = prices;
-build.print = print;
+var print_1 = build.print = print;
 build.resetPassword = resetPassword;
 build.search = search;
 build.searchFlightPool = searchFlightPool;
@@ -7514,12 +7783,12 @@ var fetchDetails$1 = function (request, signal, languageCode, apiSettings) { ret
     });
 }); };
 var packageApi$1 = {
-    fetchDetails: fetchDetails$1
+    fetchDetails: fetchDetails$1,
 };
 
 var formatPriceByMode = function (price, priceMode, personCount, duration, perPersonLabel, perNightLabel, perPersonPerNightLabel) {
     if (!price)
-        return '';
+        return "";
     switch (priceMode) {
         case 0:
             return "".concat(formatPrice(price));
@@ -8927,7 +9196,10 @@ var DateRangePicker = function (props) {
     var _a, _b, _c, _d;
     var _e = useState(props.fromDate), fromDate = _e[0], setFromDate = _e[1];
     var _f = useState(props.toDate), toDate = _f[0], setToDate = _f[1];
-    var _g = useState((_a = props.focusMonth) !== null && _a !== void 0 ? _a : { year: getYear(new Date()), month: getMonth(new Date()) }), focusMonth = _g[0], setFocusMonth = _g[1];
+    var _g = useState((_a = props.focusMonth) !== null && _a !== void 0 ? _a : {
+        year: getYear(new Date()),
+        month: getMonth(new Date()),
+    }), focusMonth = _g[0], setFocusMonth = _g[1];
     var _h = useState(false), isWaitingForToDate = _h[0], setWaitingForToDate = _h[1];
     var handleDayClick = function (day) {
         var onSelectionChange = props.onSelectionChange;
@@ -8989,12 +9261,17 @@ var DateRangePicker = function (props) {
     var firstCalendarYear = focusMonth.year;
     var firstCalendarMonth = focusMonth.month;
     var secondCalendarMonth = (firstCalendarMonth + 1) % 12;
-    var secondCalendarYear = secondCalendarMonth < firstCalendarMonth ? firstCalendarYear + 1 : firstCalendarYear;
+    var secondCalendarYear = secondCalendarMonth < firstCalendarMonth
+        ? firstCalendarYear + 1
+        : firstCalendarYear;
     var checkIfDateIsSelected = function (date) {
         return isNil(toDate)
             ? !isNil(fromDate) && isEqual(date, fromDate)
             : !isNil(fromDate) &&
-                isWithinInterval(date, { start: startOfDay(fromDate), end: endOfDay(toDate) });
+                isWithinInterval(date, {
+                    start: startOfDay(fromDate),
+                    end: endOfDay(toDate),
+                });
     };
     useEffect(function () {
         setFromDate(props.fromDate);
@@ -9002,7 +9279,10 @@ var DateRangePicker = function (props) {
     }, [(_b = props.fromDate) === null || _b === void 0 ? void 0 : _b.valueOf(), (_c = props.toDate) === null || _c === void 0 ? void 0 : _c.valueOf()]);
     useEffect(function () {
         if (props.fromDate) {
-            setFocusMonth({ month: props.fromDate.getMonth(), year: props.fromDate.getFullYear() });
+            setFocusMonth({
+                month: props.fromDate.getMonth(),
+                year: props.fromDate.getFullYear(),
+            });
         }
     }, [(_d = props.fromDate) === null || _d === void 0 ? void 0 : _d.valueOf()]);
     return (React.createElement("div", { className: "date-range-picker" },
@@ -9016,7 +9296,9 @@ var Dates = function (_a) {
     var value = _a.value, duration = _a.duration, onChange = _a.onChange;
     var language = useContext(SettingsContext$1).language;
     var translations = getTranslations(language);
-    var mql = typeof window !== "undefined" ? window.matchMedia("(min-width: 1200px)") : undefined;
+    var mql = typeof window !== "undefined"
+        ? window.matchMedia("(min-width: 1200px)")
+        : undefined;
     var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
     var _c = useState(null), popperElement = _c[0], setPopperElement = _c[1];
     var _d = useState(false), panelActive = _d[0], setPanelActive = _d[1];
@@ -9034,7 +9316,7 @@ var Dates = function (_a) {
                 options: {
                     padding: 40,
                 },
-            }
+            },
         ],
     }), styles = _e.styles, attributes = _e.attributes;
     var handleInputFocus = function () {
@@ -9073,9 +9355,11 @@ var Dates = function (_a) {
             React.createElement("div", __assign({ ref: setPopperElement, className: buildClassName([
                     "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
                     panelActive && "qsm__panel--active",
-                    !(mql === null || mql === void 0 ? void 0 : mql.matches) && "qsm__panel--mobile"
+                    !(mql === null || mql === void 0 ? void 0 : mql.matches) && "qsm__panel--mobile",
                 ]), style: (mql === null || mql === void 0 ? void 0 : mql.matches) ? styles.popper : undefined }, attributes.popper),
-                React.createElement(DateRangePicker, { fromDate: value === null || value === void 0 ? void 0 : value.fromDate, toDate: value === null || value === void 0 ? void 0 : value.toDate, duration: duration, disabledDaysFunction: function (date) { return isBefore(date, startOfDay(new Date())); }, onSelectionChange: handleSelectionChange }),
+                React.createElement(DateRangePicker, { fromDate: value === null || value === void 0 ? void 0 : value.fromDate, toDate: value === null || value === void 0 ? void 0 : value.toDate, duration: duration, disabledDaysFunction: function (date) {
+                        return isBefore(date, startOfDay(new Date()));
+                    }, onSelectionChange: handleSelectionChange }),
                 !(mql === null || mql === void 0 ? void 0 : mql.matches) && (React.createElement("div", { className: "qsm__close", onClick: function () { return setPanelActive(false); } },
                     React.createElement(Icon$1, { name: "ui-close", height: 25, width: 25 })))))));
 };
@@ -9091,18 +9375,16 @@ var Footer = function (_a) {
     var priceText = _a.priceText, isLoading = _a.isLoading, isOffer = _a.isOffer, roomsIsDisabled = _a.roomsIsDisabled, handleBookClick = _a.handleBookClick;
     var _b = useContext(SettingsContext$1), language = _b.language, alternativeActionText = _b.alternativeActionText, alternativeAction = _b.alternativeAction;
     var translations = getTranslations(language);
-    return (React.createElement("div", { className: "booking-product__footer" }, isLoading
-        ? (React.createElement(Loader, { loaderText: translations.PRODUCT.LOADING_PRICE }))
-        : (React.createElement(React.Fragment, null,
-            priceText && (React.createElement("div", { className: "booking-product__footer-total" },
-                React.createElement("div", { className: "booking-product__footer-label" }, translations.SHARED.TOTAL_PRICE),
-                React.createElement("div", { className: "booking-product__footer-price" }, priceText))),
-            React.createElement("div", { className: "booking-product_footer-actions" }, priceText ? (React.createElement("button", { type: "button", className: buildClassName([
-                    "cta",
-                    !roomsIsDisabled && "cta--disabled"
-                ]), onClick: handleBookClick, disabled: !roomsIsDisabled }, isOffer ? translations.PRODUCT.TO_YOUR_OFFER : translations.PRODUCT.BOOK_NOW)) : ((alternativeActionText && alternativeAction)
-                ? (React.createElement("a", { href: "#offer-form", className: "cta", onClick: alternativeAction }, alternativeActionText))
-                : (React.createElement(React.Fragment, null, translations.PRODUCT.NOT_AVAILABLE))))))));
+    return (React.createElement("div", { className: "booking-product__footer" }, isLoading ? (React.createElement(Loader, { loaderText: translations.PRODUCT.LOADING_PRICE })) : (React.createElement(React.Fragment, null,
+        priceText && (React.createElement("div", { className: "booking-product__footer-total" },
+            React.createElement("div", { className: "booking-product__footer-label" }, translations.SHARED.TOTAL_PRICE),
+            React.createElement("div", { className: "booking-product__footer-price" }, priceText))),
+        React.createElement("div", { className: "booking-product__footer-actions" }, priceText ? (React.createElement("button", { type: "button", className: buildClassName([
+                "cta",
+                !roomsIsDisabled && "cta--disabled",
+            ]), onClick: handleBookClick, disabled: !roomsIsDisabled }, isOffer
+            ? translations.PRODUCT.TO_YOUR_OFFER
+            : translations.PRODUCT.BOOK_NOW)) : alternativeActionText && alternativeAction ? (React.createElement("a", { href: "#offer-form", className: "cta", onClick: alternativeAction }, alternativeActionText)) : (React.createElement(React.Fragment, null, translations.PRODUCT.NOT_AVAILABLE)))))));
 };
 
 var Rating = function (_a) {
@@ -9121,17 +9403,15 @@ var Header = function (_a) {
         React.createElement("div", { className: "booking-product__hotel" },
             rating && React.createElement(Rating, { rating: rating }),
             React.createElement("div", { className: "booking-product__title" }, name)),
-        React.createElement("div", { className: "booking-product__price" }, isLoading
-            ? (React.createElement(Loader, { loaderText: translations.PRODUCT.LOADING_PRICE }))
-            : (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "pricing__header pricing__price" }, priceText),
-                React.createElement("div", { className: "package-icons" },
-                    priceText && (React.createElement("div", { className: "package-icons__icon" },
-                        React.createElement(Icon$1, { name: "ui-bed", title: translations.PRODUCT.STAY_INCLUDED, width: 25, height: 25 }))),
-                    hasFlight && (React.createElement("div", { className: "package-icons__icon" },
-                        React.createElement(Icon$1, { name: "ui-flight", title: translations.PRODUCT.FLIGHT_INCLUDED, width: 25, height: 25 }))),
-                    hasTransfer && (React.createElement("div", { className: "package-icons__icon" },
-                        React.createElement(Icon$1, { name: "ui-transfer", title: translations.PRODUCT.TRANSFER_INCLUDED, width: 25, height: 25 })))))))));
+        React.createElement("div", { className: "booking-product__price" }, isLoading ? (React.createElement(Loader, { loaderText: translations.PRODUCT.LOADING_PRICE })) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "pricing__header pricing__price" }, priceText),
+            React.createElement("div", { className: "package-icons" },
+                priceText && (React.createElement("div", { className: "package-icons__icon" },
+                    React.createElement(Icon$1, { name: "ui-bed", title: translations.PRODUCT.STAY_INCLUDED, width: 25, height: 25 }))),
+                hasFlight && (React.createElement("div", { className: "package-icons__icon" },
+                    React.createElement(Icon$1, { name: "ui-flight", title: translations.PRODUCT.FLIGHT_INCLUDED, width: 25, height: 25 }))),
+                hasTransfer && (React.createElement("div", { className: "package-icons__icon" },
+                    React.createElement(Icon$1, { name: "ui-transfer", title: translations.PRODUCT.TRANSFER_INCLUDED, width: 25, height: 25 })))))))));
 };
 
 var AgeSelect = function (_a) {
@@ -9164,7 +9444,10 @@ var AmountInput = function (_a) {
             onChange(Math.max(value - 1, min !== null && min !== void 0 ? min : 0));
         }
     };
-    return (React.createElement("div", { className: buildClassName(["decrement-increment", disabled && "decrement-increment--disabled"]) },
+    return (React.createElement("div", { className: buildClassName([
+            "decrement-increment",
+            disabled && "decrement-increment--disabled",
+        ]) },
         React.createElement("label", { className: "decrement-increment__label" }, label),
         React.createElement("div", { className: "decrement-increment__ui" },
             !disabled && (React.createElement("button", { type: "button", className: "button button--decrement", title: translations.INPUT.DECREASE, disabled: disabled, onClick: handleDecreaseClick },
@@ -9195,7 +9478,14 @@ var Rooms = function (_a) {
                     React.createElement("div", { className: "booking-product__rooms__heading" }, translations.SHARED.ROOMS),
                     React.createElement("div", { className: "booking-product__rooms__actions" },
                         React.createElement(AmountInput, { label: translations.PRODUCT.NUMBER_OF_ROOMS, value: currentRooms.length, disabled: isDisabled, min: 1, onChange: function (value) {
-                                setRoomState(range(0, value).map(function (roomIndex) { var _a; return (_a = currentRooms[roomIndex]) !== null && _a !== void 0 ? _a : { adults: 2, children: 0, childAges: [] }; }));
+                                setRoomState(range(0, value).map(function (roomIndex) {
+                                    var _a;
+                                    return (_a = currentRooms[roomIndex]) !== null && _a !== void 0 ? _a : {
+                                        adults: 2,
+                                        children: 0,
+                                        childAges: [],
+                                    };
+                                }));
                                 setIsTouched(true);
                             } }))),
                 React.createElement("div", { className: "booking-product__rooms-body" }, currentRooms.map(function (room, roomIndex) { return (React.createElement("div", { className: "booking-product__room", key: roomIndex },
@@ -9221,23 +9511,27 @@ var Rooms = function (_a) {
                                 setRoomState(currentRooms.map(function (room, selectorRoomIndex) {
                                     return roomIndex === selectorRoomIndex
                                         ? __assign(__assign({}, room), { childAges: room.childAges
-                                                .map(function (age, i) { return (childIndex === i ? value : age); })
+                                                .map(function (age, i) {
+                                                return childIndex === i ? value : age;
+                                            })
                                                 .sort(function (a, b) { return b - a; }) }) : room;
                                 }));
                                 setIsTouched(true);
                             } })); })))))); }))),
-            React.createElement("div", { className: "booking-product__rooms-footer" }, isDisabled
-                ? (React.createElement("button", { type: "button", className: buildClassName(["cta--secondary", "cta--add"]), title: translations.PRODUCT.EDIT, onClick: function () {
-                        setIsDisabled(false);
-                        setIsTouched(false);
-                    } },
-                    React.createElement("span", null,
-                        React.createElement(Icon$1, { name: "ui-pencil", width: 25, height: 25 }),
-                        translations.PRODUCT.EDIT)))
-                : (React.createElement("button", { type: "button", className: buildClassName(["cta", (isTouched ? "cta--secondary" : "cta--secondary"), "cta--add"]), title: translations.PRODUCT.APPLY, onClick: handleCloseClick },
-                    React.createElement("span", null,
-                        React.createElement(Icon$1, { name: "ui-check" }),
-                        translations.PRODUCT.APPLY)))))));
+            React.createElement("div", { className: "booking-product__rooms-footer" }, isDisabled ? (React.createElement("button", { type: "button", className: buildClassName(["cta--secondary", "cta--add"]), title: translations.PRODUCT.EDIT, onClick: function () {
+                    setIsDisabled(false);
+                    setIsTouched(false);
+                } },
+                React.createElement("span", null,
+                    React.createElement(Icon$1, { name: "ui-pencil", width: 25, height: 25 }),
+                    translations.PRODUCT.EDIT))) : (React.createElement("button", { type: "button", className: buildClassName([
+                    "cta",
+                    isTouched ? "cta--secondary" : "cta--secondary",
+                    "cta--add",
+                ]), title: translations.PRODUCT.APPLY, onClick: handleCloseClick },
+                React.createElement("span", null,
+                    React.createElement(Icon$1, { name: "ui-check" }),
+                    translations.PRODUCT.APPLY)))))));
 };
 
 var Product = function (_a) {
@@ -9251,7 +9545,9 @@ var Product = function (_a) {
     var _h = useState(), price = _h[0], setPrice = _h[1];
     var _j = useState(false), hasFlight = _j[0], setHasFlight = _j[1];
     var _k = useState(false), hasTransfer = _k[0], setHasTransfer = _k[1];
-    var _l = useState([{ adults: 2, children: 0, childAges: [] }]), rooms = _l[0], setRooms = _l[1];
+    var _l = useState([
+        { adults: 2, children: 0, childAges: [] },
+    ]), rooms = _l[0], setRooms = _l[1];
     var _m = useState(), dateRange = _m[0], setDateRange = _m[1];
     var _o = useState(productName), packageProductName = _o[0], setPackageProductName = _o[1];
     var fetchPackage = function (signal) { return __awaiter$1(void 0, void 0, void 0, function () {
@@ -9264,16 +9560,19 @@ var Product = function (_a) {
                         (dateRange === null || dateRange === void 0 ? void 0 : dateRange.fromDate) &&
                         (dateRange === null || dateRange === void 0 ? void 0 : dateRange.toDate) &&
                         rooms)) return [3 /*break*/, 2];
-                    apiSettingsState = (apiKey && apiUrl) ? {
-                        apiKey: apiKey,
-                        apiUrl: apiUrl
-                    } : undefined;
-                    startDate = formatISO(dateRange === null || dateRange === void 0 ? void 0 : dateRange.fromDate, { representation: "date" }) + "T00:00:00Z";
+                    apiSettingsState = apiKey && apiUrl
+                        ? {
+                            apiKey: apiKey,
+                            apiUrl: apiUrl,
+                        }
+                        : undefined;
+                    startDate = formatISO(dateRange === null || dateRange === void 0 ? void 0 : dateRange.fromDate, { representation: "date" }) +
+                        "T00:00:00Z";
                     endDate = formatISO(dateRange === null || dateRange === void 0 ? void 0 : dateRange.toDate, { representation: "date" }) + "T00:00:00Z";
                     requestRooms = rooms.map(function (room, i) {
                         var requestRoom = {
                             index: i,
-                            pax: []
+                            pax: [],
                         };
                         for (var a = 0; a < room.adults; a++) {
                             requestRoom.pax.push({
@@ -9351,7 +9650,7 @@ var Product = function (_a) {
         var paramString = Object.keys(params)
             .map(function (key) { return "".concat(key, "=").concat(params[key]); })
             .join("&");
-        window.location.href = basePath.startsWith('/')
+        window.location.href = basePath.startsWith("/")
             ? "".concat(window.location.protocol, "//").concat(window.location.host).concat(basePath, "?").concat(paramString)
             : "".concat(path).concat(path.endsWith("/") ? "" : "/").concat(basePath, "?").concat(paramString);
     };
@@ -9376,7 +9675,7 @@ var Product = function (_a) {
     }, [
         (_b = dateRange === null || dateRange === void 0 ? void 0 : dateRange.fromDate) === null || _b === void 0 ? void 0 : _b.valueOf(),
         (_c = dateRange === null || dateRange === void 0 ? void 0 : dateRange.toDate) === null || _c === void 0 ? void 0 : _c.valueOf(),
-        JSON.stringify(rooms)
+        JSON.stringify(rooms),
     ]);
     useEffect(function () {
         var params = new URLSearchParams(location.search);
@@ -9512,7 +9811,7 @@ var fetchAccommodationViews$1 = function (request, signal, apiSettings) { return
 var packageApi = {
     fetchDetails: fetchDetails,
     fetchAgents: fetchAgents$1,
-    fetchAccommodationViews: fetchAccommodationViews$1
+    fetchAccommodationViews: fetchAccommodationViews$1,
 };
 
 var ROOM_OPTIONS_FORM_STEP = 1;
@@ -9663,7 +9962,11 @@ var selectSeparatePackagePriceDetails = createSelector(selectPackagePriceDetails
     var result = [];
     var filteredPriceDetails = pricedetails.filter(function (priceDetail) { return priceDetail.isSeparate; });
     filteredPriceDetails.forEach(function (priceDetail) {
-        var priceDetailToMerge = result.find(function (x) { return x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType; });
+        var priceDetailToMerge = result.find(function (x) {
+            return x.productCode === priceDetail.productCode &&
+                x.accommodationCode === priceDetail.accommodationCode &&
+                x.productType === priceDetail.productType;
+        });
         if (priceDetailToMerge) {
             priceDetailToMerge.total += priceDetail.total;
             priceDetailToMerge.price += priceDetail.price;
@@ -9719,15 +10022,23 @@ var selectPackageFlights = function (state) {
     var _a, _b;
     return ({
         outward: (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.outwardFlights,
-        return: (_b = state.booking.package) === null || _b === void 0 ? void 0 : _b.returnFlights
+        return: (_b = state.booking.package) === null || _b === void 0 ? void 0 : _b.returnFlights,
     });
 };
 var selectActiveOption = function (state) { var _a; return (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; }); };
 var selectPackageAirlineGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, function (option, departureFlight, returnFlight) {
-    return option === null || option === void 0 ? void 0 : option.airlineGroups.filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+    return option === null || option === void 0 ? void 0 : option.airlineGroups.filter(function (x) {
+        var _a, _b;
+        return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+            x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+    });
 });
 var selectPackageAirportGroups = createSelector(selectActiveOption, selectDepartureFlight, selectReturnFlight, function (option, departureFlight, returnFlight) {
-    return option === null || option === void 0 ? void 0 : option.airportGroups.filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+    return option === null || option === void 0 ? void 0 : option.airportGroups.filter(function (x) {
+        var _a, _b;
+        return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+            x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+    });
 });
 var selectApiSettings = function (state) { return state.apiSettings; };
 var selectIsUnavailable = function (state) {
@@ -9741,7 +10052,8 @@ var selectLanguageCode = function (state) {
 var selectTranslations = function (state) {
     var _a, _b;
     var defaultStaticTranslations = getTranslations(state.booking.languageCode);
-    var dynamicTranslations = (_b = (state.booking.translations && ((_a = state.booking.translations.find(function (x) { return x.language == state.booking.languageCode; })) === null || _a === void 0 ? void 0 : _a.value))) !== null && _b !== void 0 ? _b : {};
+    var dynamicTranslations = (_b = (state.booking.translations &&
+        ((_a = state.booking.translations.find(function (x) { return x.language == state.booking.languageCode; })) === null || _a === void 0 ? void 0 : _a.value))) !== null && _b !== void 0 ? _b : {};
     var merged = {};
     for (var _i = 0, _c = Array.from(new Set(__spreadArray(__spreadArray([], Object.keys(defaultStaticTranslations), true), Object.keys(dynamicTranslations), true))); _i < _c.length; _i++) {
         var key = _c[_i];
@@ -9784,15 +10096,19 @@ var selectAccommodationCodes = function (state) {
     var _a;
     var accommodationCodes = [];
     (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.forEach(function (o) {
-        o.rooms.forEach(function (r) { return r.options.forEach(function (ro) {
-            if (!accommodationCodes.some(function (y) { return y === ro.accommodationCode; })) {
-                accommodationCodes.push(ro.accommodationCode);
-            }
-        }); });
+        o.rooms.forEach(function (r) {
+            return r.options.forEach(function (ro) {
+                if (!accommodationCodes.some(function (y) { return y === ro.accommodationCode; })) {
+                    accommodationCodes.push(ro.accommodationCode);
+                }
+            });
+        });
     });
     return accommodationCodes;
 };
-var selectAccommodationViews = function (state) { return state.booking.accommodationViews; };
+var selectAccommodationViews = function (state) {
+    return state.booking.accommodationViews;
+};
 var selectBookingQuery = function (state) {
     var bookingAttributes = state.booking.bookingAttributes;
     if (!bookingAttributes) {
@@ -10037,7 +10353,7 @@ var fetchAgents = createAsyncThunk("booking/agents", function (_, _a) {
 var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
     _a.dispatch; var getState = _a.getState, signal = _a.signal;
     return __awaiter$1(void 0, void 0, void 0, function () {
-        var state, officeId, productAttributes, bookingAttributes, agentId, rooms, languageCode, requestRooms, isAllotment, request;
+        var state, officeId, productAttributes, bookingAttributes, agentId, rooms, languageCode, requestRooms, isAllotment, searchType, outwardFlight, returnFlight, request;
         var _b;
         return __generator$1(this, function (_c) {
             switch (_c.label) {
@@ -10075,11 +10391,29 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
                     isAllotment = bookingAttributes.tourCode ||
                         bookingAttributes.allotmentName ||
                         (bookingAttributes.allotmentIds && bookingAttributes.allotmentIds.length);
+                    searchType = isAllotment
+                        ? 1 // ALLOTMENT
+                        : 0;
+                    if (bookingAttributes.flightRouteId && bookingAttributes.flight) {
+                        searchType = 3; // FLIGHT;
+                        outwardFlight = {
+                            flightCode: bookingAttributes.flight.outwardCode,
+                            startDateTime: bookingAttributes.flight.outwardDepartureDate,
+                            endDateTime: bookingAttributes.flight.outwardArrivalDate,
+                        };
+                        if (bookingAttributes.flight.returnCode) {
+                            returnFlight = {
+                                flightCode: bookingAttributes.flight.returnCode,
+                                startDateTime: bookingAttributes.flight.returnDepartureDate,
+                                endDateTime: bookingAttributes.flight.returnArrivalDate,
+                            };
+                        }
+                    }
                     request = {
                         officeId: officeId,
                         agentId: agentId,
                         payload: {
-                            searchType: isAllotment ? 1 : 0,
+                            searchType: searchType,
                             catalogueId: bookingAttributes.catalog,
                             productCode: productAttributes.productCode,
                             fromDate: bookingAttributes.startDate,
@@ -10089,6 +10423,9 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
                             allotmentIds: (_b = bookingAttributes.allotmentIds) !== null && _b !== void 0 ? _b : [],
                             tourCode: bookingAttributes.tourCode,
                             rooms: requestRooms,
+                            routeId: bookingAttributes.flightRouteId,
+                            outwardFlight: outwardFlight,
+                            returnFlight: returnFlight,
                         },
                     };
                     return [4 /*yield*/, packageApi.fetchDetails(request, signal, languageCode, state.apiSettings)];
@@ -10111,13 +10448,13 @@ var fetchAccommodationViews = createAsyncThunk("booking/accommodationViews", fun
                     accommodationCodes = selectAccommodationCodes(state);
                     productCode = selectProductCode(state);
                     if (!productCode) {
-                        throw Error('No product selected');
+                        throw Error("No product selected");
                     }
                     request = {
                         languageCode: languageCode,
                         productCode: productCode,
                         accommodationCodes: accommodationCodes,
-                        contentViewId: state.booking.accommodationViewId
+                        contentViewId: state.booking.accommodationViewId,
                     };
                     return [4 /*yield*/, packageApi.fetchAccommodationViews(request, signal, state.apiSettings)];
                 case 1: return [2 /*return*/, _b.sent()];
@@ -10168,24 +10505,31 @@ var changeReturnFlight = function (state, flight) {
 var changePackageOption = function (state) {
     var selectedOutward = state.outwardFlights.find(function (x) { return x.isSelected; });
     var selectedReturn = state.returnFlights.find(function (x) { return x.isSelected; });
-    var validOptions = selectedOutward.validOptions.filter(function (x) { return selectedReturn.validOptions.some(function (y) { return x === y; }); });
+    var validOptions = selectedOutward.validOptions.filter(function (x) {
+        return selectedReturn.validOptions.some(function (y) { return x === y; });
+    });
     var currentOption = state.options.find(function (x) { return x.isSelected; });
     if (validOptions.some(function (x) { return x === currentOption.id; }))
         return;
-    var firstOption = state.options.find(function (x) { return validOptions.some(function (y) { return y === x.id; }); });
+    var firstOption = state.options.find(function (x) {
+        return validOptions.some(function (y) { return y === x.id; });
+    });
     currentOption.isSelected = false;
     firstOption.isSelected = true;
     var currentRooms = currentOption.rooms.map(function (r) {
         var selectedOption = r.options.find(function (o) { return o.isSelected; });
         return {
             accommodation: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.accommodationCode,
-            regime: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeCode
+            regime: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeCode,
         };
     });
     firstOption.rooms.forEach(function (r, i) {
         var currentRoom = currentRooms[i];
         var selectedOption = r.options.find(function (o) { return o.isSelected; });
-        var selection = r.options.find(function (x) { return x.accommodationCode === currentRoom.accommodation && x.regimeCode === currentRoom.regime; });
+        var selection = r.options.find(function (x) {
+            return x.accommodationCode === currentRoom.accommodation &&
+                x.regimeCode === currentRoom.regime;
+        });
         if (selection) {
             if (selection.entryLineGuid !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entryLineGuid)) {
                 if (selectedOption)
@@ -10315,7 +10659,7 @@ var bookingSlice = createSlice({
         },
         setAccommodationViewId: function (state, action) {
             state.accommodationViewId = action.payload;
-        }
+        },
     },
     extraReducers: function (builder) {
         builder.addCase(fetchPackageDetails.fulfilled, function (state, action) {
@@ -10404,7 +10748,10 @@ var bookingSlice = createSlice({
                         }
                         // Fallback to an option that has the requested accommodation OR regime if the requested option is not available. If no fallback is available, select the first option.
                         if (!activeOption_1.rooms[i].options.some(function (x) { return x.isSelected; })) {
-                            var fallbackOption = activeOption_1.rooms[i].options.find(function (x) { return x.accommodationCode == room.accommodationCode || x.regimeCode == room.regimeCode; });
+                            var fallbackOption = activeOption_1.rooms[i].options.find(function (x) {
+                                return x.accommodationCode == room.accommodationCode ||
+                                    x.regimeCode == room.regimeCode;
+                            });
                             if (fallbackOption) {
                                 fallbackOption.isSelected = true;
                             }
@@ -10434,6 +10781,7 @@ var bookingReducer = bookingSlice.reducer;
 
 var SettingsContext = React.createContext({
     language: "nl-BE",
+    token: "",
     generatePaymentUrl: false,
     currency: "EUR",
     officeId: 1,
@@ -10445,22 +10793,28 @@ var SettingsContext = React.createContext({
     basePath: "/boeken",
     roomOptions: {
         pathSuffix: "/",
+        reportPrintActionId: null,
     },
     flightOptions: {
         pathSuffix: "/vluchten",
+        reportPrintActionId: null,
     },
     options: {
         pathSuffix: "/opties",
+        reportPrintActionId: null,
     },
     travellers: {
         pathSuffix: "/reizigers",
+        reportPrintActionId: null,
     },
     summary: {
         pathSuffix: "/samenvatting",
         checkboxes: null,
+        reportPrintActionId: null,
     },
     confirmation: {
         pathSuffix: "/bevestiging",
+        reportPrintActionId: null,
     },
     error: {
         pathSuffix: "/mislukt",
@@ -10612,6 +10966,13 @@ var Icon = function (_a) {
                 React.createElement(HTMLComment, { text: "!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." }),
                 title && React.createElement("title", null, title),
                 React.createElement("path", { d: "M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" })));
+        case "ui-trashcan":
+            return (React.createElement("svg", { className: ["icon", "icon--".concat(name), className]
+                    .filter(function (className) { return !isEmpty(className); })
+                    .join(" "), width: width, height: height, viewBox: "0 0 448 512" },
+                React.createElement(HTMLComment, { text: "!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." }),
+                title && React.createElement("title", null, title),
+                React.createElement("path", { d: "M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" })));
         case "ui-home":
         case "ui-filter":
             return (React.createElement("svg", { className: ["icon", "icon--".concat(name), className]
@@ -10761,7 +11122,7 @@ var Confirmation = function () {
     var titleText = settings.isOffer
         ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
         : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
-    return (React.createElement("div", { className: "form", id: "booking--confirmation" },
+    return (React.createElement("div", { className: "form form__booking--message", id: "booking--confirmation" },
         React.createElement("div", { className: "form__region" },
             React.createElement("div", { className: "form__row" },
                 React.createElement("div", { className: "form__group" },
@@ -10775,7 +11136,9 @@ var Confirmation = function () {
                         React.createElement("p", null,
                             translations.CONFIRMATION.MESSAGE_TEXT1,
                             React.createElement("br", null),
-                            settings.isOffer ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING),
+                            settings.isOffer
+                                ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER
+                                : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING),
                         React.createElement("p", null,
                             translations.CONFIRMATION.QUESTIONS_TEXT1,
                             " ",
@@ -10799,7 +11162,7 @@ var Error$1 = function () {
         }
     };
     var translations = useSelector(selectTranslations);
-    return (React.createElement("div", { className: "form" },
+    return (React.createElement("div", { className: "form form__booking--message" },
         React.createElement("div", { className: "form__region" },
             React.createElement("div", { className: "form__row" },
                 React.createElement("div", { className: "form__group" },
@@ -10858,11 +11221,11 @@ var MultiRangeFilter = function (_a) {
             React.createElement("div", { className: "min-box" }, valueFormatter(min)),
             React.createElement("div", { className: "max-box" }, valueFormatter(max))),
         React.createElement("div", { className: "range-slider" },
-            React.createElement("div", { className: "slider-track", style: { 'left': leftPercentage + '%', right: rightPercentage + '%' } }),
+            React.createElement("div", { className: "slider-track", style: { left: leftPercentage + "%", right: rightPercentage + "%" } }),
             React.createElement("input", { type: "range", min: min, max: max, value: minVal, onChange: slideMin, onMouseDown: startDrag, onMouseUp: stopDrag, onTouchStart: startDrag, onTouchEnd: stopDrag, className: "min-val" }),
             React.createElement("input", { type: "range", min: min, max: max, value: maxVal, onChange: slideMax, onMouseDown: startDrag, onMouseUp: stopDrag, onTouchStart: startDrag, onTouchEnd: stopDrag, className: "max-val" }),
-            isDragging && React.createElement("div", { className: "min-tooltip" }, valueFormatter(minVal)),
-            isDragging && React.createElement("div", { className: "max-tooltip" }, valueFormatter(maxVal)))));
+            isDragging && (React.createElement("div", { className: "min-tooltip" }, valueFormatter(minVal))),
+            isDragging && (React.createElement("div", { className: "max-tooltip" }, valueFormatter(maxVal))))));
 };
 
 /*interface FlightGroup {
@@ -10885,7 +11248,9 @@ var buildGroupedFlights = function (outwardFlights, returnFlights) {
         else {
             var outwardCode = outwardFlight.code.substring(0, 7);
             var returnCode_1 = outwardCode.split(" ").reduce(function (a, b) { return "".concat(b, " ").concat(a); });
-            returnFlights.filter(function (x) { return x.code.startsWith(returnCode_1); }).forEach(function (returnFlight) {
+            returnFlights
+                .filter(function (x) { return x.code.startsWith(returnCode_1); })
+                .forEach(function (returnFlight) {
                 pairs.push({ outward: outwardFlight, return: returnFlight });
             });
         }
@@ -10899,7 +11264,7 @@ var buildGroupedFlights = function (outwardFlights, returnFlights) {
             outward: outwardFlightDetails,
             return: returnFlightDetails,
             selectedOutward: x.outward,
-            selectedReturn: x.return
+            selectedReturn: x.return,
         };
     });
     return results;
@@ -10918,7 +11283,7 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
     var highestDepartureChangeDuration = 0;
     outwardFlights.forEach(function (flight) {
         var _a;
-        var airlineCode = flight.code.split('/')[1];
+        var airlineCode = flight.code.split("/")[1];
         if ((_a = flight.flightMetaData.flightLines) === null || _a === void 0 ? void 0 : _a.length) {
             var firstLine_1 = flight.flightMetaData.flightLines[0];
             if (!airports.some(function (x) { return x.value === firstLine_1.departureAirport; })) {
@@ -10926,7 +11291,7 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                     value: firstLine_1 === null || firstLine_1 === void 0 ? void 0 : firstLine_1.departureAirport,
                     label: firstLine_1.departureAirportDescription,
                     count: 0,
-                    isSelected: false
+                    isSelected: false,
                 });
             }
         }
@@ -10935,20 +11300,20 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                 value: airlineCode,
                 label: flight.airlineDescription,
                 count: 0,
-                isSelected: false
+                isSelected: false,
             });
         }
         var stopCount = flight.flightMetaData.flightLines.length - 1;
-        if (!numberOfStops.some(function (x) { return x.value === (stopCount + ''); })) {
+        if (!numberOfStops.some(function (x) { return x.value === stopCount + ""; })) {
             numberOfStops.push({
-                value: (stopCount + ''),
+                value: stopCount + "",
                 label: stopCount === 0
                     ? translations.FLIGHTS_FORM.DIRECT_FLIGHT
                     : stopCount == 1
                         ? "".concat(stopCount, " ").concat(translations.FLIGHTS_FORM.STOP)
                         : "".concat(stopCount, " ").concat(translations.FLIGHTS_FORM.STOPS),
                 count: 0,
-                isSelected: false
+                isSelected: false,
             });
         }
         var departureTime = flight.flightMetaData.flightLines[0].departureTime;
@@ -10958,7 +11323,7 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                 value: timeBracket,
                 label: getBracketTranslation(timeBracket, translations),
                 count: 0,
-                isSelected: false
+                isSelected: false,
             });
         }
         var travelDurationInMinutes = minutesFromTicks(flight.flightMetaData.durationInTicks);
@@ -10994,7 +11359,7 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                 value: timeBracket,
                 label: getBracketTranslation(timeBracket, translations),
                 count: 0,
-                isSelected: false
+                isSelected: false,
             });
         }
     });
@@ -11008,14 +11373,14 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                 min: lowestDepartureTravelDuration,
                 max: highestDepartureTravelDuration,
                 selectedMin: lowestDepartureTravelDuration,
-                selectedMax: highestDepartureTravelDuration
+                selectedMax: highestDepartureTravelDuration,
             },
             changeDuration: {
                 min: lowestDepartureChangeDuration,
                 max: highestDepartureChangeDuration,
                 selectedMin: lowestDepartureChangeDuration,
-                selectedMax: highestDepartureChangeDuration
-            }
+                selectedMax: highestDepartureChangeDuration,
+            },
         },
         return: {
             departurePeriod: returnDeparturePeriods,
@@ -11023,15 +11388,15 @@ var buildFilterOptions = function (outwardFlights, returnFlights, translations)
                 min: lowestReturnTravelDuration,
                 max: highestReturnTravelDuration,
                 selectedMin: lowestReturnTravelDuration,
-                selectedMax: highestReturnTravelDuration
+                selectedMax: highestReturnTravelDuration,
             },
             changeDuration: {
                 min: lowestReturnChangeDuration,
                 max: highestReturnChangeDuration,
                 selectedMin: lowestReturnChangeDuration,
-                selectedMax: highestReturnChangeDuration
-            }
-        }
+                selectedMax: highestReturnChangeDuration,
+            },
+        },
     };
 };
 var filterGroupedFlights = function (groups, filterOptions) {
@@ -11040,15 +11405,21 @@ var filterGroupedFlights = function (groups, filterOptions) {
     var filteredGroups = groups;
     if (filterOptions.airlines.some(function (x) { return x.isSelected; })) {
         var selectedAirlineCodes_1 = filterOptions.airlines.filter(function (x) { return x.isSelected; });
-        filteredGroups = filteredGroups.filter(function (x) { return selectedAirlineCodes_1.some(function (y) { return y.value === x.outward.airlineCode; }); });
+        filteredGroups = filteredGroups.filter(function (x) {
+            return selectedAirlineCodes_1.some(function (y) { return y.value === x.outward.airlineCode; });
+        });
     }
     if (filterOptions.airports.some(function (x) { return x.isSelected; })) {
         var selectedAirlineCodes_2 = filterOptions.airports.filter(function (x) { return x.isSelected; });
-        filteredGroups = filteredGroups.filter(function (x) { return selectedAirlineCodes_2.some(function (y) { return y.value === x.outward.departureAirportCode; }); });
+        filteredGroups = filteredGroups.filter(function (x) {
+            return selectedAirlineCodes_2.some(function (y) { return y.value === x.outward.departureAirportCode; });
+        });
     }
     if (filterOptions.numberOfStops.some(function (x) { return x.isSelected; })) {
         var selectedNumberOfStops_1 = filterOptions.numberOfStops.filter(function (x) { return x.isSelected; });
-        filteredGroups = filteredGroups.filter(function (x) { return selectedNumberOfStops_1.some(function (y) { return parseInt(y.value) === (x.outward.flightLines.length - 1); }); });
+        filteredGroups = filteredGroups.filter(function (x) {
+            return selectedNumberOfStops_1.some(function (y) { return parseInt(y.value) === x.outward.flightLines.length - 1; });
+        });
     }
     filteredGroups = filterGroupedFlightByDirection(filteredGroups, true, filterOptions.outward);
     filteredGroups = filterGroupedFlightByDirection(filteredGroups, false, filterOptions.return);
@@ -11058,10 +11429,25 @@ var filterGroupedFlightByDirection = function (groups, isOutward, directionFilte
     var filteredGroups = groups;
     if (directionFilter.departurePeriod.some(function (x) { return x.isSelected; })) {
         var selectedDeparturePeriods_1 = directionFilter.departurePeriod.filter(function (x) { return x.isSelected; });
-        filteredGroups = filteredGroups.filter(function (x) { return selectedDeparturePeriods_1.some(function (y) { return y.value === determineTimeBracket((isOutward ? x.outward : x.return).departureTime); }); });
+        filteredGroups = filteredGroups.filter(function (x) {
+            return selectedDeparturePeriods_1.some(function (y) {
+                return y.value ===
+                    determineTimeBracket((isOutward ? x.outward : x.return).departureTime);
+            });
+        });
     }
-    filteredGroups = filteredGroups.filter(function (x) { return directionFilter.travelDuration.selectedMin <= (isOutward ? x.outward : x.return).travelDurationMinutes && (isOutward ? x.outward : x.return).travelDurationMinutes <= directionFilter.travelDuration.selectedMax; });
-    return filteredGroups.filter(function (x) { return directionFilter.changeDuration.selectedMin <= (isOutward ? x.outward : x.return).changeDurationMinutes && (isOutward ? x.outward : x.return).changeDurationMinutes <= directionFilter.changeDuration.selectedMax; });
+    filteredGroups = filteredGroups.filter(function (x) {
+        return directionFilter.travelDuration.selectedMin <=
+            (isOutward ? x.outward : x.return).travelDurationMinutes &&
+            (isOutward ? x.outward : x.return).travelDurationMinutes <=
+                directionFilter.travelDuration.selectedMax;
+    });
+    return filteredGroups.filter(function (x) {
+        return directionFilter.changeDuration.selectedMin <=
+            (isOutward ? x.outward : x.return).changeDurationMinutes &&
+            (isOutward ? x.outward : x.return).changeDurationMinutes <=
+                directionFilter.changeDuration.selectedMax;
+    });
 };
 var formatMinutes = function (minutes) {
     var hh = Math.floor(minutes / 60);
@@ -11071,7 +11457,7 @@ var formatMinutes = function (minutes) {
 var getFlightDetails = function (flight) {
     var firstLine = flight.flightMetaData.flightLines[0];
     var lastLine = flight.flightMetaData.flightLines[flight.flightMetaData.flightLines.length - 1];
-    var airlineCode = flight.code.split('/')[1];
+    var airlineCode = flight.code.split("/")[1];
     var waitDurations = getWaitDurations(flight.flightMetaData.flightLines);
     return {
         airline: flight.airlineDescription,
@@ -11100,7 +11486,7 @@ var getFlightDetails = function (flight) {
             number: "".concat(x.airlineCode, " ").concat(x.number),
             travelDuration: formatDuration(x.durationInTicks),
             waitDuration: waitDurations.length - 1 <= i ? waitDurations[i] : undefined,
-        }); })
+        }); }),
     };
 };
 var isNextDay = function (startDateString, endDateString) {
@@ -11131,11 +11517,11 @@ var getWaitDuration = function (arrivalDateString, arrivalTime, departureDateStr
 };
 var getWaitDurationInMinutes = function (arrivalDateString, arrivalTime, departureDateString, departureTime) {
     var arrivalDate = parseISO(arrivalDateString);
-    var arrivalTimeParts = arrivalTime.split(':');
+    var arrivalTimeParts = arrivalTime.split(":");
     arrivalDate.setHours(parseInt(arrivalTimeParts[0]));
     arrivalDate.setMinutes(parseInt(arrivalTimeParts[1]));
     var departureDate = parseISO(departureDateString);
-    var departureTimeParts = departureTime.split(':');
+    var departureTimeParts = departureTime.split(":");
     departureDate.setHours(parseInt(departureTimeParts[0]));
     departureDate.setMinutes(parseInt(departureTimeParts[1]));
     return differenceInMinutes(departureDate, arrivalDate);
@@ -11176,32 +11562,32 @@ var minutesFromTicks = function (ticks) {
 };
 var formatDuration = function (ticks) {
     if (!ticks)
-        return '';
+        return "";
     var totalSeconds = ticks / 10000000;
     var hh = Math.floor(totalSeconds / 3600);
     var mm = Math.floor((totalSeconds % 3600) / 60);
     return pad(hh, 2) + ":" + pad(mm, 2);
 };
 var pad = function (input, width) {
-    var n = input + '';
-    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
+    var n = input + "";
+    return n.length >= width ? n : new Array(width - n.length + 1).join("0") + n;
 };
 var determineTimeBracket = function (input) {
-    var time = parseInt(input.replace(':', ''));
+    var time = parseInt(input.replace(":", ""));
     if (time <= 500)
-        return '0000-0500';
+        return "0000-0500";
     if (time > 500 && time <= 1200)
-        return '0500-1200';
+        return "0500-1200";
     if (time > 1200 && time <= 1800)
-        return '1201-1800';
-    return '1800-2400';
+        return "1201-1800";
+    return "1800-2400";
 };
 var getBracketTranslation = function (input, translations) {
-    if (input === '0000-0500')
+    if (input === "0000-0500")
         return translations.FLIGHTS_FORM.NIGHT_DEPARTURE;
-    if (input === '0500-1200')
+    if (input === "0500-1200")
         return translations.FLIGHTS_FORM.MORNING_DEPARTURE;
-    if (input === '1200-1800')
+    if (input === "1200-1800")
         return translations.FLIGHTS_FORM.AFTERNOON_DEPARTURE;
     return translations.FLIGHTS_FORM.EVENING_DEPARTURE;
 };
@@ -11226,7 +11612,8 @@ var FlightFilter = function (_a) {
     var filterRef = useRef(null);
     useEffect(function () {
         function handleClickOutside(event) {
-            if (filterRef.current && !filterRef.current.contains(event.target)) {
+            if (filterRef.current &&
+                !filterRef.current.contains(event.target)) {
                 setFiltersVisible(false);
             }
         }
@@ -11294,9 +11681,11 @@ var FlightFilter = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { type: "button", className: "cta cta--filter", onClick: function () { return setFiltersVisible(!filtersVisible); } },
             React.createElement(Icon, { name: "ui-filter", width: 11, height: 10 }),
-            React.createElement("span", null, translations.FLIGHTS_FORM.FILTER_OPTIONS),
-            filtersVisible),
-        React.createElement("div", { ref: filterRef, className: buildClassName(["flight__filter", filtersVisible && "flight__filter--active"]) },
+            React.createElement("span", null, translations.FLIGHTS_FORM.FILTER_OPTIONS)),
+        React.createElement("div", { ref: filterRef, className: buildClassName([
+                "flight__filter",
+                filtersVisible && "flight__filter--active",
+            ]) },
             React.createElement("div", { className: "flight__filter__header" },
                 React.createElement("div", { className: "flight__filter__header__title" },
                     React.createElement("h3", null, translations.FLIGHTS_FORM.FILTER_OPTIONS),
@@ -11308,14 +11697,16 @@ var FlightFilter = function (_a) {
                             " ",
                             translations.FLIGHTS_FORM.FLIGHTS_FOUND_2),
                         " ",
-                        translations.FLIGHTS_FORM.FLIGHTS_FOUND_3))),
+                        translations.FLIGHTS_FORM.FLIGHTS_FOUND_3)),
+                React.createElement("button", { type: "button", className: "cta cta--close", onClick: function () { return setFiltersVisible(false); } },
+                    React.createElement(Icon, { name: "ui-close", width: 25, height: 25 }))),
             React.createElement("div", { className: "flight__filter__body" },
                 React.createElement("div", { className: "flight__filter__group" },
                     React.createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.AIRLINES),
                     React.createElement("div", { className: "flight__filter__group__wrapper" }, filterOptions.airlines.map(function (option, k) { return (React.createElement("div", { className: "tree", key: k },
                         React.createElement("div", { className: "checkbox flight__filter__checkbox" },
-                            React.createElement("label", { htmlFor: 'airline_' + option.value, className: "checkbox__label" },
-                                React.createElement("input", { type: "checkbox", id: 'airline_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateAirlineFilter(option.value); } }),
+                            React.createElement("label", { htmlFor: "airline_" + option.value, className: "checkbox__label" },
+                                React.createElement("input", { type: "checkbox", id: "airline_" + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateAirlineFilter(option.value); } }),
                                 React.createElement("span", { className: "radiobutton__label-text" },
                                     option.label,
                                     " ",
@@ -11327,8 +11718,8 @@ var FlightFilter = function (_a) {
                     React.createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.AIRPORTS),
                     React.createElement("div", { className: "flight__filter__group__wrapper" }, filterOptions.airports.map(function (option, k) { return (React.createElement("div", { className: "tree", key: k },
                         React.createElement("div", { className: "checkbox flight__filter__checkbox" },
-                            React.createElement("label", { htmlFor: 'airport_' + option.value, className: "checkbox__label" },
-                                React.createElement("input", { type: "checkbox", id: 'airport_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateAirportFilter(option.value); } }),
+                            React.createElement("label", { htmlFor: "airport_" + option.value, className: "checkbox__label" },
+                                React.createElement("input", { type: "checkbox", id: "airport_" + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateAirportFilter(option.value); } }),
                                 React.createElement("span", { className: "radiobutton__label-text" },
                                     option.label,
                                     " ",
@@ -11340,8 +11731,8 @@ var FlightFilter = function (_a) {
                     React.createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.NUMBER_OF_STOPS),
                     React.createElement("div", { className: "flight__filter__group__wrapper" }, filterOptions.numberOfStops.map(function (option, k) { return (React.createElement("div", { className: "tree", key: k },
                         React.createElement("div", { className: "checkbox flight__filter__checkbox" },
-                            React.createElement("label", { htmlFor: 'stops_' + option.value, className: "checkbox__label" },
-                                React.createElement("input", { type: "checkbox", id: 'stops_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateStopsFilter(option.value); } }),
+                            React.createElement("label", { htmlFor: "stops_" + option.value, className: "checkbox__label" },
+                                React.createElement("input", { type: "checkbox", id: "stops_" + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateStopsFilter(option.value); } }),
                                 React.createElement("span", { className: "radiobutton__label-text" },
                                     option.label,
                                     " ",
@@ -11355,8 +11746,8 @@ var FlightFilter = function (_a) {
                         React.createElement("p", null, translations.FLIGHTS_FORM.DEPARTURE_TIME),
                         filterOptions.outward.departurePeriod.map(function (option, k) { return (React.createElement("div", { className: "tree", key: k },
                             React.createElement("div", { className: "checkbox flight__filter__checkbox" },
-                                React.createElement("label", { htmlFor: 'outward_time_' + option.value, className: "checkbox__label" },
-                                    React.createElement("input", { type: "checkbox", id: 'outward_time_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateOutwardDeparture(option.value); } }),
+                                React.createElement("label", { htmlFor: "outward_time_" + option.value, className: "checkbox__label" },
+                                    React.createElement("input", { type: "checkbox", id: "outward_time_" + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateOutwardDeparture(option.value); } }),
                                     React.createElement("span", { className: "radiobutton__label-text" },
                                         option.label,
                                         " ",
@@ -11376,8 +11767,8 @@ var FlightFilter = function (_a) {
                         React.createElement("p", null, translations.FLIGHTS_FORM.DEPARTURE_TIME),
                         filterOptions.return.departurePeriod.map(function (option, k) { return (React.createElement("div", { className: "tree", key: k },
                             React.createElement("div", { className: "checkbox flight__filter__checkbox" },
-                                React.createElement("label", { htmlFor: 'return_time_' + option.value, className: "checkbox__label" },
-                                    React.createElement("input", { type: "checkbox", id: 'return_time_' + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateReturnDeparture(option.value); } }),
+                                React.createElement("label", { htmlFor: "return_time_" + option.value, className: "checkbox__label" },
+                                    React.createElement("input", { type: "checkbox", id: "return_time_" + option.value, className: "checkbox__input checkbox__input--parent", onClick: function () { return updateReturnDeparture(option.value); } }),
                                     React.createElement("span", { className: "radiobutton__label-text" },
                                         option.label,
                                         " ",
@@ -11524,9 +11915,15 @@ var FlightOptionFlight = function (_a) {
                         React.createElement("p", null, getDateText(details.arrivalDate)),
                         details.isNextDay && (React.createElement("span", { className: "flight__info__times__days" }, translations.FLIGHTS_FORM.PLUS_ONE_DAY))))),
             React.createElement("div", { className: "flight__detail__btn__wrapper" },
-                React.createElement("div", { className: buildClassName(["flight__detail__btn", isDetailVisible && "flight__detail__btn--active"]), onClick: function () { return setIsDetailVisible(!isDetailVisible); } },
+                React.createElement("div", { className: buildClassName([
+                        "flight__detail__btn",
+                        isDetailVisible && "flight__detail__btn--active",
+                    ]), onClick: function () { return setIsDetailVisible(!isDetailVisible); } },
                     React.createElement(Icon, { name: "ui-chevron", className: "flight__detail__btn__arrow", width: 16, height: 16 })))),
-        React.createElement("div", { className: buildClassName(["flight__detail", isDetailVisible && "flight__detail--active"]) }, details.flightLines.map(function (flightLine, flightLineIndex) { return (React.createElement(React.Fragment, { key: flightLineIndex },
+        React.createElement("div", { className: buildClassName([
+                "flight__detail",
+                isDetailVisible && "flight__detail--active",
+            ]) }, details.flightLines.map(function (flightLine, flightLineIndex) { return (React.createElement(React.Fragment, { key: flightLineIndex },
             React.createElement("div", { className: "flight__info" },
                 React.createElement("div", { className: "flight__info__times__wrapper" },
                     React.createElement("div", { className: "flight__info__times" },
@@ -11556,16 +11953,17 @@ var FlightOptionFlight = function (_a) {
                         React.createElement("span", null, translations.FLIGHTS_FORM.STOP_TIME),
                         React.createElement("strong", null, flightLine.waitDuration))),
                 React.createElement("div", { className: "flight__info__times flight__info__times--arrival" }))))); })),
-        React.createElement("div", { className: buildClassName(["flight__rate", isOptionsVisible && "flight__rate--active"]) })));
+        React.createElement("div", { className: buildClassName([
+                "flight__rate",
+                isOptionsVisible && "flight__rate--active",
+            ]) })));
 };
 
 var FlightOption = function (_a) {
     var item = _a.item, isSelected = _a.isSelected, currentPrice = _a.currentPrice, onChange = _a.onChange;
     var translations = useSelector(selectTranslations);
     var ownTotalPrice = item.selectedOutward.price + item.selectedReturn.price;
-    var priceDifference = item.isSelected
-        ? 0
-        : ownTotalPrice - currentPrice;
+    var priceDifference = item.isSelected ? 0 : ownTotalPrice - currentPrice;
     var outwardVisible = useState(false)[0];
     var returnVisible = useState(false)[0];
     var handleButtonClick = function () {
@@ -11579,11 +11977,14 @@ var FlightOption = function (_a) {
                     React.createElement("div", { className: "flight__flight__header" },
                         React.createElement("div", { className: "flight__status__container" }),
                         React.createElement("div", { className: "flight__price" },
-                            !isSelected && (React.createElement("span", { className: buildClassName(["price",
+                            !isSelected && (React.createElement("span", { className: buildClassName([
+                                    "price",
                                     priceDifference > 0 && "price--increase",
-                                    priceDifference < 0 && "price--decrease"
+                                    priceDifference < 0 && "price--decrease",
                                 ]) }, getPriceDifferenceText(priceDifference))),
-                            React.createElement("button", { type: "button", className: "cta ".concat(isSelected ? 'cta--selected' : 'cta--select'), onClick: handleButtonClick }, isSelected ? translations.SHARED.SELECTED : translations.SHARED.SELECT)))),
+                            React.createElement("button", { type: "button", className: "cta ".concat(isSelected ? "cta--selected" : "cta--select"), onClick: handleButtonClick }, isSelected
+                                ? translations.SHARED.SELECTED
+                                : translations.SHARED.SELECT)))),
                 React.createElement(FlightOptionFlight, { details: item.outward, isOptionsVisible: outwardVisible }),
                 React.createElement(FlightOptionFlight, { details: item.return, isOptionsVisible: returnVisible })))));
 };
@@ -11754,8 +12155,8 @@ var FlightOptionsForm = function () {
         }
         e.preventDefault();
     };
-    var currentFlightPrice = (((_b = (_a = flights.outward) === null || _a === void 0 ? void 0 : _a.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.price) || 0)
-        + (((_d = (_c = flights.return) === null || _c === void 0 ? void 0 : _c.find(function (x) { return x.isSelected; })) === null || _d === void 0 ? void 0 : _d.price) || 0);
+    var currentFlightPrice = (((_b = (_a = flights.outward) === null || _a === void 0 ? void 0 : _a.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.price) || 0) +
+        (((_d = (_c = flights.return) === null || _c === void 0 ? void 0 : _c.find(function (x) { return x.isSelected; })) === null || _d === void 0 ? void 0 : _d.price) || 0);
     useEffect(function () {
         var _a, _b;
         if (packageDetails && settings.roomOptions.isHidden) {
@@ -11791,18 +12192,20 @@ var FlightOptionsForm = function () {
     return (React.createElement(React.Fragment, null,
         React.createElement(FlightOptionModal, null),
         React.createElement("form", { className: "form", name: "booking--flights", id: "booking--flights", noValidate: true, onSubmit: handleSubmit },
-            isLoading && settings.loaderComponent,
-            !isLoading && (React.createElement("div", { className: "form__group" },
-                React.createElement("div", { className: "booking-card" },
-                    React.createElement("div", { className: "booking-card__body" },
-                        filterOptions && (React.createElement(FlightFilter, { filterOptions: filterOptions, resultCount: resultCount, applyFilter: setFilterOptions })),
-                        React.createElement("div", { className: "booking-card__group" },
-                            React.createElement("div", { className: "flight outward__flights" },
-                                isEmpty(filteredGroups) && (React.createElement("p", null, translations.FLIGHTS_FORM.NO_FLIGHTS_FOUND)),
-                                !isEmpty(filteredGroups) && filteredGroups.map(function (flight, index) { return (React.createElement(FlightOption, { key: index, item: flight, isSelected: flight.isSelected, currentPrice: currentFlightPrice, onChange: function (item) {
-                                        dispatch(setFlights(item));
-                                        dispatch(fetchPriceDetails());
-                                    } })); }))))))),
+            React.createElement("div", { className: "form__booking--flight" },
+                isLoading && settings.loaderComponent,
+                !isLoading && (React.createElement("div", { className: "form__group" },
+                    React.createElement("div", { className: "booking-card" },
+                        React.createElement("div", { className: "booking-card__body" },
+                            filterOptions && (React.createElement(FlightFilter, { filterOptions: filterOptions, resultCount: resultCount, applyFilter: setFilterOptions })),
+                            React.createElement("div", { className: "booking-card__group" },
+                                React.createElement("div", { className: "flight outward__flights" },
+                                    isEmpty(filteredGroups) && (React.createElement("p", null, translations.FLIGHTS_FORM.NO_FLIGHTS_FOUND)),
+                                    !isEmpty(filteredGroups) &&
+                                        filteredGroups.map(function (flight, index) { return (React.createElement(FlightOption, { key: index, item: flight, isSelected: flight.isSelected, currentPrice: currentFlightPrice, onChange: function (item) {
+                                                dispatch(setFlights(item));
+                                                dispatch(fetchPriceDetails());
+                                            } })); })))))))),
             React.createElement("div", { className: "booking__navigator" },
                 React.createElement("button", { type: "submit", title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName(["cta", isLoading && "cta--disabled"]) }, translations.STEPS.NEXT)))));
 };
@@ -11812,7 +12215,10 @@ var buildSelectableRooms = function (packageRooms, accommodations, regimes, acco
         var _a, _b;
         var selectedOption = x.options.find(function (x) { return x.isSelected; });
         var alternativeOptions = x.options
-            .filter(function (x) { return x.accommodationCode !== selectedOption.accommodationCode && !x.isLocked; })
+            .filter(function (x) {
+            return x.accommodationCode !== selectedOption.accommodationCode &&
+                !x.isLocked;
+        })
             .sort(function (a, b) { return a.price - b.price; });
         var alternativeAccommodations = [];
         alternativeOptions.forEach(function (x) {
@@ -11823,7 +12229,7 @@ var buildSelectableRooms = function (packageRooms, accommodations, regimes, acco
                 alternativeAccommodation.regimes.push({
                     code: x.regimeCode,
                     title: (_a = regime === null || regime === void 0 ? void 0 : regime.title) !== null && _a !== void 0 ? _a : x.regimeName,
-                    price: x.price
+                    price: x.price,
                 });
             }
             else {
@@ -11835,16 +12241,18 @@ var buildSelectableRooms = function (packageRooms, accommodations, regimes, acco
                     from: x.from,
                     to: x.to,
                     price: x.price,
-                    regimes: [{
+                    regimes: [
+                        {
                             code: x.regimeCode,
                             title: (_b = regime === null || regime === void 0 ? void 0 : regime.title) !== null && _b !== void 0 ? _b : x.regimeName,
-                            price: x.price
-                        }],
+                            price: x.price,
+                        },
+                    ],
                     title: (_c = accommodation_1 === null || accommodation_1 === void 0 ? void 0 : accommodation_1.title) !== null && _c !== void 0 ? _c : x.accommodationName,
                     image: accommodation_1 === null || accommodation_1 === void 0 ? void 0 : accommodation_1.imageUrl,
                     usps: (_d = accommodation_1 === null || accommodation_1 === void 0 ? void 0 : accommodation_1.usps) !== null && _d !== void 0 ? _d : [],
                     description: accommodation_1 === null || accommodation_1 === void 0 ? void 0 : accommodation_1.description,
-                    viewHtml: accommodationViews === null || accommodationViews === void 0 ? void 0 : accommodationViews[x.accommodationCode]
+                    viewHtml: accommodationViews === null || accommodationViews === void 0 ? void 0 : accommodationViews[x.accommodationCode],
                 });
             }
         });
@@ -11866,17 +12274,17 @@ var buildSelectableRooms = function (packageRooms, accommodations, regimes, acco
                     return {
                         code: o.regimeCode,
                         title: (_a = regime === null || regime === void 0 ? void 0 : regime.title) !== null && _a !== void 0 ? _a : o.regimeName,
-                        price: o.price
+                        price: o.price,
                     };
                 }),
                 title: (_a = accommodation === null || accommodation === void 0 ? void 0 : accommodation.title) !== null && _a !== void 0 ? _a : selectedOption.accommodationName,
                 image: accommodation === null || accommodation === void 0 ? void 0 : accommodation.imageUrl,
                 usps: (_b = accommodation === null || accommodation === void 0 ? void 0 : accommodation.usps) !== null && _b !== void 0 ? _b : [],
                 description: accommodation === null || accommodation === void 0 ? void 0 : accommodation.description,
-                viewHtml: accommodationViews === null || accommodationViews === void 0 ? void 0 : accommodationViews[selectedOption.accommodationCode]
+                viewHtml: accommodationViews === null || accommodationViews === void 0 ? void 0 : accommodationViews[selectedOption.accommodationCode],
             },
             showAlternatives: false,
-            alternatives: alternativeAccommodations
+            alternatives: alternativeAccommodations,
         };
     });
 };
@@ -11886,11 +12294,14 @@ var updatePackageRooms = function (rooms, index, accommodationCode, regimeCode,
             return room;
         return __assign(__assign({}, room), { options: room.options.map(function (option) {
                 return __assign(__assign({}, option), { isSelected: option.accommodationCode === accommodationCode &&
-                        (option.regimeCode === regimeCode || (option.regimeCode === null && regimeCode === '')) });
+                        (option.regimeCode === regimeCode ||
+                            (option.regimeCode === null && regimeCode === "")) });
             }) });
     });
     var selectedAccommodations = new Map();
-    updatedRooms.map(function (x) { return x.options.find(function (x) { return x.isSelected; }); }).forEach(function (x) {
+    updatedRooms
+        .map(function (x) { return x.options.find(function (x) { return x.isSelected; }); })
+        .forEach(function (x) {
         if (selectedAccommodations.has(x.accommodationCode)) {
             selectedAccommodations.set(x.accommodationCode, selectedAccommodations.get(x.accommodationCode) + 1);
         }
@@ -11898,7 +12309,10 @@ var updatePackageRooms = function (rooms, index, accommodationCode, regimeCode,
             selectedAccommodations.set(x.accommodationCode, 1);
         }
     });
-    var accoCounter = availabilities.map(function (x) { return ({ code: x.code, count: x.count }); });
+    var accoCounter = availabilities.map(function (x) { return ({
+        code: x.code,
+        count: x.count,
+    }); });
     return updatedRooms.map(function (room) {
         var selectedOption = room.options.find(function (x) { return x.isSelected; });
         return __assign(__assign({}, room), { options: room.options.map(function (option) {
@@ -11914,7 +12328,10 @@ var updatePackageRooms = function (rooms, index, accommodationCode, regimeCode,
                         : roomsLeft < 0 && ((_c = availability === null || availability === void 0 ? void 0 : availability.onRequestPossible) !== null && _c !== void 0 ? _c : false);
                     if (isCurrentOption)
                         accoCount.count--;
-                    return __assign(__assign({}, option), { isLocked: !option.isSelected && !isOnRequest && roomsLeft < 0 && !availability.isExternal, isOnRequest: isOnRequest });
+                    return __assign(__assign({}, option), { isLocked: !option.isSelected &&
+                            !isOnRequest &&
+                            roomsLeft < 0 &&
+                            !availability.isExternal, isOnRequest: isOnRequest });
                 }
                 else {
                     return option;
@@ -11985,7 +12402,7 @@ var OptionItem = function (_a) {
         ? option.isSelected
             ? -option.line.price
             : option.line.price
-        : (option.requirementType === 2 || option.requirementType === 3)
+        : option.requirementType === 2 || option.requirementType === 3
             ? option.line.price - selectedPrice
             : 0;
     var accommodations = uniqBy(compact(__spreadArray([option.line], option.alternatives, true).map(function (option) {
@@ -12126,7 +12543,9 @@ var OptionPaxGroup = function (_a) {
         var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (o, i) {
                 return i === index
                     ? option
-                    : __assign(__assign({}, o), { isSelected: option.requirementType === 2 || option.requirementType === 3 ? false : o.isSelected });
+                    : __assign(__assign({}, o), { isSelected: option.requirementType === 2 || option.requirementType === 3
+                            ? false
+                            : o.isSelected });
             }) });
         if (onGroupChange)
             onGroupChange(updatedGroup, paxId, optionId);
@@ -12168,13 +12587,16 @@ var OptionPaxGroup = function (_a) {
                                                 (option.requirementType === 0 ||
                                                     option.requirementType === 1) &&
                                                     "checkbox",
-                                                (option.requirementType === 2 || option.requirementType === 3) && "radiobutton",
+                                                (option.requirementType === 2 ||
+                                                    option.requirementType === 3) &&
+                                                    "radiobutton",
                                             ]) },
                                             React.createElement("label", { htmlFor: "".concat(parentId, "_").concat(index), className: buildClassName([
                                                     (option.requirementType === 0 ||
                                                         option.requirementType === 1) &&
                                                         "checkbox__label",
-                                                    (option.requirementType === 2 || option.requirementType === 3) &&
+                                                    (option.requirementType === 2 ||
+                                                        option.requirementType === 3) &&
                                                         "radiobutton__label",
                                                 ]) },
                                                 React.createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
@@ -12213,8 +12635,11 @@ var OptionPaxCard = function (_a) {
             onPaxChange(updatedPax, parentIndex);
     };
     var getAirlineGroups = function (p) {
-        return p.airlineGroups
-            .filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+        return p.airlineGroups.filter(function (x) {
+            var _a, _b;
+            return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+                x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+        });
     };
     var handleOnAirlineGroupChange = function (group, paxId) {
         var updatedPax = pax.map(function (p) {
@@ -12228,8 +12653,11 @@ var OptionPaxCard = function (_a) {
             onPaxChange(updatedPax, parentIndex);
     };
     var getAirportGroups = function (p) {
-        return p.airportGroups
-            .filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+        return p.airportGroups.filter(function (x) {
+            var _a, _b;
+            return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+                x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+        });
     };
     var handleOnAirportGroupChange = function (group, paxId) {
         var updatedPax = pax.map(function (p) {
@@ -12277,7 +12705,9 @@ var OptionUnitGroup = function (_a) {
         var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (o, i) {
                 return i === index
                     ? option
-                    : __assign(__assign({}, o), { isSelected: option.requirementType === 2 || option.requirementType === 3 ? false : o.isSelected });
+                    : __assign(__assign({}, o), { isSelected: option.requirementType === 2 || option.requirementType === 3
+                            ? false
+                            : o.isSelected });
             }) });
         if (onGroupChange)
             onGroupChange(updatedGroup, unitIndex, optionId);
@@ -12326,13 +12756,16 @@ var OptionUnitGroup = function (_a) {
                                                 (option.requirementType === 0 ||
                                                     option.requirementType === 1) &&
                                                     "checkbox",
-                                                (option.requirementType === 2 || option.requirementType === 3) && "radiobutton",
+                                                (option.requirementType === 2 ||
+                                                    option.requirementType === 3) &&
+                                                    "radiobutton",
                                             ]) },
                                             React.createElement("label", { htmlFor: "".concat(parentId, "_").concat(index), className: buildClassName([
                                                     (option.requirementType === 0 ||
                                                         option.requirementType === 1) &&
                                                         "checkbox__label",
-                                                    (option.requirementType === 2 || option.requirementType === 3) &&
+                                                    (option.requirementType === 2 ||
+                                                        option.requirementType === 3) &&
                                                         "radiobutton__label",
                                                 ]) },
                                                 React.createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
@@ -12367,8 +12800,11 @@ var OptionUnitsCard = function (_a) {
             onUnitsChange(updatedUnits, parentIndex);
     };
     var getAirlineGroups = function (p) {
-        return p.airlineGroups
-            .filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+        return p.airlineGroups.filter(function (x) {
+            var _a, _b;
+            return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+                x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+        });
     };
     var handleOnAirlineGroupChange = function (group, unitIndex) {
         var updatedPax = units.map(function (u) {
@@ -12382,8 +12818,11 @@ var OptionUnitsCard = function (_a) {
             onUnitsChange(updatedPax, parentIndex);
     };
     var getAirportGroups = function (p) {
-        return p.airportGroups
-            .filter(function (x) { var _a, _b; return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") || x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : ""); });
+        return p.airportGroups.filter(function (x) {
+            var _a, _b;
+            return x.flightIds.includes((_a = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.entryLineGuid) !== null && _a !== void 0 ? _a : "") ||
+                x.flightIds.includes((_b = returnFlight === null || returnFlight === void 0 ? void 0 : returnFlight.entryLineGuid) !== null && _b !== void 0 ? _b : "");
+        });
     };
     var handleOnAirportGroupChange = function (group, unitIndex) {
         var updatedPax = units.map(function (u) {
@@ -12410,8 +12849,7 @@ var OptionUnitsCard = function (_a) {
                 React.createElement("button", { type: "button", className: "booking-card__toggle", onClick: function () {
                         setToggleStates(toggleStates === null || toggleStates === void 0 ? void 0 : toggleStates.map(function (s, si) { return (si == i ? !s : s); }));
                     } }))),
-        toggleStates &&
-            toggleStates[i] && (React.createElement(React.Fragment, null,
+        toggleStates && toggleStates[i] && (React.createElement(React.Fragment, null,
             u.groups.map(function (ug) {
                 return ug && (React.createElement(OptionUnitGroup, { key: ug.name, unitIndex: u.index, group: ug, firstClassName: "booking-card__group-body", secondClassName: "booking-card__group-heading", parentId: "".concat(u.index, "_").concat(ug.name), onGroupChange: onGroupChange }));
             }),
@@ -12430,7 +12868,9 @@ var OptionBookingGroup = function (_a) {
         var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (o, i) {
                 return i === index
                     ? option
-                    : __assign(__assign({}, o), { isSelected: (option.requirementType === 2 || option.requirementType === 3) ? false : o.isSelected });
+                    : __assign(__assign({}, o), { isSelected: option.requirementType === 2 || option.requirementType === 3
+                            ? false
+                            : o.isSelected });
             }) });
         if (onGroupChange)
             onGroupChange(updatedGroup, optionId);
@@ -12486,13 +12926,16 @@ var OptionBookingGroup = function (_a) {
                                                 (option.requirementType === 0 ||
                                                     option.requirementType === 1) &&
                                                     "checkbox",
-                                                (option.requirementType === 2 || option.requirementType === 3) && "radiobutton",
+                                                (option.requirementType === 2 ||
+                                                    option.requirementType === 3) &&
+                                                    "radiobutton",
                                             ]) },
                                             React.createElement("label", { htmlFor: "".concat(parentId, "_").concat(index), className: buildClassName([
                                                     (option.requirementType === 0 ||
                                                         option.requirementType === 1) &&
                                                         "checkbox__label",
-                                                    (option.requirementType === 2 || option.requirementType === 3) &&
+                                                    (option.requirementType === 2 ||
+                                                        option.requirementType === 3) &&
                                                         "radiobutton__label",
                                                 ]) },
                                                 React.createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
@@ -12558,7 +13001,10 @@ var OptionRoom = function (_a) {
         })), "accommodationCode");
     var regimes = uniqBy(compact(packageRoom &&
         packageRoom.options
-            .filter(function (x) { return !selectedOption || x.accommodationCode == selectedOption.accommodationCode; })
+            .filter(function (x) {
+            return !selectedOption ||
+                x.accommodationCode == selectedOption.accommodationCode;
+        })
             .map(function (option) {
             return {
                 regimeCode: option.regimeCode,
@@ -12691,9 +13137,135 @@ var OptionRoom = function (_a) {
                                                 ]) }))))))))))));
 };
 
+function useOfferPrinter(_a) {
+    var _this = this;
+    var bookingPackage = _a.bookingPackage, getPax = _a.getPax, _b = _a.tagIds, tagIds = _b === void 0 ? [] : _b, _c = _a.printActionId, printActionId = _c === void 0 ? null : _c, onPrinted = _a.onPrinted;
+    var settings = useContext(SettingsContext);
+    if (!settings)
+        throw new Error("useOfferPrinter must be used inside <BookingWizard>");
+    var language = settings.language, officeId = settings.officeId;
+    var agentId = settings.agentAdressId;
+    if (typeof agentId !== "number" || agentId <= 0) {
+        throw new Error("Missing agentAdressId in wizard settings");
+    }
+    var _d = useState("idle"), stage = _d[0], setStage = _d[1];
+    var loading = stage !== "idle";
+    var createOffer = useCallback(function () { return __awaiter$1(_this, void 0, void 0, function () {
+        var paxRaw, pax, request, cfg;
+        return __generator$1(this, function (_a) {
+            paxRaw = getPax();
+            if (!bookingPackage || !(paxRaw === null || paxRaw === void 0 ? void 0 : paxRaw.length)) {
+                throw new Error("Missing booking package or pax");
+            }
+            pax = paxRaw;
+            request = {
+                officeId: officeId,
+                agentId: agentId,
+                payload: {
+                    package: bookingPackage,
+                    status: 0,
+                    pax: pax,
+                    nonTravelPax: [],
+                    notifications: [],
+                    tagIds: tagIds,
+                    customerRequests: [],
+                },
+            };
+            cfg = buildTideClientConfig();
+            return [2 /*return*/, book_1(cfg, request, undefined, language)];
+        });
+    }); }, [
+        agentId,
+        bookingPackage,
+        getPax,
+        language,
+        officeId,
+        tagIds,
+    ]);
+    var languageData = [
+        { code: "nl-BE", tideId: 1 },
+        { code: "fr-BE", tideId: 2 },
+        { code: "en-GB", tideId: 3 },
+    ];
+    function getTideLanguageId(code) {
+        var _a;
+        return (((_a = languageData.find(function (l) { return l.code === code; })) === null || _a === void 0 ? void 0 : _a.tideId) || 1);
+    }
+    var printOffer = useCallback(function (offer) { return __awaiter$1(_this, void 0, void 0, function () {
+        var cfg, req, res, buf, url;
+        var _a;
+        return __generator$1(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    cfg = buildTideClientConfig();
+                    req = {
+                        id: printActionId !== null && printActionId !== void 0 ? printActionId : 0,
+                        dossierNumber: (_a = offer.dossierNumber) !== null && _a !== void 0 ? _a : offer.number,
+                        languageId: getTideLanguageId(language),
+                    };
+                    return [4 /*yield*/, print_1(cfg, req)];
+                case 1:
+                    res = _b.sent();
+                    return [4 /*yield*/, res.arrayBuffer()];
+                case 2:
+                    buf = _b.sent();
+                    url = URL.createObjectURL(new Blob([buf], { type: "application/pdf" }));
+                    onPrinted === null || onPrinted === void 0 ? void 0 : onPrinted(url);
+                    window.open(url);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [language, onPrinted]);
+    var handlePrint = useCallback(function () { return __awaiter$1(_this, void 0, void 0, function () {
+        var offer, err_1;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, 4, 5]);
+                    setStage("creating");
+                    return [4 /*yield*/, createOffer()];
+                case 1:
+                    offer = _a.sent();
+                    setStage("printing");
+                    return [4 /*yield*/, printOffer(offer)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error("Offer print failed:", err_1);
+                    throw err_1;
+                case 4:
+                    setStage("idle");
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [createOffer, printOffer]);
+    return { handlePrint: handlePrint, loading: loading, stage: stage };
+}
+
+var PrintOfferButton = function (_a) {
+    var bookingPackage = _a.bookingPackage, getPax = _a.getPax, tagIds = _a.tagIds, _b = _a.printActionId, printActionId = _b === void 0 ? null : _b, onPrinted = _a.onPrinted, _c = _a.labelIdle, labelIdle = _c === void 0 ? "Print offer" : _c, _d = _a.labelCreating, labelCreating = _d === void 0 ? "Generating offer…" : _d, _e = _a.labelPrinting, labelPrinting = _e === void 0 ? "Generating PDF…" : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, className = _a.className;
+    var _g = useOfferPrinter({
+        bookingPackage: bookingPackage,
+        getPax: getPax,
+        tagIds: tagIds,
+        onPrinted: onPrinted,
+        printActionId: printActionId,
+    }), handlePrint = _g.handlePrint, stage = _g.stage, loading = _g.loading;
+    var label = stage === "creating"
+        ? labelCreating
+        : stage === "printing"
+            ? labelPrinting
+            : labelIdle;
+    return (React.createElement("button", { type: 'button', onClick: handlePrint, disabled: disabled || loading, className: className }, label));
+};
+
 var OptionsForm = function () {
     var _a;
     var settings = useContext(SettingsContext);
+    var token = settings.token;
     var translations = useSelector(selectTranslations);
     var dispatch = useAppDispatch();
     var packageDetails = useSelector(selectPackageDetails);
@@ -12717,7 +13289,9 @@ var OptionsForm = function () {
         var bookingPackagePax = pax.filter(function (x) {
             return room === null || room === void 0 ? void 0 : room.pax.some(function (y) { return y.id == x.id; });
         });
-        return bookingPackagePax.length > 0 ? bookingPackagePax : (_a = room === null || room === void 0 ? void 0 : room.pax) !== null && _a !== void 0 ? _a : [];
+        return bookingPackagePax.length > 0
+            ? bookingPackagePax
+            : (_a = room === null || room === void 0 ? void 0 : room.pax) !== null && _a !== void 0 ? _a : [];
     };
     var handleOnRoomChange = function (index, accommodationCode, regimeCode) {
         if (!packageRooms)
@@ -12726,8 +13300,17 @@ var OptionsForm = function () {
         dispatch(setPackageRooms(updatedPackageRooms));
         dispatch(fetchPriceDetails());
     };
+    var getPax = function () {
+        var _a;
+        if (!packageDetails)
+            return undefined;
+        var selectedOption = (_a = packageDetails.options.find(function (o) { return o.isSelected; })) !== null && _a !== void 0 ? _a : packageDetails.options[0];
+        return selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.requestRooms.flatMap(function (r) { return r.pax; });
+    };
     // TAGS
-    var packageTags = settings.hideTags ? [] : useSelector(selectPackageTags);
+    var packageTags = settings.hideTags
+        ? []
+        : useSelector(selectPackageTags);
     var tagIds = (_a = useSelector(selectTagIds)) !== null && _a !== void 0 ? _a : [];
     var handleSubmit = function (e) {
         if (settings.skipRouter) {
@@ -12788,7 +13371,9 @@ var OptionsForm = function () {
     };
     useEffect(function () {
         var _a, _b;
-        if (packageDetails && settings.roomOptions.isHidden && settings.flightOptions.isHidden) {
+        if (packageDetails &&
+            settings.roomOptions.isHidden &&
+            settings.flightOptions.isHidden) {
             var params = new URLSearchParams(location.search);
             var outwardFlight_1 = (_a = params.get("outwardflight")) !== null && _a !== void 0 ? _a : undefined;
             var returnFlight_1 = (_b = params.get("returnflight")) !== null && _b !== void 0 ? _b : undefined;
@@ -12797,11 +13382,13 @@ var OptionsForm = function () {
                 var desiredReturnFlight_1 = packageDetails.returnFlights.find(function (x) { return x.entryLineGuid == returnFlight_1; });
                 if (desiredOutwardFlight_1 && desiredReturnFlight_1) {
                     dispatch(setPackage(__assign(__assign({}, packageDetails), { outwardFlights: packageDetails.outwardFlights.map(function (flight) {
-                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid == desiredOutwardFlight_1.entryLineGuid
+                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid ==
+                                    desiredOutwardFlight_1.entryLineGuid
                                     ? true
                                     : false });
                         }), returnFlights: packageDetails.returnFlights.map(function (flight) {
-                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid == desiredReturnFlight_1.entryLineGuid
+                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid ==
+                                    desiredReturnFlight_1.entryLineGuid
                                     ? true
                                     : false });
                         }) })));
@@ -12821,57 +13408,73 @@ var OptionsForm = function () {
     var previousUrl = settings.roomOptions.isHidden
         ? "".concat(settings.basePath).concat(settings.flightOptions.pathSuffix, "?").concat(bookingQueryString)
         : "".concat(settings.basePath).concat(settings.roomOptions.pathSuffix, "?").concat(bookingQueryString);
-    var hasPrevious = !settings.roomOptions.isHidden || !settings.flightOptions.isHidden;
-    var showPackageTagsOrRoomoptions = showRoomOptions || (packageTags && !isEmpty(packageTags));
+    var hasPrevious = !settings.roomOptions.isHidden ||
+        !settings.flightOptions.isHidden;
+    var showPackageTagsOrRoomoptions = showRoomOptions ||
+        (packageTags && !isEmpty(packageTags));
     return (React.createElement(React.Fragment, null,
-        React.createElement("form", { className: "form", name: "booking--options", id: "booking--options", noValidate: true, onSubmit: handleSubmit },
+        React.createElement("form", { className: 'form', name: 'booking--options', id: 'booking--options', noValidate: true, onSubmit: handleSubmit },
             isLoading && settings.loaderComponent,
-            !isLoading && (React.createElement("div", { className: "form__region" },
-                showPackageTagsOrRoomoptions && (React.createElement("div", { className: "form__group" },
-                    React.createElement("div", { className: "booking-card" },
-                        React.createElement("div", { className: "booking-card__body" },
+            !isLoading && (React.createElement("div", { className: 'form__region' },
+                showPackageTagsOrRoomoptions && (React.createElement("div", { className: 'form__group' },
+                    React.createElement("div", { className: 'booking-card' },
+                        React.createElement("div", { className: 'booking-card__body' },
                             React.createElement("div", { className: buildClassName([
                                     "booking-card__group",
                                     "booking-card__group--package",
                                 ]) },
-                                showRoomOptions && (React.createElement("span", { className: "booking-card__tag" }, translations.OPTIONS_FORM.PACKAGE)),
-                                React.createElement("div", { className: "booking-card__group-body" },
-                                    showRoomOptions && (React.createElement("table", { className: "table table--striped" },
+                                showRoomOptions && (React.createElement("span", { className: 'booking-card__tag' }, translations.OPTIONS_FORM
+                                    .PACKAGE)),
+                                React.createElement("div", { className: 'booking-card__group-body' },
+                                    showRoomOptions && (React.createElement("table", { className: 'table table--striped' },
                                         React.createElement("tbody", null, packageRooms &&
                                             packageRooms.map(function (room) { return (React.createElement(OptionRoom, { key: room.index, packageRoom: room, pax: getRoomPax(room.index), optionPax: optionPax, onRoomChange: handleOnRoomChange })); })))),
-                                    packageTags && !isEmpty(packageTags) && (React.createElement("div", { className: "booking-card__tag-translations" }, packageTags.map(function (tag, index) { return (React.createElement("label", { key: index, htmlFor: "tag-translation-".concat(index, "-").concat(tag.title), className: "checkbox__label tag-translation" },
-                                        React.createElement("div", { className: "tag-translation-input__container" },
-                                            React.createElement("input", { type: "checkbox", id: "tag-translation-".concat(index, "-").concat(tag.title), name: "tag-translation-".concat(index, "-").concat(tag.title), className: "checkbox__input", checked: tagIds === null || tagIds === void 0 ? void 0 : tagIds.includes(tag.id), onChange: function (e) {
+                                    packageTags &&
+                                        !isEmpty(packageTags) && (React.createElement("div", { className: 'booking-card__tag-translations' }, packageTags.map(function (tag, index) { return (React.createElement("label", { key: index, htmlFor: "tag-translation-".concat(index, "-").concat(tag.title), className: 'checkbox__label tag-translation' },
+                                        React.createElement("div", { className: 'tag-translation-input__container' },
+                                            React.createElement("input", { type: 'checkbox', id: "tag-translation-".concat(index, "-").concat(tag.title), name: "tag-translation-".concat(index, "-").concat(tag.title), className: 'checkbox__input', checked: tagIds === null || tagIds === void 0 ? void 0 : tagIds.includes(tag.id), onChange: function (e) {
                                                     return handleOnTagChange(tag.id, e.target.checked);
                                                 } })),
-                                        React.createElement("span", { className: "tag-translation__title" }, tag.title),
+                                        React.createElement("span", { className: 'tag-translation__title' }, tag.title),
                                         "\u00A0",
-                                        React.createElement("span", { className: "tag-translation__description" }, tag.description))); }))))))))),
-                optionUnits && !isEmpty(optionUnits) && (React.createElement("div", { className: "form__group" },
-                    React.createElement("div", { className: "booking-card" },
-                        React.createElement("div", { className: "booking-card__header" },
-                            React.createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_UNIT_TITLE)),
-                        React.createElement("div", { className: "booking-card__body" },
+                                        React.createElement("span", { className: 'tag-translation__description' }, tag.description))); }))))))))),
+                optionUnits && !isEmpty(optionUnits) && (React.createElement("div", { className: 'form__group' },
+                    React.createElement("div", { className: 'booking-card' },
+                        React.createElement("div", { className: 'booking-card__header' },
+                            React.createElement("h2", { className: 'booking-card__header-heading' }, translations.OPTIONS_FORM
+                                .PER_UNIT_TITLE)),
+                        React.createElement("div", { className: 'booking-card__body' },
                             React.createElement(OptionUnitsCard, { units: optionUnits, onUnitsChange: handleOnUnitsChange }))))),
-                optionPax && !isEmpty(optionPax) && (React.createElement("div", { className: "form__group" },
-                    React.createElement("div", { className: "booking-card" },
-                        React.createElement("div", { className: "booking-card__header" },
-                            React.createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_PAX_TITLE)),
-                        React.createElement("div", { className: "booking-card__body" },
+                optionPax && !isEmpty(optionPax) && (React.createElement("div", { className: 'form__group' },
+                    React.createElement("div", { className: 'booking-card' },
+                        React.createElement("div", { className: 'booking-card__header' },
+                            React.createElement("h2", { className: 'booking-card__header-heading' }, translations.OPTIONS_FORM
+                                .PER_PAX_TITLE)),
+                        React.createElement("div", { className: 'booking-card__body' },
                             React.createElement(OptionPaxCard, { pax: optionPax, onPaxChange: handleOnPaxChange, requestRoomsPax: requestRoomsPax }))))),
-                groups && !isEmpty(groups) && (React.createElement("div", { className: "form__group" },
-                    React.createElement("div", { className: "booking-card" },
-                        React.createElement("div", { className: "booking-card__header" },
-                            React.createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_BOOKING_TITLE)),
-                        React.createElement("div", { className: "booking-card__body" },
-                            React.createElement("div", { className: "booking-card__group booking-card__group--active" },
+                groups && !isEmpty(groups) && (React.createElement("div", { className: 'form__group' },
+                    React.createElement("div", { className: 'booking-card' },
+                        React.createElement("div", { className: 'booking-card__header' },
+                            React.createElement("h2", { className: 'booking-card__header-heading' }, translations.OPTIONS_FORM
+                                .PER_BOOKING_TITLE)),
+                        React.createElement("div", { className: 'booking-card__body' },
+                            React.createElement("div", { className: 'booking-card__group booking-card__group--active' },
                                 groups.map(function (group, i) { return (React.createElement(OptionBookingGroup, { key: "".concat(group.name, "_").concat(i), group: group, firstClassName: "booking-card__group-body", secondClassName: "booking-card__group-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); }), airlineGroups === null || airlineGroups === void 0 ? void 0 :
                                 airlineGroups.map(function (group, i) { return (React.createElement(OptionBookingAirlineGroup, { key: "".concat(group.label, "_").concat(i), airGroup: group, onGroupChange: handleOnAirlineGroupChange })); }), airportGroups === null || airportGroups === void 0 ? void 0 :
                                 airportGroups.map(function (group, i) { return (React.createElement(OptionBookingAirlineGroup, { key: "".concat(group.label, "_").concat(i), airGroup: group, onGroupChange: handleOnAirportGroupChange })); })))))),
-                isEmpty(groups) && isEmpty(optionUnits) && isEmpty(optionPax) && (React.createElement(NoOptions, null)))),
-            React.createElement("div", { className: "booking__navigator" },
-                hasPrevious && (React.createElement(React.Fragment, null, settings.skipRouter ? (React.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: function () { return goPrevious(); }, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React.createElement(Link, { to: previousUrl, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)))),
-                React.createElement("button", { type: "submit", title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName(["cta", isLoading && "cta--disabled"]) }, translations.STEPS.NEXT)))));
+                isEmpty(groups) &&
+                    isEmpty(optionUnits) &&
+                    isEmpty(optionPax) && React.createElement(NoOptions, null))),
+            React.createElement("div", { className: 'booking__navigator' },
+                hasPrevious && (React.createElement(React.Fragment, null, settings.skipRouter ? (React.createElement("button", { type: 'button', title: translations.STEPS.PREVIOUS, onClick: function () { return goPrevious(); }, className: 'cta cta--secondary' }, translations.STEPS.PREVIOUS)) : (React.createElement(Link, { to: previousUrl, title: translations.STEPS.PREVIOUS, className: 'cta cta--secondary' }, translations.STEPS.PREVIOUS)))),
+                token &&
+                    settings.options.reportPrintActionId && (React.createElement(PrintOfferButton, { bookingPackage: packageDetails, getPax: getPax, tagIds: tagIds, printActionId: settings.options.reportPrintActionId, labelIdle: translations.PRINT_OFFER_BUTTON.LABEL_IDLE, labelCreating: translations.PRINT_OFFER_BUTTON
+                        .LABEL_CREATING, labelPrinting: translations.PRINT_OFFER_BUTTON
+                        .LABEL_PRINTING, className: 'cta spinner-button' })),
+                React.createElement("button", { type: 'submit', title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName([
+                        "cta",
+                        isLoading && "cta--disabled",
+                    ]) }, translations.STEPS.NEXT)))));
 };
 
 var RoomOption = function (_a) {
@@ -12898,7 +13501,7 @@ var RoomOption = function (_a) {
     };
     var handleRegimeChange = function (e) {
         var regimeCode = e.currentTarget.value;
-        var option = room.regimes.find(function (x) { return x.code === regimeCode || (x.code === null && regimeCode === ''); });
+        var option = room.regimes.find(function (x) { return x.code === regimeCode || (x.code === null && regimeCode === ""); });
         setRoomRegimeCode(option.code);
         setRoomPrice(option.price);
         if (onRegimeChange) {
@@ -12937,7 +13540,12 @@ var RoomOption = function (_a) {
                                     " ",
                                     getPriceDifference(regime.price, roomPrice)));
                             })))),
-                    React.createElement("button", { type: "button", onClick: selectAccommodation, className: buildClassName(['cta', selectedRoomPrice ? 'cta--secondary' : 'cta--selected']) }, selectedRoomPrice ? translations.SHARED.SELECT : translations.SHARED.SELECTED))))));
+                    React.createElement("button", { type: "button", onClick: selectAccommodation, className: buildClassName([
+                            "cta",
+                            selectedRoomPrice ? "cta--select" : "cta--selected",
+                        ]) }, selectedRoomPrice
+                        ? translations.SHARED.SELECT
+                        : translations.SHARED.SELECTED))))));
 };
 
 var TravelerRooms = function (_a) {
@@ -12945,22 +13553,25 @@ var TravelerRooms = function (_a) {
     var translations = useSelector(selectTranslations);
     var _b = useState(false), showAlternatives = _b[0], setShowAlternatives = _b[1];
     var selectedAccommodationCode = room.selected.code;
-    return (React.createElement("div", { key: room.index },
+    return (React.createElement("div", { key: room.index, className: "form__room__container" },
         React.createElement("div", { className: "form__room__header" },
             React.createElement("h5", null,
                 translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP,
                 " ",
                 room.index + 1)),
-        React.createElement(RoomOption, { room: room.selected, hasAlternatives: !isEmpty(room.alternatives), onRegimeChange: function (regimeCode) { return onRoomChange(index, selectedAccommodationCode, regimeCode); }, onToggleAlternatives: function () { return setShowAlternatives(!showAlternatives); } }),
+        React.createElement(RoomOption, { room: room.selected, hasAlternatives: !isEmpty(room.alternatives), onRegimeChange: function (regimeCode) {
+                return onRoomChange(index, selectedAccommodationCode, regimeCode);
+            }, onToggleAlternatives: function () { return setShowAlternatives(!showAlternatives); } }),
         !isEmpty(room.alternatives) && showAlternatives && (React.createElement("div", { className: "form__room__alternatives" },
             React.createElement("div", { className: "form__room__alternatives__header" },
                 translations.ROOM_OPTIONS_FORM.ALTERNATIVES_TRAVELER_GROUP,
                 " ",
                 room.index + 1),
-            showAlternatives && (React.createElement(React.Fragment, null, room.alternatives.map(function (alternative, alternativeIndex) { return (React.createElement(RoomOption, { key: alternativeIndex, room: alternative, selectedRoomPrice: room.selected.price, onAcommodationChange: function (accommodationCode, regimeCode) {
-                    setShowAlternatives(false);
-                    onRoomChange(index, accommodationCode, regimeCode);
-                } })); })))))));
+            showAlternatives && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "form__room__alternatives__content" }, room.alternatives.map(function (alternative, alternativeIndex) { return (React.createElement(RoomOption, { key: alternativeIndex, room: alternative, selectedRoomPrice: room.selected.price, onAcommodationChange: function (accommodationCode, regimeCode) {
+                        setShowAlternatives(false);
+                        onRoomChange(index, accommodationCode, regimeCode);
+                    } })); }))))))));
 };
 
 var RoomOptionsForm = function () {
@@ -13095,83 +13706,84 @@ var Sidebar = function (_a) {
         React.createElement("div", { className: "booking__sidebar-frame" },
             React.createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl, handleToggleClick: handleToggleClick }),
             React.createElement("div", { className: "pricing-summary" },
-                React.createElement("div", { className: "pricing-summary__region" },
-                    React.createElement("div", { className: "pricing-summary__group" },
-                        React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.TRAVEL_INFO),
-                        !isEmpty(travelerRooms) &&
-                            (travelerRooms === null || travelerRooms === void 0 ? void 0 : travelerRooms.map(function (room, rIndex) { return (React.createElement("div", { className: "pricing-summary__row", key: rIndex },
+                React.createElement("div", { className: "pricing-summary__wrapper" },
+                    React.createElement("div", { className: "pricing-summary__region ".concat(!isLoading ? "pricing-summary__region--fade-in" : "") },
+                        React.createElement("div", { className: "pricing-summary__group" },
+                            React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.TRAVEL_INFO),
+                            !isEmpty(travelerRooms) &&
+                                (travelerRooms === null || travelerRooms === void 0 ? void 0 : travelerRooms.map(function (room, rIndex) { return (React.createElement("div", { className: "pricing-summary__row", key: rIndex },
+                                    React.createElement("div", { className: "pricing-summary__property" },
+                                        translations.SHARED.ROOM,
+                                        " ",
+                                        rIndex + 1),
+                                    React.createElement("div", { className: "pricing-summary__value" }, room))); })),
+                            startDateText && (React.createElement("div", { className: "pricing-summary__row" },
+                                React.createElement("div", { className: "pricing-summary__property" }, startDateText && endDateText
+                                    ? translations.SIDEBAR.DEPARTURE
+                                    : translations.SIDEBAR.DEPARTURE_SINGLE),
+                                React.createElement("div", { className: "pricing-summary__value" }, startDateText))),
+                            endDateText && (React.createElement("div", { className: "pricing-summary__row" },
+                                React.createElement("div", { className: "pricing-summary__property" }, translations.SIDEBAR.ARRIVAL),
+                                React.createElement("div", { className: "pricing-summary__value" }, endDateText)))),
+                        isLoading && loaderComponent,
+                        !isLoading && departureFlight && returnFlight && (React.createElement(React.Fragment, null,
+                            React.createElement(SidebarFlight, { title: translations.SIDEBAR.DEPARTURE_FLIGHT, flight: departureFlight }),
+                            React.createElement(SidebarFlight, { title: translations.SIDEBAR.ARRIVAL_FLIGHT, flight: returnFlight }))),
+                        accommodations && (React.createElement("div", { className: "pricing-summary__group" },
+                            React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.ACCOMMODATION),
+                            accommodations.map(function (accommodation) {
+                                var option = accommodation.options.find(function (x) { return x.isSelected; });
+                                return (React.createElement("div", { key: accommodation.index },
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "pricing-summary__property" }, option === null || option === void 0 ? void 0 :
+                                            option.accommodationName,
+                                            isOnRequest
+                                                ? " (".concat(translations.SIDEBAR.ON_REQUEST, ")")
+                                                : "",
+                                            (option === null || option === void 0 ? void 0 : option.isOnRequest)
+                                                ? " (".concat(translations.SIDEBAR.ON_REQUEST, ")")
+                                                : "")),
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "price-summarty__property" }, option === null || option === void 0 ? void 0 : option.regimeName),
+                                        React.createElement("div", { className: "price-summary__value" }, getDatePeriodText(option === null || option === void 0 ? void 0 : option.from, option === null || option === void 0 ? void 0 : option.to, true)))));
+                            })))),
+                    !isLoading && canShowPriceBreakdownSection && (React.createElement("div", { className: "pricing-summary__region ".concat(!isLoading ? "pricing-summary__region--fade-in" : "") },
+                        basePrice !== undefined && basePrice > 0 && (React.createElement("div", { className: "pricing-summary__group" },
+                            React.createElement("div", { className: "pricing-summary__row" },
                                 React.createElement("div", { className: "pricing-summary__property" },
-                                    translations.SHARED.ROOM,
-                                    " ",
-                                    rIndex + 1),
-                                React.createElement("div", { className: "pricing-summary__value" }, room))); })),
-                        startDateText && (React.createElement("div", { className: "pricing-summary__row" },
-                            React.createElement("div", { className: "pricing-summary__property" }, startDateText && endDateText
-                                ? translations.SIDEBAR.DEPARTURE
-                                : translations.SIDEBAR.DEPARTURE_SINGLE),
-                            React.createElement("div", { className: "pricing-summary__value" }, startDateText))),
-                        endDateText && (React.createElement("div", { className: "pricing-summary__row" },
-                            React.createElement("div", { className: "pricing-summary__property" }, translations.SIDEBAR.ARRIVAL),
-                            React.createElement("div", { className: "pricing-summary__value" }, endDateText)))),
-                    isLoading && loaderComponent,
-                    !isLoading && departureFlight && returnFlight && (React.createElement(React.Fragment, null,
-                        React.createElement(SidebarFlight, { title: translations.SIDEBAR.DEPARTURE_FLIGHT, flight: departureFlight }),
-                        React.createElement(SidebarFlight, { title: translations.SIDEBAR.ARRIVAL_FLIGHT, flight: returnFlight }))),
-                    accommodations && (React.createElement("div", { className: "pricing-summary__group" },
-                        React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.ACCOMMODATION),
-                        accommodations.map(function (accommodation) {
-                            var option = accommodation.options.find(function (x) { return x.isSelected; });
-                            return (React.createElement("div", { key: accommodation.index },
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "pricing-summary__property" }, option === null || option === void 0 ? void 0 :
-                                        option.accommodationName,
-                                        isOnRequest
-                                            ? " (".concat(translations.SIDEBAR.ON_REQUEST, ")")
-                                            : "",
-                                        (option === null || option === void 0 ? void 0 : option.isOnRequest)
-                                            ? " (".concat(translations.SIDEBAR.ON_REQUEST, ")")
-                                            : "")),
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "price-summarty__property" }, option === null || option === void 0 ? void 0 : option.regimeName),
-                                    React.createElement("div", { className: "price-summary__value" }, getDatePeriodText(option === null || option === void 0 ? void 0 : option.from, option === null || option === void 0 ? void 0 : option.to, true)))));
-                        })))),
-                !isLoading && canShowPriceBreakdownSection && (React.createElement("div", { className: "pricing-summary__region" },
-                    basePrice !== undefined && basePrice > 0 && (React.createElement("div", { className: "pricing-summary__group" },
-                        React.createElement("div", { className: "pricing-summary__row" },
-                            React.createElement("div", { className: "pricing-summary__property" },
-                                React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.BASE_PRICE)),
-                            React.createElement("div", { className: "pricing-summary__value" }, formatPrice(basePrice))))),
-                    !isEmpty(includedCosts) && (React.createElement("div", { className: "pricing-summary__group" },
-                        React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.INCLUDED_COSTS), includedCosts === null || includedCosts === void 0 ? void 0 :
-                        includedCosts.map(function (priceDetail, index) {
-                            var _a;
-                            return (React.createElement(React.Fragment, { key: compact([
-                                    priceDetail.productCode,
-                                    priceDetail.accommodationCode,
-                                    index,
-                                ]).join("_") },
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "pricing-summary__property" }, priceDetail.productName),
-                                    priceDetail.showPrice && (React.createElement("div", { className: "pricing-summary__value" }, formatPrice(priceDetail.price * priceDetail.amount)))),
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "price-summary__property" }, (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode))));
-                        }))),
-                    !isEmpty(extraCosts) && (React.createElement("div", { className: "pricing-summary__group" },
-                        React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.EXTRA_COSTS), extraCosts === null || extraCosts === void 0 ? void 0 :
-                        extraCosts.map(function (priceDetail, index) {
-                            var _a;
-                            return (React.createElement(React.Fragment, { key: compact([
-                                    priceDetail.productCode,
-                                    priceDetail.accommodationCode,
-                                    index,
-                                ]).join("_") },
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "pricing-summary__property" }, priceDetail.productName),
-                                    priceDetail.showPrice && (React.createElement("div", { className: "pricing-summary__value" }, formatPrice(priceDetail.price * priceDetail.amount)))),
-                                React.createElement("div", { className: "pricing-summary__row" },
-                                    React.createElement("div", { className: "price-summary__property" }, (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode))));
-                        }))))),
-                !isLoading && canShowTotalPriceSection && (React.createElement("div", { className: "pricing-summary__region pricing-summary__region--pricing" }, deposit ? (React.createElement("div", { className: "pricing-summary__group" },
+                                    React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.BASE_PRICE)),
+                                React.createElement("div", { className: "pricing-summary__value" }, formatPrice(basePrice))))),
+                        !isEmpty(includedCosts) && (React.createElement("div", { className: "pricing-summary__group" },
+                            React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.INCLUDED_COSTS), includedCosts === null || includedCosts === void 0 ? void 0 :
+                            includedCosts.map(function (priceDetail, index) {
+                                var _a;
+                                return (React.createElement(React.Fragment, { key: compact([
+                                        priceDetail.productCode,
+                                        priceDetail.accommodationCode,
+                                        index,
+                                    ]).join("_") },
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "pricing-summary__property" }, priceDetail.productName),
+                                        priceDetail.showPrice && (React.createElement("div", { className: "pricing-summary__value" }, formatPrice(priceDetail.price * priceDetail.amount)))),
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "price-summary__property" }, (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode))));
+                            }))),
+                        !isEmpty(extraCosts) && (React.createElement("div", { className: "pricing-summary__group" },
+                            React.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.EXTRA_COSTS), extraCosts === null || extraCosts === void 0 ? void 0 :
+                            extraCosts.map(function (priceDetail, index) {
+                                var _a;
+                                return (React.createElement(React.Fragment, { key: compact([
+                                        priceDetail.productCode,
+                                        priceDetail.accommodationCode,
+                                        index,
+                                    ]).join("_") },
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "pricing-summary__property" }, priceDetail.productName),
+                                        priceDetail.showPrice && (React.createElement("div", { className: "pricing-summary__value" }, formatPrice(priceDetail.price * priceDetail.amount)))),
+                                    React.createElement("div", { className: "pricing-summary__row" },
+                                        React.createElement("div", { className: "price-summary__property" }, (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode))));
+                            })))))),
+                !isLoading && canShowTotalPriceSection && (React.createElement("div", { className: "pricing-summary__region pricing-summary__region--pricing ".concat(!isLoading ? "pricing-summary__region--fade-in" : "") }, deposit ? (React.createElement("div", { className: "pricing-summary__group" },
                     totalPrice !== undefined && totalPrice > 0 && (React.createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
                         React.createElement("div", { className: "pricing-summary__property" },
                             React.createElement("h6", { className: "pricing-summary__title" }, translations.SHARED.TOTAL_PRICE)),
@@ -13193,7 +13805,7 @@ var Sidebar = function (_a) {
                                 formatPrice(remainingAmount),
                                 translations.SIDEBAR.DEPOSIT_TEXT4,
                                 React.createElement("strong", null, translations.SIDEBAR.DEPOSIT_TEXT5),
-                                translations.SIDEBAR.DEPOSIT_TEXT6))))) : (React.createElement("div", { className: "pricing-summary__group" }, totalPrice !== undefined && totalPrice > 0 && (React.createElement("div", { className: "pricing-summary__row" },
+                                translations.SIDEBAR.DEPOSIT_TEXT6))))) : (React.createElement("div", { className: "pricing-summary__group" }, totalPrice !== undefined && totalPrice > 0 && (React.createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
                     React.createElement("div", { className: "pricing-summary__property" },
                         React.createElement("h6", { className: "pricing-summary__title" }, translations.SHARED.TOTAL_PRICE)),
                     React.createElement("div", { className: "pricing-summary__value" },
@@ -13222,28 +13834,29 @@ var SidebarContainer = function (_a) {
 var SummaryPerPaxOptionGroup = function (_a) {
     var group = _a.group;
     var groupOptions = group.options.filter(function (x) { return x.isSelected; });
-    return (React.createElement("li", { className: "list__item" },
+    var renderOptions = function () { return (React.createElement(React.Fragment, null, groupOptions.map(function (opt) {
+        var _a;
+        return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
+            opt.line.productName,
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    opt.line.accommodationName,
+                    !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
+                    opt.line.regimeName)),
+            getDateText(opt.line.startDate),
+            opt.line.startDate != opt.line.endDate
+                ? " > ".concat(getDateText(opt.line.endDate))
+                : "",
+            React.createElement("ul", { className: "list" }, !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
+                (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
+                    if (!x.options.some(function (y) { return y.isSelected; }))
+                        return;
+                    return React.createElement(SummaryPerPaxOptionGroup, { group: x });
+                })))));
+    }))); };
+    return (React.createElement(React.Fragment, null, group.title ? (React.createElement("li", { className: "list__item" },
         React.createElement("h6", null, group.title),
-        React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
-            var _a;
-            return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
-                opt.line.productName,
-                ": ",
-                opt.line.accommodationName,
-                !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
-                opt.line.regimeName,
-                React.createElement("br", null),
-                getDateText(opt.line.startDate),
-                opt.line.startDate != opt.line.endDate
-                    ? " > ".concat(getDateText(opt.line.endDate))
-                    : "",
-                React.createElement("ul", { className: "list" }, !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
-                    (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
-                        if (!x.options.some(function (y) { return y.isSelected; }))
-                            return;
-                        return React.createElement(SummaryPerPaxOptionGroup, { group: x });
-                    })))));
-        }))));
+        React.createElement("ul", { className: "list" }, renderOptions()))) : (React.createElement(React.Fragment, null, renderOptions()))));
 };
 
 var SummaryBookingOptionPax = function (_a) {
@@ -13259,31 +13872,32 @@ var SummaryBookingOptionPax = function (_a) {
 var SummaryPerUnitOptionGroup = function (_a) {
     var group = _a.group;
     var groupOptions = group.options.filter(function (x) { return x.isSelected; });
-    return (React.createElement("li", { className: "list__item" },
+    var renderOptions = function () { return (React.createElement(React.Fragment, null, groupOptions.map(function (opt) {
+        var _a;
+        return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
+            opt.line.productName,
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    opt.line.accommodationName,
+                    !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
+                    opt.line.regimeName)),
+            getDateText(opt.line.startDate),
+            opt.line.startDate != opt.line.endDate
+                ? " > ".concat(getDateText(opt.line.endDate))
+                : "",
+            React.createElement("ul", null,
+                !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
+                    (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
+                        if (!x.options.some(function (y) { return y.isSelected; }))
+                            return;
+                        return React.createElement(SummaryPerUnitOptionGroup, { group: x });
+                    })),
+                !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
+                    (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
+    }))); };
+    return (React.createElement(React.Fragment, null, group.title ? (React.createElement("li", { className: "list__item" },
         React.createElement("h6", null, group.title),
-        React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
-            var _a;
-            return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
-                opt.line.productName,
-                ": ",
-                opt.line.accommodationName,
-                !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
-                opt.line.regimeName,
-                React.createElement("br", null),
-                getDateText(opt.line.startDate),
-                opt.line.startDate != opt.line.endDate
-                    ? " > ".concat(getDateText(opt.line.endDate))
-                    : "",
-                React.createElement("ul", null,
-                    !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
-                        (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
-                            if (!x.options.some(function (y) { return y.isSelected; }))
-                                return;
-                            return React.createElement(SummaryPerUnitOptionGroup, { group: x });
-                        })),
-                    !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
-                        (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
-        }))));
+        React.createElement("ul", { className: "list" }, renderOptions()))) : (React.createElement(React.Fragment, null, renderOptions()))));
 };
 
 var SummaryBookingOptionUnit = function (_a) {
@@ -13331,33 +13945,34 @@ var SummaryFlight = function (_a) {
 var SummaryPerBookingOptionGroup = function (_a) {
     var group = _a.group;
     var groupOptions = group.options.filter(function (x) { return x.isSelected; });
-    return (React.createElement("li", { className: "list__item" },
+    var renderOptions = function () { return (React.createElement(React.Fragment, null, groupOptions.map(function (opt) {
+        var _a;
+        return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
+            opt.line.productName,
+            React.createElement("ul", null,
+                React.createElement("li", null,
+                    opt.line.accommodationName,
+                    !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
+                    opt.line.regimeName)),
+            getDateText(opt.line.startDate),
+            opt.line.startDate != opt.line.endDate
+                ? " > ".concat(getDateText(opt.line.endDate))
+                : "",
+            React.createElement("ul", null,
+                !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
+                    (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
+                        if (!x.options.some(function (y) { return y.isSelected; }))
+                            return;
+                        return React.createElement(SummaryPerBookingOptionGroup, { group: x });
+                    })),
+                !isEmpty(opt === null || opt === void 0 ? void 0 : opt.units) &&
+                    (opt === null || opt === void 0 ? void 0 : opt.units.map(function (x) { return React.createElement(SummaryBookingOptionUnit, { unit: x }); })),
+                !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
+                    (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
+    }))); };
+    return (React.createElement(React.Fragment, null, group.title ? (React.createElement("li", { className: "list__item" },
         React.createElement("h6", null, group.title),
-        React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
-            var _a;
-            return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
-                opt.line.productName,
-                ": ",
-                opt.line.accommodationName,
-                !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
-                opt.line.regimeName,
-                React.createElement("br", null),
-                getDateText(opt.line.startDate),
-                opt.line.startDate != opt.line.endDate
-                    ? " > ".concat(getDateText(opt.line.endDate))
-                    : "",
-                React.createElement("ul", null,
-                    !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
-                        (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
-                            if (!x.options.some(function (y) { return y.isSelected; }))
-                                return;
-                            return React.createElement(SummaryPerBookingOptionGroup, { group: x });
-                        })),
-                    !isEmpty(opt === null || opt === void 0 ? void 0 : opt.units) &&
-                        (opt === null || opt === void 0 ? void 0 : opt.units.map(function (x) { return React.createElement(SummaryBookingOptionUnit, { unit: x }); })),
-                    !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
-                        (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
-        }))));
+        React.createElement("ul", { className: "list" }, renderOptions()))) : (React.createElement(React.Fragment, null, renderOptions()))));
 };
 
 var Summary = function () {
@@ -13374,6 +13989,8 @@ var Summary = function () {
     var activeOption = useSelector(selectActiveOption);
     var apiSettings = useSelector(selectApiSettings);
     var languageCode = useSelector(selectLanguageCode);
+    var officeId = useSelector(selectOfficeId);
+    var agentId = useSelector(selectAgentAdressId);
     if (!travelerFormValues) {
         if (settings.skipRouter) {
             dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
@@ -13472,7 +14089,7 @@ var Summary = function () {
         dispatch(setBookingRemarks(text));
         setRemarks(text);
     };
-    var handleValidateVoucher = function (event) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var handleValidateVoucher = function () { return __awaiter$1(void 0, void 0, void 0, function () {
         var request, tideClientConfig, result;
         var _a;
         return __generator$1(this, function (_b) {
@@ -13480,10 +14097,13 @@ var Summary = function () {
                 case 0:
                     if (!(voucher === null || voucher === void 0 ? void 0 : voucher.code))
                         return [2 /*return*/];
-                    request = useSelector(selectBookingPackageRequest);
-                    request.payload = {
-                        code: voucher.code,
-                        otherCodes: (_a = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) !== null && _a !== void 0 ? _a : [],
+                    request = {
+                        officeId: officeId,
+                        agentId: agentId,
+                        payload: {
+                            code: voucher.code,
+                            otherCodes: (_a = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) !== null && _a !== void 0 ? _a : [],
+                        },
                     };
                     tideClientConfig = buildTideClientConfig(apiSettings);
                     if (!tideClientConfig)
@@ -13520,176 +14140,185 @@ var Summary = function () {
     return (React.createElement(React.Fragment, null,
         isSubmitting && settings.loaderComponent,
         !isSubmitting && (React.createElement("form", { className: "form", name: "booking--summary", id: "booking--summary", onSubmit: handleSubmit },
-            React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "form__region-header" },
-                            React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.PERSONAL_DETAILS)))),
-                rooms.map(function (r, rIndex) { return (React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "form__region-header" },
-                            React.createElement("h5", { className: "form__region-heading" },
-                                translations.SHARED.ROOM,
-                                " ",
-                                rIndex + 1),
-                            React.createElement("p", { className: "form__region-label" }, "".concat(r.adults.length + r.children.length, " ").concat(r.adults.length + r.children.length === 1
-                                ? translations.SUMMARY.TRAVELER
-                                : translations.SUMMARY.TRAVELERS, ": ").concat(compact([
-                                r.adults.length,
-                                r.adults.length === 1 &&
-                                    " ".concat(translations.SUMMARY.ADULT),
-                                r.adults.length > 1 &&
-                                    " ".concat(translations.SUMMARY.ADULTS),
-                                r.adults &&
-                                    r.adults.length &&
-                                    r.children &&
-                                    r.children.length &&
-                                    ", ",
-                                r.children.length,
-                                r.children.length === 1 &&
-                                    " ".concat(translations.SUMMARY.CHILD),
-                                r.children.length > 1 &&
-                                    " ".concat(translations.SUMMARY.CHILDREN),
-                            ]).join(""))))),
-                    __spreadArray(__spreadArray([], r.adults, true), r.children, true).map(function (traveler) {
-                        var isMainBooker = traveler.id === (travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.mainBookerId);
-                        return (React.createElement("div", { className: "form__group form__group--sm-50", key: traveler.id },
-                            React.createElement("ul", { className: "list list--plain" },
-                                React.createElement("li", { className: "list__item" },
-                                    React.createElement("strong", null,
-                                        traveler.firstName,
-                                        " ",
-                                        traveler.lastName),
+            React.createElement("div", { className: "form__booking--summary" },
+                React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "form__region-header" },
+                                React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.PERSONAL_DETAILS)))),
+                    rooms.map(function (r, rIndex) { return (React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "form__region-header" },
+                                React.createElement("h5", { className: "form__region-heading" },
+                                    translations.SHARED.ROOM,
                                     " ",
-                                    isMainBooker && (React.createElement("em", null,
+                                    rIndex + 1),
+                                React.createElement("p", { className: "form__region-label" }, "".concat(r.adults.length + r.children.length, " ").concat(r.adults.length + r.children.length === 1
+                                    ? translations.SUMMARY.TRAVELER
+                                    : translations.SUMMARY.TRAVELERS, ": ").concat(compact([
+                                    r.adults.length,
+                                    r.adults.length === 1 &&
+                                        " ".concat(translations.SUMMARY.ADULT),
+                                    r.adults.length > 1 &&
+                                        " ".concat(translations.SUMMARY.ADULTS),
+                                    r.adults &&
+                                        r.adults.length &&
+                                        r.children &&
+                                        r.children.length &&
+                                        ", ",
+                                    r.children.length,
+                                    r.children.length === 1 &&
+                                        " ".concat(translations.SUMMARY.CHILD),
+                                    r.children.length > 1 &&
+                                        " ".concat(translations.SUMMARY.CHILDREN),
+                                ]).join(""))))),
+                        __spreadArray(__spreadArray([], r.adults, true), r.children, true).map(function (traveler) {
+                            var isMainBooker = traveler.id === (travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.mainBookerId);
+                            return (React.createElement("div", { className: "form__group form__group--sm-50", key: traveler.id },
+                                React.createElement("ul", { className: "list list--plain" },
+                                    React.createElement("li", { className: "list__item" },
+                                        React.createElement("strong", null,
+                                            traveler.firstName,
+                                            " ",
+                                            traveler.lastName),
+                                        " ",
+                                        isMainBooker && (React.createElement("em", null,
+                                            "(",
+                                            translations.SUMMARY.MAIN_BOOKER,
+                                            ")"))),
+                                    React.createElement("li", { className: "list__item" }, traveler.birthDate.split("-").reverse().join("/")),
+                                    isMainBooker && (React.createElement(React.Fragment, null,
+                                        React.createElement("li", { className: "list__item" }, "".concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.street, " ").concat(compact([
+                                            travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.houseNumber,
+                                            travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.box,
+                                        ]).join(" "), ", ").concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.zipCode, " ").concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.place)),
+                                        React.createElement("li", { className: "list__item" }, travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.phone),
+                                        React.createElement("li", { className: "list__item" }, travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.email))))));
+                        }))); })),
+                React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "form__region-header" },
+                                React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.OPTIONS)))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("ul", { className: "list list--booking-summary" },
+                                React.createElement("li", null,
+                                    React.createElement("h6", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.name),
+                                    React.createElement("ul", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.rooms.map(function (r, ri) {
+                                        var roomOption = r.options.find(function (x) { return x.isSelected; });
+                                        return (React.createElement("li", { key: ri, className: "list__item" }, roomOption === null || roomOption === void 0 ? void 0 :
+                                            roomOption.accommodationName,
+                                            !isNil(roomOption === null || roomOption === void 0 ? void 0 : roomOption.regimeName) && ", ", roomOption === null || roomOption === void 0 ? void 0 :
+                                            roomOption.regimeName));
+                                    })),
+                                    React.createElement("p", null,
                                         "(",
-                                        translations.SUMMARY.MAIN_BOOKER,
-                                        ")"))),
-                                React.createElement("li", { className: "list__item" }, traveler.birthDate.split("-").reverse().join("/")),
-                                isMainBooker && (React.createElement(React.Fragment, null,
-                                    React.createElement("li", { className: "list__item" }, "".concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.street, " ").concat(compact([
-                                        travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.houseNumber,
-                                        travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.box,
-                                    ]).join(" "), ", ").concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.zipCode, " ").concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.place)),
-                                    React.createElement("li", { className: "list__item" }, travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.phone),
-                                    React.createElement("li", { className: "list__item" }, travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.email))))));
-                    }))); })),
-            React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "form__region-header" },
-                            React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.OPTIONS)))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("ul", { className: "list list--booking-summary" },
-                            React.createElement("li", null,
-                                React.createElement("h6", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.name),
-                                React.createElement("ul", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.rooms.map(function (r, ri) {
-                                    var roomOption = r.options.find(function (x) { return x.isSelected; });
-                                    return (React.createElement("li", { key: ri, className: "list__item" }, roomOption === null || roomOption === void 0 ? void 0 :
-                                        roomOption.accommodationName,
-                                        !isNil(roomOption === null || roomOption === void 0 ? void 0 : roomOption.regimeName) && ", ", roomOption === null || roomOption === void 0 ? void 0 :
-                                        roomOption.regimeName));
-                                })),
-                                React.createElement("p", null,
-                                    "(",
-                                    getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
-                                    " >",
+                                        getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
+                                        " >",
+                                        " ",
+                                        getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
+                                        ")")),
+                                !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups) &&
+                                    (activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups.map(function (x, i) {
+                                        if (!x.options.some(function (y) { return y.isSelected; }))
+                                            return;
+                                        return React.createElement(SummaryPerBookingOptionGroup, { key: i, group: x });
+                                    })),
+                                !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits) &&
+                                    (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x) { return (React.createElement(SummaryBookingOptionUnit, { unit: x })); })),
+                                !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax) &&
+                                    (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x) { return (React.createElement(SummaryBookingOptionPax, { pax: x })); })),
+                                (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.outwardFlights) &&
+                                    packageDetails.outwardFlights
+                                        .filter(function (x) { return x.isSelected; })
+                                        .map(function (flight, i) { return (React.createElement(SummaryFlight, { key: i, flight: flight, header: translations.SIDEBAR.DEPARTURE_FLIGHT })); }),
+                                (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.returnFlights) &&
+                                    packageDetails.returnFlights
+                                        .filter(function (x) { return x.isSelected; })
+                                        .map(function (flight, i) { return (React.createElement(SummaryFlight, { key: i, flight: flight, header: translations.SIDEBAR.ARRIVAL_FLIGHT })); }))))),
+                settings.enableVoucher && (React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "form__region-header" },
+                                React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.VOUCHERS)))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("input", { type: "text", className: "form__input info-message__voucher__input", defaultValue: voucher.code, onChange: function (e) { return setVoucher({ code: e.target.value }); } }),
+                            React.createElement("button", { type: "button", className: buildClassName([
+                                    "cta",
+                                    !voucher.code && "cta--disabled",
+                                ]), onClick: function (e) { return handleValidateVoucher(); } }, translations.SUMMARY.VOUCHER_VALIDATE))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group info-message__voucher" },
+                            voucher.isValid && voucher.isValidated && (React.createElement("div", { className: "info-message info-message__voucher__valid" },
+                                React.createElement("span", null, translations.SUMMARY.VOUCHER_VALID),
+                                React.createElement("button", { type: "button", className: "cta cta--secondary", onClick: handleAddVoucher }, translations.SUMMARY.ADD_VOUCHER))),
+                            !voucher.isValid && voucher.isValidated && (React.createElement("div", { className: "info-message--error" }, translations.SUMMARY.VOUCHER_INVALID)))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("ul", { className: "info-message__voucher" }, !isEmpty(bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) &&
+                            ((_b = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) === null || _b === void 0 ? void 0 : _b.map(function (y) { return (React.createElement("li", null,
+                                React.createElement("div", { className: "info-message__voucher__list" },
+                                    y,
                                     " ",
-                                    getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
-                                    ")")),
-                            !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups) &&
-                                (activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups.map(function (x, i) {
-                                    if (!x.options.some(function (y) { return y.isSelected; }))
-                                        return;
-                                    return React.createElement(SummaryPerBookingOptionGroup, { key: i, group: x });
-                                })),
-                            !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits) &&
-                                (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x) { return (React.createElement(SummaryBookingOptionUnit, { unit: x })); })),
-                            !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax) &&
-                                (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x) { return (React.createElement(SummaryBookingOptionPax, { pax: x })); })),
-                            (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.outwardFlights) &&
-                                packageDetails.outwardFlights
-                                    .filter(function (x) { return x.isSelected; })
-                                    .map(function (flight, i) { return (React.createElement(SummaryFlight, { key: i, flight: flight, header: translations.SIDEBAR.DEPARTURE_FLIGHT })); }),
-                            (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.returnFlights) &&
-                                packageDetails.returnFlights
-                                    .filter(function (x) { return x.isSelected; })
-                                    .map(function (flight, i) { return (React.createElement(SummaryFlight, { key: i, flight: flight, header: translations.SIDEBAR.ARRIVAL_FLIGHT })); }))))),
-            settings.enableVoucher && (React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "form__region-header" },
-                            React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.VOUCHERS)))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("input", { type: "text", className: "form__input", defaultValue: voucher.code, onChange: function (e) { return setVoucher({ code: e.target.value }); } }),
-                        React.createElement("button", { type: "button", className: buildClassName([
-                                "cta",
-                                !voucher.code && "cta--disabled",
-                            ]), onClick: handleValidateVoucher }, translations.SUMMARY.VOUCHER_VALIDATE))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        voucher.isValid && voucher.isValidated && (React.createElement("div", { className: "info-message" },
-                            translations.SUMMARY.VOUCHER_VALID,
-                            React.createElement("button", { type: "button", className: "cta", onClick: handleAddVoucher }, translations.SUMMARY.ADD_VOUCHER))),
-                        !voucher.isValid && voucher.isValidated && (React.createElement("div", { className: "info-message--error" }, translations.SUMMARY.VOUCHER_INVALID)))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("ul", null, !isEmpty(bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) &&
-                        ((_b = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) === null || _b === void 0 ? void 0 : _b.map(function (y) { return (React.createElement("li", null,
-                            y,
-                            " ",
-                            React.createElement("button", { type: "button", className: "cat--add-remove", onClick: function (e) { return handleRemoveVoucher(y); } }))); })))))),
-            !isEmpty(notifications) && (React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "info-message" },
-                            React.createElement(Icon, { name: "ui-tooltip", className: "icon--secondary-color" }),
-                            React.createElement("div", { className: "info-message__copy" },
-                                React.createElement("h5", null, translations.SUMMARY.NOTIFICATIONS_TITLE),
-                                React.createElement(React.Fragment, null,
-                                    uniqBy(notifications.filter(function (x) { return !x.hasToBeConfirmed; }), "id").map(function (notification) { return (React.createElement("span", { key: notification.id, className: "checkbox__label-text" },
-                                        React.createElement("strong", { className: "checkbox__label-text--title" }, notification.title),
-                                        React.createElement("span", { className: "checkbox__label-text--description" }, notification.description))); }),
-                                    uniqBy(notifications.filter(function (x) { return x.hasToBeConfirmed; }), "id").map(function (notification) { return (React.createElement("div", { className: "checkbox", key: notification.id },
-                                        React.createElement("label", { className: "checkbox__label" },
-                                            React.createElement("input", { type: "checkbox", className: "checkbox__input", checked: notification.isConfirmed, onChange: function (e) {
-                                                    return handleNotificationChange(notification.id, e.target.checked);
-                                                } }),
-                                            React.createElement("span", { className: "checkbox__label-text" },
-                                                React.createElement("strong", { className: "checkbox__label-text--title" }, notification.title),
-                                                React.createElement("span", { className: "checkbox__label-text--description" }, notification.description))))); })))))))),
-            React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "form__region-header" },
-                            React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.REMARKS)))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("textarea", { className: "form__input", defaultValue: remarks, onChange: function (e) { return handleRemarksChange(e.target.value); } })))),
-            React.createElement("div", { className: "form__region" },
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: "form__group" },
-                        React.createElement("div", { className: "info-message" },
-                            React.createElement(Icon, { name: "ui-tooltip", className: "icon--secondary-color" }),
-                            React.createElement("div", { className: "info-message__copy" },
-                                React.createElement("h5", null, translations.SUMMARY.VALIDATE_TITLE),
-                                React.createElement("p", null, settings.isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING),
-                                checkboxes &&
-                                    checkboxes.map(function (checkbox) { return (React.createElement("div", { className: "checkbox", key: checkbox.id },
-                                        React.createElement("label", { className: "checkbox__label" },
-                                            React.createElement("input", { type: "checkbox", className: "checkbox__input", checked: checkbox.isSelected, onChange: function (e) {
-                                                    return handleCheckboxChange(checkbox.id, e.target.checked);
-                                                } }),
-                                            React.createElement("span", { className: "checkbox__label-text", dangerouslySetInnerHTML: {
-                                                    __html: checkbox.text,
-                                                } })))); })))))),
+                                    React.createElement("button", { type: "button", className: "cta--add-remove", onClick: function (e) { return handleRemoveVoucher(y); } },
+                                        React.createElement(Icon, { height: 16, name: "ui-trashcan" }))))); })))))),
+                !isEmpty(notifications) && (React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "info-message" },
+                                React.createElement(Icon, { name: "ui-tooltip", className: "icon--secondary-color" }),
+                                React.createElement("div", { className: "info-message__copy" },
+                                    React.createElement("h5", null, translations.SUMMARY.NOTIFICATIONS_TITLE),
+                                    React.createElement(React.Fragment, null,
+                                        uniqBy(notifications.filter(function (x) { return !x.hasToBeConfirmed; }), "id").map(function (notification) { return (React.createElement("span", { key: notification.id, className: "checkbox__label-text" },
+                                            React.createElement("strong", { className: "checkbox__label-text--title" }, notification.title),
+                                            React.createElement("span", { className: "checkbox__label-text--description" }, notification.description))); }),
+                                        uniqBy(notifications.filter(function (x) { return x.hasToBeConfirmed; }), "id").map(function (notification) { return (React.createElement("div", { className: "checkbox", key: notification.id },
+                                            React.createElement("label", { className: "checkbox__label" },
+                                                React.createElement("input", { type: "checkbox", className: "checkbox__input", checked: notification.isConfirmed, onChange: function (e) {
+                                                        return handleNotificationChange(notification.id, e.target.checked);
+                                                    } }),
+                                                React.createElement("span", { className: "checkbox__label-text" },
+                                                    React.createElement("strong", { className: "checkbox__label-text--title" }, notification.title),
+                                                    React.createElement("span", { className: "checkbox__label-text--description" }, notification.description))))); })))))))),
+                React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "form__region-header" },
+                                React.createElement("h5", { className: "form__region-heading" }, translations.SUMMARY.REMARKS)))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("textarea", { className: "form__input", defaultValue: remarks, onChange: function (e) { return handleRemarksChange(e.target.value); } })))),
+                React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: "form__group" },
+                            React.createElement("div", { className: "info-message" },
+                                React.createElement(Icon, { name: "ui-tooltip", className: "icon--secondary-color" }),
+                                React.createElement("div", { className: "info-message__copy" },
+                                    React.createElement("h5", null, translations.SUMMARY.VALIDATE_TITLE),
+                                    React.createElement("p", null, settings.isOffer
+                                        ? translations.SUMMARY.VALIDATE_TEXT_OFFER
+                                        : translations.SUMMARY.VALIDATE_TEXT_BOOKING),
+                                    checkboxes &&
+                                        checkboxes.map(function (checkbox) { return (React.createElement("div", { className: "checkbox", key: checkbox.id },
+                                            React.createElement("label", { className: "checkbox__label" },
+                                                React.createElement("input", { type: "checkbox", className: "checkbox__input", checked: checkbox.isSelected, onChange: function (e) {
+                                                        return handleCheckboxChange(checkbox.id, e.target.checked);
+                                                    } }),
+                                                React.createElement("span", { className: "checkbox__label-text", dangerouslySetInnerHTML: {
+                                                        __html: checkbox.text,
+                                                    } })))); }))))))),
             React.createElement("div", { className: "booking__navigator" },
                 settings.skipRouter ? (React.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: function () { return goPrevious(); }, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React.createElement(Link, { to: "".concat(settings.basePath).concat(settings.travellers.pathSuffix, "?").concat(bookingQueryString), title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
-                React.createElement("button", { title: settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING, className: buildClassName([
+                React.createElement("button", { title: settings.isOffer
+                        ? translations.STEPS.SUBMIT_OFFER
+                        : translations.STEPS.SUBMIT_BOOKING, className: buildClassName([
                         "cta",
                         !userValidated && "cta--disabled",
-                    ]), disabled: !userValidated }, settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING))))));
+                    ]), disabled: !userValidated }, settings.isOffer
+                    ? translations.STEPS.SUBMIT_OFFER
+                    : translations.STEPS.SUBMIT_BOOKING))))));
 };
 
 var LabeledInput = function (_a) {
@@ -13731,7 +14360,7 @@ var TypeAheadInput = function (_a) {
     };
     return (React.createElement("div", { className: "typeahead" },
         React.createElement("div", { className: "typeahead__trigger typeahead__trigger--icon" },
-            React.createElement(Icon, { name: "qsm-location" }),
+            React.createElement(Icon, { name: "ui-qsm-location" }),
             React.createElement("input", { type: "text", className: "form__input", name: name, value: value, onChange: handleChange, placeholder: placeholder, required: true, autoComplete: "off", onKeyDown: function (e) {
                     if (e.key === "Tab" && options && onSelect) {
                         onSelect(options[0].key);
@@ -14025,159 +14654,160 @@ var TravelersForm = function () {
         return get$2(formik.errors, key) && get$2(formik.touched, key);
     };
     return (React.createElement("form", { className: "form form__travelers", name: "booking--travellers", id: "booking--travellers", noValidate: true, onSubmit: formik.handleSubmit, onReset: formik.handleReset },
-        formik.values.rooms.map(function (room, rIndex) { return (React.createElement("div", { key: rIndex },
-            React.createElement("div", { className: "form__region" },
+        React.createElement("div", { className: "form__travelers__wrapper" },
+            formik.values.rooms.map(function (room, rIndex) { return (React.createElement("div", { key: rIndex },
+                React.createElement("div", { className: "form__region" },
+                    React.createElement("div", { className: "form__region-header" },
+                        React.createElement("h5", { className: "form__region-heading" },
+                            translations.SHARED.ROOM,
+                            " ",
+                            rIndex + 1),
+                        React.createElement("p", { className: "form__region-label" }, compact([
+                            room.adults.length,
+                            room.adults.length === 1 &&
+                                " ".concat(translations.TRAVELERS_FORM.ADULT),
+                            room.adults.length > 1 &&
+                                " ".concat(translations.TRAVELERS_FORM.ADULTS),
+                            room.adults &&
+                                room.adults.length &&
+                                room.children &&
+                                room.children.length &&
+                                ", ",
+                            room.children.length,
+                            room.children.length === 1 &&
+                                " ".concat(translations.TRAVELERS_FORM.CHILD),
+                            room.children.length > 1 &&
+                                " ".concat(translations.TRAVELERS_FORM.CHILDREN),
+                        ]).join("")))),
+                room.adults.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
+                    React.createElement("div", { className: "form__region-header" },
+                        React.createElement("h5", { className: "form__region-heading" },
+                            translations.TRAVELERS_FORM.TRAVELER,
+                            " ",
+                            index + 1),
+                        React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.ADULT),
+                        React.createElement("div", { className: "radiobutton" },
+                            React.createElement("label", { className: "radiobutton__label" },
+                                React.createElement("input", { type: "radio", name: "mainBookerId", onChange: handleMainBookerChange, onBlur: formik.handleBlur, value: travelerValues.id, checked: formik.values.mainBookerId === travelerValues.id, className: "radiobutton__input" }),
+                                translations.TRAVELERS_FORM.MAIN_BOOKER))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: buildClassName([
+                                "form__group",
+                                hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].gender")) && "form__group--error",
+                            ]) },
+                            React.createElement("label", { className: "form__label" },
+                                translations.TRAVELERS_FORM.GENDER,
+                                " *"),
+                            React.createElement("div", { className: "radiobutton-group" },
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
+                                        translations.TRAVELERS_FORM.MALE)),
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
+                                        translations.TRAVELERS_FORM.FEMALE)),
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
+                                        translations.TRAVELERS_FORM.OTHER))))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
+                        React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
+                        React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }),
+                room.children.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
+                    React.createElement("div", { className: "form__region-header" },
+                        React.createElement("h5", { className: "form__region-heading" },
+                            translations.TRAVELERS_FORM.TRAVELER,
+                            " ",
+                            room.adults.length + index + 1),
+                        React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.CHILD)),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement("div", { className: buildClassName([
+                                "form__group",
+                                hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].gender")) && "form__group--error",
+                            ]) },
+                            React.createElement("label", { className: "form__label" },
+                                translations.TRAVELERS_FORM.GENDER,
+                                " *"),
+                            React.createElement("div", { className: "radiobutton-group" },
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
+                                        translations.TRAVELERS_FORM.MALE)),
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
+                                        translations.TRAVELERS_FORM.FEMALE)),
+                                React.createElement("div", { className: "radiobutton" },
+                                    React.createElement("label", { className: "radiobutton__label" },
+                                        React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
+                                        translations.TRAVELERS_FORM.OTHER))))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
+                        React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
+                        React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }))); }),
+            bookingType != "b2b" ? (React.createElement("div", { className: "form__region" },
                 React.createElement("div", { className: "form__region-header" },
-                    React.createElement("h5", { className: "form__region-heading" },
-                        translations.SHARED.ROOM,
-                        " ",
-                        rIndex + 1),
+                    React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.MAIN_BOOKER),
                     React.createElement("p", { className: "form__region-label" }, compact([
-                        room.adults.length,
-                        room.adults.length === 1 &&
-                            " ".concat(translations.TRAVELERS_FORM.ADULT),
-                        room.adults.length > 1 &&
-                            " ".concat(translations.TRAVELERS_FORM.ADULTS),
-                        room.adults &&
-                            room.adults.length &&
-                            room.children &&
-                            room.children.length &&
-                            ", ",
-                        room.children.length,
-                        room.children.length === 1 &&
-                            " ".concat(translations.TRAVELERS_FORM.CHILD),
-                        room.children.length > 1 &&
-                            " ".concat(translations.TRAVELERS_FORM.CHILDREN),
-                    ]).join("")))),
-            room.adults.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
-                React.createElement("div", { className: "form__region-header" },
-                    React.createElement("h5", { className: "form__region-heading" },
-                        translations.TRAVELERS_FORM.TRAVELER,
-                        " ",
-                        index + 1),
-                    React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.ADULT),
-                    React.createElement("div", { className: "radiobutton" },
-                        React.createElement("label", { className: "radiobutton__label" },
-                            React.createElement("input", { type: "radio", name: "mainBookerId", onChange: handleMainBookerChange, onBlur: formik.handleBlur, value: travelerValues.id, checked: formik.values.mainBookerId === travelerValues.id, className: "radiobutton__input" }),
-                            translations.TRAVELERS_FORM.MAIN_BOOKER))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement("div", { className: buildClassName([
-                            "form__group",
-                            hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].gender")) && "form__group--error",
-                        ]) },
-                        React.createElement("label", { className: "form__label" },
-                            translations.TRAVELERS_FORM.GENDER,
-                            " *"),
-                        React.createElement("div", { className: "radiobutton-group" },
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
-                                    translations.TRAVELERS_FORM.MALE)),
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
-                                    translations.TRAVELERS_FORM.FEMALE)),
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
-                                    translations.TRAVELERS_FORM.OTHER))))),
+                        compact([mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName, mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName]).join(" "),
+                        (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
+                            format$1(parse(mainBooker.birthDate, "yyyy-MM-dd", new Date()), "dd-MM-yyyy"),
+                    ]).join(", "))),
+                React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "form__twocolumn" },
+                        React.createElement("div", { className: "form__twocolumn-column" },
+                            React.createElement("div", { className: "form__row" },
+                                React.createElement(LabeledInput, { hasError: hasVisibleError("street"), extraClassName: "form__group--50 form__group--sm-60", label: translations.TRAVELERS_FORM.STREET, required: true, name: "street", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.street }),
+                                React.createElement(LabeledInput, { hasError: hasVisibleError("houseNumber"), extraClassName: "form__group--30 form__group--sm-20", label: translations.TRAVELERS_FORM.HOUSE_NUMBER, required: true, name: "houseNumber", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.houseNumber }),
+                                React.createElement(LabeledInput, { hasError: hasVisibleError("box"), extraClassName: "form__group--20", label: translations.TRAVELERS_FORM.POST_BOX, name: "box", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.box }))),
+                        React.createElement("div", { className: "form__twocolumn-column" },
+                            React.createElement("div", { className: "form__row" },
+                                React.createElement(LabeledInput, { hasError: hasVisibleError("zipCode"), extraClassName: "form__group--40 form__group--sm-20", label: translations.TRAVELERS_FORM.ZIPCODE, required: true, name: "zipCode", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.zipCode }),
+                                React.createElement(LabeledInput, { hasError: hasVisibleError("place"), extraClassName: "form__group--60 form__group--sm-40", label: translations.TRAVELERS_FORM.CITY, required: true, name: "place", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.place }),
+                                React.createElement(LabeledSelect, { hasError: hasVisibleError("country"), extraClassName: "form__group--sm-40", label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: [
+                                        {
+                                            key: "empty",
+                                            label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
+                                            value: undefined,
+                                        },
+                                        {
+                                            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,
+                                        },
+                                    ] })))),
+                    React.createElement("div", { className: "form__row" },
+                        React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }),
+                        React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("email"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.EMAIL, required: true, name: "email", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.email }),
+                        React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("emailConfirmation"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.REPEAT_EMAIL, required: true, name: "emailConfirmation", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.emailConfirmation }))))) : (React.createElement("div", { className: "form__region" },
                 React.createElement("div", { className: "form__row" },
-                    React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
-                    React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
-                    React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }),
-            room.children.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
+                    React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone })))),
+            showAgentSelection && (React.createElement("div", { className: "form__region" },
                 React.createElement("div", { className: "form__region-header" },
-                    React.createElement("h5", { className: "form__region-heading" },
-                        translations.TRAVELERS_FORM.TRAVELER,
-                        " ",
-                        room.adults.length + index + 1),
-                    React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.CHILD)),
-                React.createElement("div", { className: "form__row" },
+                    React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
+                    React.createElement("div", { className: "checkbox", id: "cbxChooseOffice" },
+                        React.createElement("label", { className: "checkbox__label" },
+                            React.createElement("input", { type: "checkbox", name: "booking--mainbooker", defaultChecked: showAgents, onClick: function () { return toggleAgent(!showAgents); }, className: "checkbox__input" }),
+                            translations.TRAVELERS_FORM.CHOOSE_OFFICE))),
+                showAgents && (React.createElement("div", { className: "form__row form__row--choose-office" },
                     React.createElement("div", { className: buildClassName([
                             "form__group",
-                            hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].gender")) && "form__group--error",
+                            "form__group--icon",
+                            hasVisibleError("travelAgentId") && "form__group--error",
                         ]) },
-                        React.createElement("label", { className: "form__label" },
-                            translations.TRAVELERS_FORM.GENDER,
-                            " *"),
-                        React.createElement("div", { className: "radiobutton-group" },
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
-                                    translations.TRAVELERS_FORM.MALE)),
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
-                                    translations.TRAVELERS_FORM.FEMALE)),
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("label", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
-                                    translations.TRAVELERS_FORM.OTHER))))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
-                    React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
-                    React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }))); }),
-        bookingType != "b2b" ? (React.createElement("div", { className: "form__region" },
-            React.createElement("div", { className: "form__region-header" },
-                React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.MAIN_BOOKER),
-                React.createElement("p", { className: "form__region-label" }, compact([
-                    compact([mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName, mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName]).join(" "),
-                    (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
-                        format$1(parse(mainBooker.birthDate, "yyyy-MM-dd", new Date()), "dd-MM-yyyy"),
-                ]).join(", "))),
-            React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "form__twocolumn" },
-                    React.createElement("div", { className: "form__twocolumn-column" },
-                        React.createElement("div", { className: "form__row" },
-                            React.createElement(LabeledInput, { hasError: hasVisibleError("street"), extraClassName: "form__group--50 form__group--sm-60", label: translations.TRAVELERS_FORM.STREET, required: true, name: "street", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.street }),
-                            React.createElement(LabeledInput, { hasError: hasVisibleError("houseNumber"), extraClassName: "form__group--30 form__group--sm-20", label: translations.TRAVELERS_FORM.HOUSE_NUMBER, required: true, name: "houseNumber", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.houseNumber }),
-                            React.createElement(LabeledInput, { hasError: hasVisibleError("box"), extraClassName: "form__group--20", label: translations.TRAVELERS_FORM.POST_BOX, name: "box", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.box }))),
-                    React.createElement("div", { className: "form__twocolumn-column" },
-                        React.createElement("div", { className: "form__row" },
-                            React.createElement(LabeledInput, { hasError: hasVisibleError("zipCode"), extraClassName: "form__group--40 form__group--sm-20", label: translations.TRAVELERS_FORM.ZIPCODE, required: true, name: "zipCode", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.zipCode }),
-                            React.createElement(LabeledInput, { hasError: hasVisibleError("place"), extraClassName: "form__group--60 form__group--sm-40", label: translations.TRAVELERS_FORM.CITY, required: true, name: "place", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.place }),
-                            React.createElement(LabeledSelect, { hasError: hasVisibleError("country"), extraClassName: "form__group--sm-40", label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: [
-                                    {
-                                        key: "empty",
-                                        label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
-                                        value: undefined,
-                                    },
-                                    {
-                                        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,
-                                    },
-                                ] })))),
-                React.createElement("div", { className: "form__row" },
-                    React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }),
-                    React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("email"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.EMAIL, required: true, name: "email", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.email }),
-                    React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("emailConfirmation"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.REPEAT_EMAIL, required: true, name: "emailConfirmation", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.emailConfirmation }))))) : (React.createElement("div", { className: "form__region" },
-            React.createElement("div", { className: "form__row" },
-                React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone })))),
-        showAgentSelection && (React.createElement("div", { className: "form__region" },
-            React.createElement("div", { className: "form__region-header" },
-                React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
-                React.createElement("div", { className: "checkbox", id: "cbxChooseOffice" },
-                    React.createElement("label", { className: "checkbox__label" },
-                        React.createElement("input", { type: "checkbox", name: "booking--mainbooker", defaultChecked: showAgents, onClick: function () { return toggleAgent(!showAgents); }, className: "checkbox__input" }),
-                        translations.TRAVELERS_FORM.CHOOSE_OFFICE))),
-            showAgents && (React.createElement("div", { className: "form__row form__row--choose-office" },
-                React.createElement("div", { className: buildClassName([
-                        "form__group",
-                        "form__group--icon",
-                        hasVisibleError("travelAgentId") && "form__group--error",
-                    ]) },
-                    React.createElement(TypeAheadInput, { value: formik.values.travelAgentName, options: filteredAgents, onChange: handleAgentChange, onSelect: handleAgentSelect, onClear: handleAgentClear, name: "travelAgentName", placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER })))))),
+                        React.createElement(TypeAheadInput, { value: formik.values.travelAgentName, options: filteredAgents, onChange: handleAgentChange, onSelect: handleAgentSelect, onClear: handleAgentClear, name: "travelAgentName", placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER }))))))),
         Object.keys(flatErrors).length > 0 && (React.createElement("div", { className: "form__region form__region--errors" },
             React.createElement("div", { className: "form__row" },
                 React.createElement("div", { className: "form__group" },
@@ -14215,6 +14845,7 @@ var Booking = function (_a) {
         var catalog = getNumberFromParams(params, "catalog");
         var rooms = getRoomsFromParams(params, "rooms");
         var flight = getFlightsFromParams(params, "flight");
+        var flightRouteId = getStringFromParams(params, "flightRouteId");
         var allotmentName = getStringFromParams(params, "allotmentName");
         var allotmentIds = getNumbersFromParams(params, "allotmentId");
         var tourCode = getStringFromParams(params, "tourCode");
@@ -14240,6 +14871,7 @@ var Booking = function (_a) {
                 allotmentName: allotmentName,
                 allotmentIds: allotmentIds,
                 tourCode: tourCode,
+                flightRouteId: flightRouteId,
             }));
         }
         else {
@@ -14277,7 +14909,11 @@ var Booking = function (_a) {
         return __generator$1(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    translations = translationFiles === null || translationFiles === void 0 ? void 0 : translationFiles.map(function (x) { return fetch(x.path).then(function (y) { return y.json(); }).then(function (z) { return ({ language: x.language, value: z }); }); });
+                    translations = translationFiles === null || translationFiles === void 0 ? void 0 : translationFiles.map(function (x) {
+                        return fetch(x.path)
+                            .then(function (y) { return y.json(); })
+                            .then(function (z) { return ({ language: x.language, value: z }); });
+                    });
                     _a = translations;
                     if (!_a) return [3 /*break*/, 2];
                     return [4 /*yield*/, Promise.all(translations)];
@@ -14326,7 +14962,7 @@ var Booking = function (_a) {
         setCalculateDeposit,
         tagIds,
         agentAdressId,
-        accommodationViewId
+        accommodationViewId,
     ]);
     useEffect(function () {
         if (!productAttributes ||
@@ -14367,7 +15003,9 @@ var Booking = function (_a) {
         !packageDetails && !bookingNumber && !isUnvailable && (React.createElement("div", { className: "booking" },
             React.createElement("div", { className: "booking__loader" },
                 loaderComponent,
-                React.createElement("p", { className: "booking__loader-text" }, isOffer ? translations.MAIN.PREPARING_OFFER : translations.MAIN.PREPARING_BOOKING)))),
+                React.createElement("p", { className: "booking__loader-text" }, isOffer
+                    ? translations.MAIN.PREPARING_OFFER
+                    : translations.MAIN.PREPARING_BOOKING)))),
         isUnvailable && (React.createElement("div", { className: "booking" },
             React.createElement("div", { className: "booking__loader" },
                 React.createElement("p", { className: "booking__loader-text" }, translations.MAIN.PRODUCT_UNAVAILABLE))))));