@qite/tide-booking-component 1.1.3 → 1.2.0

package/build/build-esm/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { useContext, useState, useEffect } 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, differenceInCalendarDays, parse } from 'date-fns';
+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 { usePopper } from 'react-popper';
@@ -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.");
@@ -110,10 +110,33 @@ var INPUT$1 = {
 };
 var FLIGHTS_FORM$1 = {
 	OUTWARD_FLIGHTS: "",
+	OUTWARD_FLIGHT: "",
 	RETURN_FLIGHTS: "",
+	RETURN_FLIGHT: "",
 	DIRECT_FLIGHT: "",
+	STOP: "",
+	STOPS: "",
 	FLIGHT_STOPS: "",
-	DIFFERENT_OPTION_WARNING: ""
+	DIFFERENT_OPTION_WARNING: "",
+	FILTER_OPTIONS: "",
+	AIRLINES: "",
+	AIRPORTS: "",
+	NUMBER_OF_STOPS: "",
+	FLIGHT_OUTWARD: "",
+	DEPARTURE_TIME: "",
+	TRAVEL_DURATION: "",
+	CHANGE_TIME: "",
+	FLIGHT_RETURN: "",
+	NO_FLIGHTS_FOUND: "",
+	STARTING: "",
+	LOWEST_PRICE: "",
+	CHOOSE_YOUR_CLASS: "",
+	PLUS_ONE_DAY: "",
+	STOP_TIME: "",
+	NIGHT_DEPARTURE: "",
+	MORNING_DEPARTURE: "",
+	AFTERNOON_DEPARTURE: "",
+	EVENING_DEPARTURE: ""
 };
 var PRODUCT$1 = {
 	STAY_INCLUDED: "",
@@ -146,7 +169,9 @@ var SHARED$1 = {
 	ROOMS: "Chambres",
 	TOTAL_PRICE: "Prix total",
 	ADULTS: "Adultes",
-	CHILDREN: "Enfants"
+	CHILDREN: "Enfants",
+	SELECT: "Selecteer",
+	SELECTED: "Geselecteerd"
 };
 var SIDEBAR$1 = {
 	OVERVIEW: "Aperçu",
@@ -228,6 +253,11 @@ var TRAVELERS_FORM$1 = {
 		AGENT_IS_REQUIRED: "Agent de voyage est requis"
 	}
 };
+var ROOM_OPTIONS_FORM$1 = {
+	TRAVELER_GROUP: "",
+	ALTERNATIVES_TRAVELER_GROUP: "",
+	SHOW_ALTERNATIVES: ""
+};
 var OPTIONS_FORM$1 = {
 	NO_OPTIONS_TITLE: "Aucune option",
 	NO_OPTIONS_MESSAGE: "Ce voyage n'a pas d'options supplémentaires.",
@@ -290,6 +320,7 @@ var frJson = {
 	SHARED: SHARED$1,
 	SIDEBAR: SIDEBAR$1,
 	TRAVELERS_FORM: TRAVELERS_FORM$1,
+	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM$1,
 	OPTIONS_FORM: OPTIONS_FORM$1,
 	SUMMARY: SUMMARY$1,
 	CONFIRMATION: CONFIRMATION$1,
@@ -315,10 +346,33 @@ var INPUT = {
 };
 var FLIGHTS_FORM = {
 	OUTWARD_FLIGHTS: "Heenvluchten",
+	OUTWARD_FLIGHT: "Heenvlucht",
 	RETURN_FLIGHTS: "Retourvluchten",
+	RETURN_FLIGHT: "Retourvlucht",
 	DIRECT_FLIGHT: "Directe vlucht",
+	STOP: "stop",
+	STOPS: "stops",
 	FLIGHT_STOPS: "tussenstop(s)",
-	DIFFERENT_OPTION_WARNING: "Opgelet: Met deze vlucht veranderd de verblijfsduur."
+	DIFFERENT_OPTION_WARNING: "Opgelet: Met deze vlucht veranderd de verblijfsduur.",
+	FILTER_OPTIONS: "Filter opties",
+	AIRLINES: "Luchtvaartmaatschappijen",
+	AIRPORTS: "Luchthavens",
+	NUMBER_OF_STOPS: "Aantal stops",
+	FLIGHT_OUTWARD: "Vlucht heenrijs",
+	DEPARTURE_TIME: "Vertrektijd",
+	TRAVEL_DURATION: "Reisduur",
+	CHANGE_TIME: "Overstaptijd",
+	FLIGHT_RETURN: "Vlucht terugreis",
+	NO_FLIGHTS_FOUND: "Geen vluchten gevonden.",
+	STARTING: "Vanaf",
+	LOWEST_PRICE: "Laagste prijs",
+	CHOOSE_YOUR_CLASS: "Kies uw klasse:",
+	PLUS_ONE_DAY: "+1 dag",
+	STOP_TIME: "Stoptijd",
+	NIGHT_DEPARTURE: "Nacht (00:00 - 05:00)",
+	MORNING_DEPARTURE: "Ochtend (05:00 - 12:00)",
+	AFTERNOON_DEPARTURE: "Namiddag (12:00 - 18:00)",
+	EVENING_DEPARTURE: "Avond (18:00 - 00:00)"
 };
 var PRODUCT = {
 	STAY_INCLUDED: "Inclusief verblijf",
@@ -351,7 +405,9 @@ var SHARED = {
 	ROOMS: "Kamers",
 	TOTAL_PRICE: "Totale prijs",
 	ADULTS: "Volwassenen",
-	CHILDREN: "Kinderen"
+	CHILDREN: "Kinderen",
+	SELECT: "Selecteer",
+	SELECTED: "Geselecteerd"
 };
 var SIDEBAR = {
 	OVERVIEW: "Overzicht",
@@ -447,6 +503,11 @@ var OPTIONS_FORM = {
 	PER_UNIT_TITLE: "Opties per gezelschap selecteren",
 	NONE: "Geen"
 };
+var ROOM_OPTIONS_FORM = {
+	TRAVELER_GROUP: "Reisgezelschap",
+	ALTERNATIVES_TRAVELER_GROUP: "Alternatieve kameropties voor reisgezelschap",
+	SHOW_ALTERNATIVES: "Toon alternatieve kameropties"
+};
 var SUMMARY = {
 	PERSONAL_DETAILS: "Persoonlijke gegevens",
 	TRAVELERS: "reizigers",
@@ -496,6 +557,7 @@ var nlJson = {
 	SIDEBAR: SIDEBAR,
 	TRAVELERS_FORM: TRAVELERS_FORM,
 	OPTIONS_FORM: OPTIONS_FORM,
+	ROOM_OPTIONS_FORM: ROOM_OPTIONS_FORM,
 	SUMMARY: SUMMARY,
 	CONFIRMATION: CONFIRMATION,
 	ERROR: ERROR
@@ -729,9 +791,12 @@ var ServiceType = {
   restaurant: 23,
   event: 24,
   training: 25,
+  voucher: 26,
+  reduction: 27,
+  rocket: 28,
 };
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -791,9 +856,13 @@ function __generator(thisArg, body) {
     f,
     y,
     t,
-    g;
+    g = Object.create(
+      (typeof Iterator === "function" ? Iterator : Object).prototype
+    );
   return (
-    (g = { next: verb(0), throw: verb(1), return: verb(2) }),
+    (g.next = verb(0)),
+    (g["throw"] = verb(1)),
+    (g["return"] = verb(2)),
     typeof Symbol === "function" &&
       (g[Symbol.iterator] = function () {
         return this;
@@ -807,7 +876,7 @@ function __generator(thisArg, body) {
   }
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-    while (_)
+    while ((g && ((g = 0), op[0] && (_ = 0)), _))
       try {
         if (
           ((f = 1),
@@ -877,6 +946,18 @@ function __generator(thisArg, body) {
   }
 }
 
+typeof SuppressedError === "function"
+  ? SuppressedError
+  : function (error, suppressed, message) {
+      var e = new Error(message);
+      return (
+        (e.name = "SuppressedError"),
+        (e.error = error),
+        (e.suppressed = suppressed),
+        e
+      );
+    };
+
 var post$1 = function (url, apiKey, body, token, signal, languageCode) {
   return __awaiter(void 0, void 0, void 0, function () {
     var response;
@@ -908,7 +989,38 @@ var post$1 = function (url, apiKey, body, token, signal, languageCode) {
     });
   });
 };
-var get$1 = function (url, apiKey, token, signal) {
+var patch$1 = function (url, apiKey, body, token, signal, languageCode) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [
+            4 /*yield*/,
+            fetch(url, {
+              method: "PATCH",
+              headers: {
+                "Content-Type": "application/json",
+                "Api-Key": apiKey,
+                Language: languageCode || "nl-BE",
+                Authorization: token ? "Bearer " + token : "",
+              },
+              credentials: "include",
+              body: body,
+              signal: signal,
+            }),
+          ];
+        case 1:
+          response = _a.sent();
+          if (!response.ok) {
+            throw new Error(response.statusText);
+          }
+          return [2 /*return*/, response];
+      }
+    });
+  });
+};
+var get$1 = function (url, apiKey, token, signal, languageCode) {
   return __awaiter(void 0, void 0, void 0, function () {
     var response;
     return __generator(this, function (_a) {
@@ -921,6 +1033,8 @@ var get$1 = function (url, apiKey, token, signal) {
               headers: {
                 "Content-Type": "application/json",
                 "Api-Key": apiKey,
+                Language: languageCode || "nl-BE",
+                "Accept-Language": languageCode || "nl-BE",
                 Authorization: token ? "Bearer " + token : "",
               },
               credentials: "include",
@@ -6626,20 +6740,6 @@ var reviver = function (_, value) {
   }
   return value;
 };
-var replacer = function (_, value) {
-  if (typeof value === "string") {
-    if (Date.parse(value)) {
-      var date = new Date(value);
-      if (date.toISOString() === value) {
-        var year = date.getFullYear();
-        var month = date.getMonth() + 1;
-        var day = date.getDate();
-        return year + "-" + month + "-" + day;
-      }
-    }
-  }
-  return value;
-};
 
 var post = function (
   url,
@@ -6665,29 +6765,31 @@ var post = function (
         case 2:
           responseBody = _a.sent();
           result = skipReviver
-            ? JSON.parse(
-                responseBody !== null && responseBody !== void 0
-                  ? responseBody
-                  : ""
-              )
-            : JSON.parse(
-                responseBody !== null && responseBody !== void 0
-                  ? responseBody
-                  : "",
-                reviver
-              );
+            ? JSON.parse(responseBody)
+            : JSON.parse(responseBody, reviver);
           return [2 /*return*/, result];
       }
     });
   });
 };
-var get = function (url, apiKey, token, signal, skipReviver) {
+var patch = function (
+  url,
+  apiKey,
+  body,
+  token,
+  signal,
+  skipReviver,
+  languageCode
+) {
   return __awaiter(void 0, void 0, void 0, function () {
     var response, responseBody, result;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
-          return [4 /*yield*/, get$1(url, apiKey, token, signal)];
+          return [
+            4 /*yield*/,
+            patch$1(url, apiKey, body, token, signal, languageCode),
+          ];
         case 1:
           response = _a.sent();
           return [4 /*yield*/, response.text()];
@@ -6701,234 +6803,98 @@ var get = function (url, apiKey, token, signal, skipReviver) {
     });
   });
 };
-
-var ENDPOINT$8 = "/api/web/booking";
-var ENDPOINT_AVAILABLE_PRODUCTS = ENDPOINT$8 + "/available-products";
-var ENDPOINT_PACKAGE_SEARCH = ENDPOINT$8 + "/package-search";
-var ENDPOINT_PACKAGE_PRICE_DETAILS = ENDPOINT$8 + "/package-price-details";
-var ENDPOINT_CREATE_OFFER = ENDPOINT$8 + "/offer-entry";
-var ENDPOINT_CREATE_ENTRY = ENDPOINT$8 + "/entry-multiroom";
-var ENDPOINT_CREATE_PACKAGE_OFFER = ENDPOINT$8 + "/package-offer-entry";
-var ENDPOINT_CREATE_PACKAGE_ENTRY = ENDPOINT$8 + "/package-entry";
-var ENDPOINT_GET_BASE_PRICES = ENDPOINT$8 + "/base-prices";
-var ENDPOINT_GET_BASE_PRICES_FROM_DATE = ENDPOINT$8 + "/base-prices-from-date";
-/**
- * api/web/booking/available-products
- * @param config
- * @param request
- * @returns Availabilities (options) for the specified request.
- * @deprecated Use V2: Search
- */
-var getAvailableProducts = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_AVAILABLE_PRODUCTS;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-search
- * @param config
- * @param request
- * @returns Travel options (excursions etc) for a specified product, accommodation and regime.
- * @depracted Use V2: Search
- */
-var searchPackages = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_PACKAGE_SEARCH;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-price-details
- * @param config
- * @param request
- * @returns A price breakdown for a specified Package (= product and selected options).
- * @deprecated Use V2: Price details
- */
-var getPackagePriceDetails = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_PACKAGE_PRICE_DETAILS;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/offer-entry
- * Creates an Tide Offer, based on the request.
- * @param config
- * @param request
- * @returns The (full) created offer Entry.
- * @deprecated Use V2: Book
- */
-var createOffer = function (config, request, signal) {
-  // Update request to use full response
-  request.useShortResponse = false;
-  var url = "" + config.host + ENDPOINT_CREATE_OFFER;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/offer-entry
- * Creates a Tide Offer, based on the request.
- * @param config
- * @param request
- * @returns The (short) created offer Entry.
- * @deprecated Use V2: Book
- */
-var createOfferWithShortResponse = function (config, request, signal) {
-  // Update request to use short response
-  request.useShortResponse = true;
-  var url = "" + config.host + ENDPOINT_CREATE_OFFER;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/entry-multiroom
- * Creates a Tide Booking, based on the request.
- * @param config
- * @param request
- * @returns The (full) created booking Entry.
- * @deprecated Use V2: Book
- */
-var createEntry = function (config, request, signal) {
-  // Update request to use full response
-  request.useShortResponse = false;
-  var url = "" + config.host + ENDPOINT_CREATE_ENTRY;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/entry-multiroom
- * Creates a Tide Booking, based on the request.
- * @param config
- * @param request
- * @returns The (short) created booking Entry.
- * @deprecated Use V2: Book
- */
-var createEntryWithShortResponse = function (config, request, signal) {
-  // Update request to use short response
-  request.useShortResponse = true;
-  var url = "" + config.host + ENDPOINT_CREATE_ENTRY;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-offer-entry
- * Creates a Tide Offer, based on the request.
- * @param config
- * @param request
- * @returns The (full) created offer Entry.
- * @depracted Use V2: Book
- */
-var createPackageOffer = function (config, request, signal) {
-  // Update request to use full response
-  request.useShortResponse = false;
-  var url = "" + config.host + ENDPOINT_CREATE_PACKAGE_OFFER;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-offer-entry
- * Creates a Tide Offer, based on the request.
- * @param config
- * @param request
- * @returns The (short) created offer Entry.
- * @deprecated Use V2: Book
- */
-var createPackageOfferWithShortResponse = function (config, request, signal) {
-  // Update request to use short response
-  request.useShortResponse = true;
-  var url = "" + config.host + ENDPOINT_CREATE_PACKAGE_OFFER;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-entry
- * Create a Tide Booking, based on the request.
- * @param config
- * @param request
- * @returns The (full) created booking Entry.
- * @deprecated Use V2: book
- */
-var createPackageEntry = function (config, request, signal) {
-  // Update request to use full response
-  request.useShortResponse = false;
-  var url = "" + config.host + ENDPOINT_CREATE_PACKAGE_ENTRY;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/package-entry
- * Create a Tide Booking, based on the request.
- * @param config
- * @param request
- * @returns The (short) created booking Entry.
- * @deprecated Use V2: Book
- */
-var createPackageEntryWithShortResponse = function (config, request, signal) {
-  // Update request to use short response
-  request.useShortResponse = true;
-  var url = "" + config.host + ENDPOINT_CREATE_PACKAGE_ENTRY;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/base-prices
- * Get base prices of a specific product and accommodation in a defined period.
- * @param config
- * @param request
- * @returns The base prices of a specific product and accommodation during the defined period.
- * @deprecated Use V2: Prices
- */
-var getBasePrices = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_GET_BASE_PRICES;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
-};
-/**
- * api/web/booking/base-prices-from-date
- * Get base prices of a specific product and accommodation starting from a specific date.
- * @param config
- * @param request
- * @returns The base prices of a specific product and accommodationg starting from a specific date.
- */
-var getBasePricesFromDate = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_GET_BASE_PRICES_FROM_DATE;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request, replacer);
-  return post(url, apiKey, body, config.token, signal);
+var get = function (url, apiKey, token, signal, skipReviver, languageCode) {
+  return __awaiter(void 0, void 0, void 0, function () {
+    var response, responseBody, result;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4 /*yield*/, get$1(url, apiKey, token, signal, languageCode)];
+        case 1:
+          response = _a.sent();
+          return [4 /*yield*/, response.text()];
+        case 2:
+          responseBody = _a.sent();
+          result = skipReviver
+            ? JSON.parse(responseBody)
+            : JSON.parse(responseBody, reviver);
+          return [2 /*return*/, result];
+      }
+    });
+  });
 };
 
 var ENDPOINT$7 = "/api/web/booking/v2";
-var ENDPOINT_PACKAGE_SEARCH_LIST = ENDPOINT$7 + "/package-search-list";
+var ENDPOINT_AVAILABLE_FLIGHTS = ENDPOINT$7 + "/available-flights";
+var ENDPOINT_TRANSPORT_DATES = ENDPOINT$7 + "/transport-dates";
+var ENDPOINT_PRICES = ENDPOINT$7 + "/prices";
+var ENDPOINT_AVAILABLE_COUNTRIES = ENDPOINT$7 + "/available-countries";
 var ENDPOINT_SEARCH = ENDPOINT$7 + "/search";
 var ENDPOINT_SEARCH_WITH_ERROR_MAPPING =
   ENDPOINT$7 + "/search-with-error-mapping";
+// const ENDPOINT_ELASTIC = `${ENDPOINT}/elastic`; // TODO
 var ENDPOINT_DETAILS = ENDPOINT$7 + "/details";
 var ENDPOINT_VALIDATE_VOUCHER = ENDPOINT$7 + "/validate-voucher";
-var ENDPOINT_ALTERNATE_HOTELS = "/alternate-hotels";
-var ENDPOINT_ALTERNATE_FLIGHTS = "/alternate-flights";
+var ENDPOINT_ALTERNATE_HOTELS = function (transactionId, optionId) {
+  return (
+    ENDPOINT$7 + "/details/" + transactionId + "/alternate-hotels/" + optionId
+  );
+};
+var ENDPOINT_ALTERNATE_FLIGHTS = function (transactionId) {
+  return ENDPOINT$7 + "/details/" + transactionId + "/alternate-flights";
+};
+var ENDPOINT_BOOKABLE_DATES = ENDPOINT$7 + "/bookable-dates";
 var ENDPOINT_PRICE_DETAILS = ENDPOINT$7 + "/price-details";
 var ENDPOINT_BOOK = ENDPOINT$7 + "/book";
 var ENDPOINT_UPDATE = ENDPOINT$7 + "/update";
 var ENDPOINT_AGENTS = ENDPOINT$7 + "/agents";
-var ENDPOINT_AVAILABLE_ALLOTMENTS = ENDPOINT$7 + "/get-allotment-availability";
+var ENDPOINT_AVAILABLE_ALLOTMENTS = function (eventId, productCode) {
+  return (
+    ENDPOINT$7 + "/get-allotment-availability/" + eventId + "/" + productCode
+  );
+};
 var ENDPOINT_FLIGHT_POOL = ENDPOINT$7 + "/flight-pool";
-var ENDPOINT_BOOKABLE_DATES = ENDPOINT$7 + "/bookable-dates";
 var ENDPOINT_TOUR_CODES = ENDPOINT$7 + "/tourcodes";
-var readPackageSearchList = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_PACKAGE_SEARCH_LIST;
+var ENDPOINT_CUSTOM_ENTRY_STATUS$1 = function (
+  dossierNumber,
+  customEntryStatusId
+) {
+  return (
+    ENDPOINT$7 +
+    "/custom-entry-status/" +
+    dossierNumber +
+    "/" +
+    customEntryStatusId
+  );
+};
+var ENDPOINT_ENTRY_STATUS = function (dossierNumber, entryStatus) {
+  return (
+    ENDPOINT$7 + "/custom-entry-status/" + dossierNumber + "/" + entryStatus
+  );
+};
+var availableFlights = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_AVAILABLE_FLIGHTS;
   var apiKey = config.apiKey;
   var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal);
+  return post(url, apiKey, body, config.token, signal, true);
+};
+var transportDates = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_TRANSPORT_DATES;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
+var prices = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_PRICES;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
+var availableCountries = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_AVAILABLE_COUNTRIES;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
 };
 // PACKAGE SEARCH
 var search = function (config, request, signal) {
@@ -6955,28 +6921,23 @@ var validateVoucher = function (config, request, signal) {
   var body = JSON.stringify(request);
   return post(url, apiKey, body, config.token, signal, true);
 };
-var alternateHotels = function (config, transactionId, signal) {
+var alternateHotels = function (config, transactionId, optionId, signal) {
   var url =
-    "" +
-    config.host +
-    ENDPOINT_DETAILS +
-    "/" +
-    transactionId +
-    ENDPOINT_ALTERNATE_HOTELS;
+    "" + config.host + ENDPOINT_ALTERNATE_HOTELS(transactionId, optionId);
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
 var alternateFlights = function (config, transactionId, signal) {
-  var url =
-    "" +
-    config.host +
-    ENDPOINT_DETAILS +
-    "/" +
-    transactionId +
-    ENDPOINT_ALTERNATE_FLIGHTS;
+  var url = "" + config.host + ENDPOINT_ALTERNATE_FLIGHTS(transactionId);
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
+var bookableDates = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_BOOKABLE_DATES;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal, true);
+};
 var priceDetails = function (config, request, signal, languageCode) {
   var url = "" + config.host + ENDPOINT_PRICE_DETAILS;
   var apiKey = config.apiKey;
@@ -7002,13 +6963,7 @@ var agents = function (config, signal) {
 };
 var getAllotmentAvailability = function (config, eventId, productCode, signal) {
   var url =
-    "" +
-    config.host +
-    ENDPOINT_AVAILABLE_ALLOTMENTS +
-    "/" +
-    eventId +
-    "/" +
-    productCode;
+    "" + config.host + ENDPOINT_AVAILABLE_ALLOTMENTS(eventId, productCode);
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
@@ -7018,18 +6973,31 @@ var searchFlightPool = function (config, request, signal) {
   var body = JSON.stringify(request);
   return post(url, apiKey, body, config.token, signal, true);
 };
-var bookableDates = function (config, request, signal) {
-  var url = "" + config.host + ENDPOINT_BOOKABLE_DATES;
-  var apiKey = config.apiKey;
-  var body = JSON.stringify(request);
-  return post(url, apiKey, body, config.token, signal, true);
-};
 var tourCodes = function (config, request, signal) {
   var url = "" + config.host + ENDPOINT_TOUR_CODES;
   var apiKey = config.apiKey;
   var body = JSON.stringify(request);
   return post(url, apiKey, body, config.token, signal, true);
 };
+var setCustomEntryStatus = function (
+  config,
+  dossierNumber,
+  customEntryStatusId,
+  signal
+) {
+  var url =
+    "" +
+    config.host +
+    ENDPOINT_CUSTOM_ENTRY_STATUS$1(dossierNumber, customEntryStatusId);
+  var apiKey = config.apiKey;
+  return get(url, apiKey, config.token, signal, true);
+};
+var setEntryStatus = function (config, dossierNumber, entryStatus, signal) {
+  var url =
+    "" + config.host + ENDPOINT_ENTRY_STATUS(dossierNumber, entryStatus);
+  var apiKey = config.apiKey;
+  return patch(url, apiKey, null, config.token, signal, true);
+};
 
 var ENDPOINT$6 = "/api/member";
 var ENDPOINT_LOGIN = ENDPOINT$6 + "/login";
@@ -7259,6 +7227,8 @@ var ENDPOINT_GET_PRINT_ACTIONS = ENDPOINT$3 + "/print-action";
 var ENDPOINT_PRINT = ENDPOINT$3 + "/print-action";
 var ENDPOINT_CUSTOM_ENTRY_STATUS = ENDPOINT$3 + "/custom-entry-status";
 var ENDPOINT_ENUM_ENTRY_STATUS = ENDPOINT$3 + "/enum/entry-status";
+var ENDPOINT_CHANGE_ENTRY_AGENT_SURCHARGE =
+  ENDPOINT$3 + "/entry/change-agent-surcharge";
 /**
  * api/web/agent/print-action/{print-action-group}
  * @param config
@@ -7318,20 +7288,28 @@ var getInvoiceList = function (config, filterItem, gridColumns, signal) {
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
-var getCustomEntryStatus = function (config, signal) {
+var getCustomEntryStatus = function (config, signal, languageCode) {
   var url = "" + config.host + ENDPOINT_CUSTOM_ENTRY_STATUS;
   var apiKey = config.apiKey;
-  return get(url, apiKey, config.token, signal, true);
+  return get(url, apiKey, config.token, signal, true, languageCode);
 };
-var getEntryStatus = function (config, signal) {
+var getEntryStatus = function (config, signal, languageCode) {
   var url = "" + config.host + ENDPOINT_ENUM_ENTRY_STATUS;
   var apiKey = config.apiKey;
-  return get(url, apiKey, config.token, signal, true);
+  return get(url, apiKey, config.token, signal, true, languageCode);
+};
+var changeEntryAgentSurcharge = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_CHANGE_ENTRY_AGENT_SURCHARGE;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post$1(url, apiKey, body, config.token, signal);
 };
 
 var ENDPOINT$2 = "/api/web";
 var ENDPOINT_CREATE_CRM_CONTACT = ENDPOINT$2 + "/crmcontact";
 var ENDPOINT_CREATE_AFFILIATES = ENDPOINT$2 + "/affiliates";
+var ENDPOINT_TRANSLATION_DICTIONARY = ENDPOINT$2 + "/translation-dictionary";
+var ENDPOINT_BOOKING_ACCOMMODATION = ENDPOINT$2 + "/booking-accommodation";
 /**
  * api/web/crmcontact
  * Creates a CRM contact.
@@ -7344,7 +7322,7 @@ var createCrmContact = function (config, request, signal) {
   var url = "" + config.host + ENDPOINT_CREATE_CRM_CONTACT;
   var apiKey = config.apiKey;
   var body = JSON.stringify(request);
-  return post$1(url, apiKey, body, config.token, signal);
+  return post(url, apiKey, body, config.token, signal);
 };
 /**
  * api/web/affiliates
@@ -7358,6 +7336,18 @@ var getAffiliates = function (config, signal) {
   var apiKey = config.apiKey;
   return get(url, apiKey, config.token, signal, true);
 };
+var getTranslationDictionary = function (config, segmentKey, signal) {
+  var url =
+    "" + config.host + ENDPOINT_TRANSLATION_DICTIONARY + "/" + segmentKey;
+  var apiKey = config.apiKey;
+  return get(url, apiKey, undefined, signal);
+};
+var generateBookingAccommodations = function (config, request, signal) {
+  var url = "" + config.host + ENDPOINT_BOOKING_ACCOMMODATION;
+  var apiKey = config.apiKey;
+  var body = JSON.stringify(request);
+  return post(url, apiKey, body, config.token, signal);
+};
 
 var ENDPOINT$1 = "/api/web/contact";
 var ENDPOINT_CONTACT_FORM = ENDPOINT$1 + "/contact-form";
@@ -7408,31 +7398,22 @@ build.ServiceType = ServiceType;
 var agents_1 = build.agents = agents;
 build.alternateFlights = alternateFlights;
 build.alternateHotels = alternateHotels;
+build.availableCountries = availableCountries;
+build.availableFlights = availableFlights;
 var book_1 = build.book = book;
 build.bookableDates = bookableDates;
+build.changeEntryAgentSurcharge = changeEntryAgentSurcharge;
 build.confirm = confirm;
 build.contactForm = contactForm;
 build.contactHasTag = contactHasTag;
 build.createCrmContact = createCrmContact;
-build.createEntry = createEntry;
-build.createEntryWithShortResponse = createEntryWithShortResponse;
-build.createOffer = createOffer;
-build.createOfferWithShortResponse = createOfferWithShortResponse;
-build.createPackageEntry = createPackageEntry;
-build.createPackageEntryWithShortResponse =
-  createPackageEntryWithShortResponse;
-build.createPackageOffer = createPackageOffer;
-build.createPackageOfferWithShortResponse =
-  createPackageOfferWithShortResponse;
 build.createParams = createParams;
 var details_1 = build.details = details;
 build.feedXml = feedXml;
 build.forgotPassword = forgotPassword;
+var generateBookingAccommodations_1 = build.generateBookingAccommodations = generateBookingAccommodations;
 build.getAffiliates = getAffiliates;
 build.getAllotmentAvailability = getAllotmentAvailability;
-build.getAvailableProducts = getAvailableProducts;
-build.getBasePrices = getBasePrices;
-build.getBasePricesFromDate = getBasePricesFromDate;
 build.getCountries = getCountries;
 build.getCustomEntryStatus = getCustomEntryStatus;
 build.getEntryList = getEntryList;
@@ -7440,19 +7421,21 @@ build.getEntryStatus = getEntryStatus;
 build.getEntryTotals = getEntryTotals;
 build.getInvoiceList = getInvoiceList;
 build.getMolliePayment = getMolliePayment;
-build.getPackagePriceDetails = getPackagePriceDetails;
 build.getPrintActions = getPrintActions;
+build.getTranslationDictionary = getTranslationDictionary;
 build.login = login;
 build.logout = logout;
 var priceDetails_1 = build.priceDetails = priceDetails;
+build.prices = prices;
 build.print = print;
-build.readPackageSearchList = readPackageSearchList;
 build.resetPassword = resetPassword;
 build.search = search;
 build.searchFlightPool = searchFlightPool;
-build.searchPackages = searchPackages;
 build.searchWithErrorMapping = searchWithErrorMapping;
+build.setCustomEntryStatus = setCustomEntryStatus;
+build.setEntryStatus = setEntryStatus;
 build.tourCodes = tourCodes;
+build.transportDates = transportDates;
 build.update = update;
 var validateVoucher_1 = build.validateVoucher = validateVoucher;
 
@@ -8279,14 +8262,26 @@ var fetchAgents$1 = function (signal, apiSettings) { return __awaiter$1(void 0,
         }
     });
 }); };
-var packageApi = {
-    fetchDetails: fetchDetails,
-    fetchAgents: fetchAgents$1,
-};
-
-var ROOM_OPTIONS_FORM_STEP = 1;
-var FLIGHT_OPTIONS_FORM_STEP = 2;
-var OPTIONS_FORM_STEP = 3;
+var fetchAccommodationViews$1 = function (request, signal, apiSettings) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var tideClientConfig;
+    return __generator$1(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                tideClientConfig = buildTideClientConfig(apiSettings);
+                return [4 /*yield*/, generateBookingAccommodations_1(tideClientConfig, request, signal)];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+var packageApi = {
+    fetchDetails: fetchDetails,
+    fetchAgents: fetchAgents$1,
+    fetchAccommodationViews: fetchAccommodationViews$1
+};
+
+var ROOM_OPTIONS_FORM_STEP = 1;
+var FLIGHT_OPTIONS_FORM_STEP = 2;
+var OPTIONS_FORM_STEP = 3;
 var TRAVELERS_FORM_STEP = 4;
 var SUMMARY_STEP = 5;
 var CONFIRMATION_STEP = 6;
@@ -8477,6 +8472,7 @@ var selectIsFetchingProductOptions = function (state) {
 var selectDepartureFlight = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.outwardFlights) === null || _b === void 0 ? void 0 : _b.find(function (x) { return x.isSelected; }); };
 var selectReturnFlight = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.returnFlights) === null || _b === void 0 ? void 0 : _b.find(function (x) { return x.isSelected; }); };
 var selectPackageRooms = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.rooms; };
+var selectAvailabilities = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.availabilities; };
 var selectPackageTags = function (state) { var _a; return (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.tags; };
 var selectIsOnRequest = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.isOnRequest; };
 var selectPackageOptionUnits = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.optionUnits; };
@@ -8541,6 +8537,20 @@ var selectCalculateDeposit = function (state) {
 var selectIsRetry = function (state) { return state.booking.isRetry; };
 var selectStartDate = function (state) { var _a, _b; return (_b = (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.fromDate; };
 var selectAgents = function (state) { return state.booking.agents; };
+var selectProductCode = function (state) { var _a; return (_a = state.booking.productAttributes) === null || _a === void 0 ? void 0 : _a.productCode; };
+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);
+            }
+        }); });
+    });
+    return accommodationCodes;
+};
+var selectAccommodationViews = function (state) { return state.booking.accommodationViews; };
 var selectBookingQuery = function (state) {
     var bookingAttributes = state.booking.bookingAttributes;
     if (!bookingAttributes) {
@@ -8557,11 +8567,16 @@ var selectBookingQuery = function (state) {
                 AQF: true,
             });
         }
-        if (key === "flight") {
+        if (key === "allotmentIds" && !value.length) {
+            value = undefined;
+        }
+        if (key === "flight" && value) {
             var flightInfo = value;
             value = JsonURL.stringify(flightInfo, { AQF: true });
         }
-        params[key] = value;
+        if (value) {
+            params[key] = value;
+        }
     });
     return params;
 };
@@ -8753,6 +8768,9 @@ var fetchPackage = createAsyncThunk("booking/fetchPackage", function (_, _a) {
                     _b.sent();
                     return [4 /*yield*/, dispatch(fetchPackageDetails())];
                 case 2:
+                    _b.sent();
+                    return [4 /*yield*/, dispatch(fetchAccommodationViews())];
+                case 3:
                     _b.sent();
                     dispatch(setFetchingPackage(false));
                     return [2 /*return*/];
@@ -8837,6 +8855,34 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
         });
     });
 });
+var fetchAccommodationViews = createAsyncThunk("booking/accommodationViews", function (_, _a) {
+    _a.dispatch; var getState = _a.getState, signal = _a.signal;
+    return __awaiter$1(void 0, void 0, void 0, function () {
+        var state, languageCode, accommodationCodes, productCode, request;
+        return __generator$1(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    state = getState();
+                    if (!state.booking.accommodationViewId)
+                        return [2 /*return*/, Promise.resolve()];
+                    languageCode = selectLanguageCode(state);
+                    accommodationCodes = selectAccommodationCodes(state);
+                    productCode = selectProductCode(state);
+                    if (!productCode) {
+                        throw Error('No product selected');
+                    }
+                    request = {
+                        languageCode: languageCode,
+                        productCode: productCode,
+                        accommodationCodes: accommodationCodes,
+                        contentViewId: state.booking.accommodationViewId
+                    };
+                    return [4 /*yield*/, packageApi.fetchAccommodationViews(request, signal, state.apiSettings)];
+                case 1: return [2 /*return*/, _b.sent()];
+            }
+        });
+    });
+});
 var getActiveOption = function (state) {
     if (state.package)
         return state.package.options.find(function (x) { return x.isSelected; });
@@ -9018,17 +9064,15 @@ var bookingSlice = createSlice({
             document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
             state.currentStep = action.payload;
         },
-        setOutwardFlight: function (state, action) {
+        setFlights: function (state, action) {
             if (!state.package)
                 return;
-            changeOutwardFlight(state.package, action.payload);
+            changeOutwardFlight(state.package, action.payload.selectedOutward);
+            changeReturnFlight(state.package, action.payload.selectedReturn);
             changePackageOption(state.package);
         },
-        setReturnFlight: function (state, action) {
-            if (!state.package)
-                return;
-            changeReturnFlight(state.package, action.payload);
-            changePackageOption(state.package);
+        setAccommodationViewId: function (state, action) {
+            state.accommodationViewId = action.payload;
         }
     },
     extraReducers: function (builder) {
@@ -9136,9 +9180,14 @@ var bookingSlice = createSlice({
                 state.agents = action.payload;
             }
         });
+        builder.addCase(fetchAccommodationViews.fulfilled, function (state, action) {
+            if (action.payload) {
+                state.accommodationViews = action.payload;
+            }
+        });
     },
 });
-var setOfficeId = (_a = bookingSlice.actions, _a.setOfficeId), setLanguageCode = _a.setLanguageCode, setTranslations = _a.setTranslations, setBookingOptions = _a.setBookingOptions, setBookingType = _a.setBookingType, setProductAttributes = _a.setProductAttributes, setBookingAttributes = _a.setBookingAttributes, setCalculateDeposit = _a.setCalculateDeposit, setBookingNumber = _a.setBookingNumber, setIsRetry = _a.setIsRetry, setFetchingPackage = _a.setFetchingPackage, setPackage = _a.setPackage, setPackageRooms = _a.setPackageRooms, setPackageOptionPax = _a.setPackageOptionPax, setPackageOptionUnits = _a.setPackageOptionUnits, setPackageGroups = _a.setPackageGroups, setSkipPayment = _a.setSkipPayment, setGeneratePaymentUrl = _a.setGeneratePaymentUrl, setTagIds = _a.setTagIds, setAgentAdressId = _a.setAgentAdressId, setBookingRemarks = _a.setBookingRemarks, setVoucherCodes = _a.setVoucherCodes, setCurrentStep = _a.setCurrentStep, setPackageAirlineGroups = _a.setPackageAirlineGroups, setPackageAirportGroups = _a.setPackageAirportGroups, setOutwardFlight = _a.setOutwardFlight, setReturnFlight = _a.setReturnFlight;
+var setOfficeId = (_a = bookingSlice.actions, _a.setOfficeId), setLanguageCode = _a.setLanguageCode, setTranslations = _a.setTranslations, setBookingOptions = _a.setBookingOptions, setBookingType = _a.setBookingType, setProductAttributes = _a.setProductAttributes, setBookingAttributes = _a.setBookingAttributes, setCalculateDeposit = _a.setCalculateDeposit, setBookingNumber = _a.setBookingNumber, setIsRetry = _a.setIsRetry, setFetchingPackage = _a.setFetchingPackage, setPackage = _a.setPackage, setPackageRooms = _a.setPackageRooms, setPackageOptionPax = _a.setPackageOptionPax, setPackageOptionUnits = _a.setPackageOptionUnits, setPackageGroups = _a.setPackageGroups, setSkipPayment = _a.setSkipPayment, setGeneratePaymentUrl = _a.setGeneratePaymentUrl, setTagIds = _a.setTagIds, setAgentAdressId = _a.setAgentAdressId, setBookingRemarks = _a.setBookingRemarks, setVoucherCodes = _a.setVoucherCodes, setCurrentStep = _a.setCurrentStep, setPackageAirlineGroups = _a.setPackageAirlineGroups, setPackageAirportGroups = _a.setPackageAirportGroups, setFlights = _a.setFlights, setAccommodationViewId = _a.setAccommodationViewId;
 var bookingReducer = bookingSlice.reducer;
 
 var initialState = {
@@ -9175,12 +9224,12 @@ var StepIndicators = function (_a) {
     var _b = useContext(SettingsContext), flightOptions = _b.flightOptions, roomOptions = _b.roomOptions;
     var translations = useSelector(selectTranslations);
     var allSteps = [];
-    if (!roomOptions.isHidden) {
-        allSteps.push(translations.STEPS.ROOM_OPTIONS);
-    }
     if (!flightOptions.isHidden) {
         allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
     }
+    if (!roomOptions.isHidden) {
+        allSteps.push(translations.STEPS.ROOM_OPTIONS);
+    }
     allSteps.push(translations.STEPS.EXTRA_OPTIONS);
     allSteps.push(translations.STEPS.PERSONAL_DETAILS);
     allSteps.push(translations.STEPS.SUMMARY);
@@ -9289,196 +9338,569 @@ var Error$1 = function () {
                             translations.ERROR.ERROR_TEXT3)))))));
 };
 
-var FlightOption = function (_a) {
-    var item = _a.item, isSelected = _a.isSelected, group = _a.group, selectedOutward = _a.selectedOutward, selectedReturn = _a.selectedReturn, currentPrice = _a.currentPrice, relatedFlight = _a.relatedFlight, isSameOption = _a.isSameOption, onChange = _a.onChange;
-    var translations = useSelector(selectTranslations);
-    var airline = item.flightMetaData.flightLines[0].airline;
-    var isDisabled = selectedOutward
-        ? selectedOutward.externalGuid !== item.externalGuid
-        : false;
-    var selectedPair = selectedOutward !== null && selectedOutward !== void 0 ? selectedOutward : selectedReturn;
-    var ownTotalPrice = relatedFlight
-        ? relatedFlight.price + item.price
-        : selectedPair.price + item.price;
-    var priceDifference = item.isSelected
-        ? 0
-        : ownTotalPrice - currentPrice;
-    var flightLabel = item.flightMetaData.flightLines.length === 1
-        ? translations.FLIGHTS_FORM.DIRECT_FLIGHT
-        : "".concat(item.flightMetaData.flightLines.length - 1, " ").concat(translations.FLIGHTS_FORM.FLIGHT_STOPS);
-    return (React.createElement("div", { className: "flight__option" },
-        React.createElement("div", { className: "radiobutton" },
-            React.createElement("div", { className: "radiobutton__label" },
-                React.createElement("input", { type: "radio", value: item.entryLineGuid, id: "".concat(group, "_").concat(item.entryLineGuid), name: group, className: "radiobutton__input", disabled: isDisabled, onChange: function () { return onChange(item); }, checked: isSelected }),
-                React.createElement("span", null,
-                    airline,
-                    " ",
-                    flightLabel,
-                    " - ",
-                    item.class),
-                priceDifference !== 0 && (React.createElement("span", { className: buildClassName([
-                        "price",
-                        priceDifference > 0 && "price--increase",
-                        priceDifference < 0 && "price--decrease",
-                    ]) }, getPriceDifferenceText(priceDifference))),
-                !isSameOption && (React.createElement(Icon$1, { name: "ui-warning", title: translations.FLIGHTS_FORM.DIFFERENT_OPTION_WARNING })))),
-        item.flightMetaData && (React.createElement("div", null, item.flightMetaData.flightLines.map(function (fl, i) { return (React.createElement("div", { key: i },
-            React.createElement("span", null,
-                fl.departureAirportDescription,
-                " ",
-                format$1(new Date(fl.departureDate), "dd/MM/yyyy"),
-                " ",
-                fl.departureTime),
-            React.createElement("span", null,
-                ">> ",
-                fl.airlineCode,
-                fl.number,
-                " >>"),
-            React.createElement("span", null,
-                fl.arrivalAirportDescription,
-                " ",
-                format$1(new Date(fl.arrivalDate), "dd/MM/yyyy"),
-                " ",
-                fl.arrivalTime))); })))));
-};
-
-var FlightOptionsForm = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var settings = useContext(SettingsContext);
-    var translations = useSelector(selectTranslations);
-    var dispatch = useAppDispatch();
-    var packageDetails = useSelector(selectPackageDetails);
-    var bookingQueryString = useSelector(selectBookingQueryString);
-    var isLoading = useSelector(selectIsFetchingProductOptions);
-    var flights = useSelector(selectPackageFlights);
-    var handleSubmit = function (e) {
-        if (settings.skipRouter) {
-            dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+var MultiRangeFilter = function (_a) {
+    var min = _a.min, max = _a.max, selectedMin = _a.selectedMin, selectedMax = _a.selectedMax, valueFormatter = _a.valueFormatter, onChange = _a.onChange;
+    var _b = useState(false), isDragging = _b[0], setIsDragging = _b[1];
+    var _c = useState(0), leftPercentage = _c[0], setLeftPercentage = _c[1];
+    var _d = useState(0), rightPercentage = _d[0], setRightPercentage = _d[1];
+    var _e = useState(min), minVal = _e[0], setMinVal = _e[1];
+    var _f = useState(max), maxVal = _f[0], setMaxVal = _f[1];
+    var minGap = 5;
+    useEffect(function () {
+        setSliderTrack();
+    }, [minVal, maxVal]);
+    var slideMin = function (e) {
+        var value = parseInt(e.target.value, 10);
+        if (value >= min && selectedMax - value >= minGap) {
+            setMinVal(value);
         }
-        else {
-            navigate("".concat(settings.basePath).concat(settings.options.pathSuffix, "?").concat(bookingQueryString));
+    };
+    var slideMax = function (e) {
+        var value = parseInt(e.target.value, 10);
+        if (value <= max && value - selectedMin >= minGap) {
+            setMaxVal(value);
         }
-        e.preventDefault();
     };
-    var goPrevious = function () {
-        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+    var setSliderTrack = function () {
+        var range = document.querySelector(".slider-track");
+        if (range) {
+            var minPercent = ((minVal - min) / (max - min)) * 100;
+            var maxPercent = ((maxVal - min) / (max - min)) * 100;
+            setLeftPercentage(minPercent);
+            setRightPercentage(100 - maxPercent);
+        }
     };
-    var selectedOptionGuid = (_a = packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.options.find(function (x) { return x.isSelected; })) === null || _a === void 0 ? void 0 : _a.id;
-    var selectedOutwardFlight = (_b = flights.outward) === null || _b === void 0 ? void 0 : _b.find(function (x) { return x.isSelected; });
-    var selectedReturnFlight = (_c = flights.return) === null || _c === void 0 ? void 0 : _c.find(function (x) { return x.isSelected; });
-    var currentFlightPrice = (((_e = (_d = flights.outward) === null || _d === void 0 ? void 0 : _d.find(function (x) { return x.isSelected; })) === null || _e === void 0 ? void 0 : _e.price) || 0)
-        + (((_g = (_f = flights.return) === null || _f === void 0 ? void 0 : _f.find(function (x) { return x.isSelected; })) === null || _g === void 0 ? void 0 : _g.price) || 0);
-    useEffect(function () {
-        var _a, _b;
-        if (packageDetails && settings.roomOptions.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;
-            if (outwardFlight_1 && returnFlight_1) {
-                var desiredOutwardFlight_1 = packageDetails.outwardFlights.find(function (x) { return x.entryLineGuid == outwardFlight_1; });
-                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
-                                    ? true
-                                    : false });
-                        }), returnFlights: packageDetails.returnFlights.map(function (flight) {
-                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid == desiredReturnFlight_1.entryLineGuid
-                                    ? true
-                                    : false });
-                        }) })));
-                }
+    var startDrag = function () {
+        setIsDragging(true);
+    };
+    var stopDrag = function () {
+        setIsDragging(false);
+        onChange(minVal, maxVal);
+    };
+    return (React.createElement("div", { className: "double-slider-box" },
+        React.createElement("div", { className: "input-box" },
+            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("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)))));
+};
+
+/*interface FlightGroup {
+  code: string;
+  startDate: Date,
+  endDate: Date;
+  options: BookingPackageFlight[];
+}*/
+var buildGroupedFlights = function (outwardFlights, returnFlights) {
+    if (!outwardFlights || !returnFlights)
+        return [];
+    // let outwardGroups = groupFlights(outwardFlights);
+    // let returnGroups = groupFlights(returnFlights);
+    var pairs = [];
+    outwardFlights.forEach(function (outwardFlight) {
+        if (outwardFlight.externalGuid) {
+            var returnFlight = returnFlights.find(function (x) { return x.externalGuid === outwardFlight.externalGuid; });
+            pairs.push({ outward: outwardFlight, return: returnFlight });
+        }
+        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) {
+                pairs.push({ outward: outwardFlight, return: returnFlight });
+            });
+        }
+    });
+    var results = pairs.map(function (x) {
+        var outwardFlightDetails = getFlightDetails(x.outward);
+        var returnFlightDetails = getFlightDetails(x.return);
+        return {
+            isSelected: x.outward.isSelected && x.return.isSelected,
+            price: x.outward.price + x.return.price,
+            outward: outwardFlightDetails,
+            return: returnFlightDetails,
+            selectedOutward: x.outward,
+            selectedReturn: x.return
+        };
+    });
+    return results;
+};
+var buildFilterOptions = function (outwardFlights, returnFlights, translations) {
+    if (!outwardFlights || !returnFlights)
+        return undefined;
+    var airports = [];
+    var airlines = [];
+    var numberOfStops = [];
+    var outwardDeparturePeriods = [];
+    var returnDeparturePeriods = [];
+    var lowestDepartureTravelDuration = 9999;
+    var highestDepartureTravelDuration = 0;
+    var lowestDepartureChangeDuration = 9999;
+    var highestDepartureChangeDuration = 0;
+    outwardFlights.forEach(function (flight) {
+        var _a;
+        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; })) {
+                airports.push({
+                    value: firstLine_1 === null || firstLine_1 === void 0 ? void 0 : firstLine_1.departureAirport,
+                    label: firstLine_1.departureAirportDescription,
+                    count: 0,
+                    isSelected: false
+                });
             }
         }
-        dispatch(fetchPriceDetails());
-    }, []);
-    return (React.createElement(React.Fragment, 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__region" },
-                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.FLIGHTS_FORM.OUTWARD_FLIGHTS)),
-                        React.createElement("div", { className: "booking-card__body" },
-                            React.createElement("div", { className: "booking-card__group" },
-                                React.createElement("div", { className: "outward__flights" }, (_h = flights.outward) === null || _h === void 0 ? void 0 : _h.map(function (flight, index) {
-                                    var _a;
-                                    return (React.createElement(FlightOption, { key: index, item: flight, isSelected: flight.isSelected, group: "outward", selectedReturn: selectedReturnFlight, currentPrice: currentFlightPrice, isSameOption: flight.validOptions.some(function (y) { return y === selectedOptionGuid; }), relatedFlight: flight.externalGuid ? (_a = flights.return) === null || _a === void 0 ? void 0 : _a.find(function (x) { return x.externalGuid === flight.externalGuid; }) : null, onChange: function (item) {
-                                            dispatch(setOutwardFlight(item));
-                                            dispatch(fetchPriceDetails());
-                                        } }));
-                                }))))),
-                    React.createElement("div", { className: "booking-card" },
-                        React.createElement("div", { className: "booking-card__header" },
-                            React.createElement("h2", { className: "booking-card__header-heading" }, translations.FLIGHTS_FORM.RETURN_FLIGHTS)),
-                        React.createElement("div", { className: "booking-card__body" },
-                            React.createElement("div", { className: "booking-card__group" },
-                                React.createElement("div", { className: "return__flights" }, (_j = flights.return) === null || _j === void 0 ? void 0 : _j.map(function (flight, index) {
-                                    var _a;
-                                    return (React.createElement(FlightOption, { key: index, item: flight, isSelected: flight.isSelected, group: "return", selectedOutward: selectedOutwardFlight, currentPrice: currentFlightPrice, isSameOption: flight.validOptions.some(function (y) { return y === selectedOptionGuid; }), relatedFlight: flight.externalGuid ? (_a = flights.outward) === null || _a === void 0 ? void 0 : _a.find(function (x) { return x.externalGuid === flight.externalGuid; }) : null, onChange: function (item) {
-                                            dispatch(setReturnFlight(item));
-                                            dispatch(fetchPriceDetails());
-                                        } }));
-                                })))))))),
-            React.createElement("div", { className: "booking__navigator" },
-                !settings.roomOptions.isHidden && (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: "".concat(settings.basePath).concat(settings.roomOptions.pathSuffix, "?").concat(bookingQueryString), 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)))));
-};
-
-var NoOptions = function () {
-    var translations = useSelector(selectTranslations);
-    return (React.createElement("div", { className: "form__group" },
-        React.createElement(Message, { type: "success", title: translations.OPTIONS_FORM.NO_OPTIONS_TITLE },
-            React.createElement("p", null, translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE))));
+        if (!airlines.some(function (x) { return x.value === airlineCode; })) {
+            airlines.push({
+                value: airlineCode,
+                label: flight.airlineDescription,
+                count: 0,
+                isSelected: false
+            });
+        }
+        var stopCount = flight.flightMetaData.flightLines.length - 1;
+        if (!numberOfStops.some(function (x) { return x.value === (stopCount + ''); })) {
+            numberOfStops.push({
+                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
+            });
+        }
+        var departureTime = flight.flightMetaData.flightLines[0].departureTime;
+        var timeBracket = determineTimeBracket(departureTime);
+        if (!outwardDeparturePeriods.some(function (x) { return x.value === timeBracket; })) {
+            outwardDeparturePeriods.push({
+                value: timeBracket,
+                label: getBracketTranslation(timeBracket, translations),
+                count: 0,
+                isSelected: false
+            });
+        }
+        var travelDurationInMinutes = minutesFromTicks(flight.flightMetaData.durationInTicks);
+        if (travelDurationInMinutes > highestDepartureTravelDuration)
+            highestDepartureTravelDuration = travelDurationInMinutes;
+        if (travelDurationInMinutes < lowestDepartureTravelDuration)
+            lowestDepartureTravelDuration = travelDurationInMinutes;
+        var changeDurationInMinutes = getTotalChangeDuration(flight);
+        if (changeDurationInMinutes > highestDepartureChangeDuration)
+            highestDepartureChangeDuration = changeDurationInMinutes;
+        if (changeDurationInMinutes < lowestDepartureChangeDuration)
+            lowestDepartureChangeDuration = changeDurationInMinutes;
+    });
+    var lowestReturnTravelDuration = 9999;
+    var highestReturnTravelDuration = 0;
+    var lowestReturnChangeDuration = 9999;
+    var highestReturnChangeDuration = 0;
+    returnFlights.forEach(function (flight) {
+        var durationInMinutes = minutesFromTicks(flight.flightMetaData.durationInTicks);
+        if (durationInMinutes > highestReturnTravelDuration)
+            highestReturnTravelDuration = durationInMinutes;
+        if (durationInMinutes < lowestReturnTravelDuration)
+            lowestReturnTravelDuration = durationInMinutes;
+        var changeDurationInMinutes = getTotalChangeDuration(flight);
+        if (changeDurationInMinutes > highestReturnChangeDuration)
+            highestReturnChangeDuration = changeDurationInMinutes;
+        if (changeDurationInMinutes < lowestReturnChangeDuration)
+            lowestReturnChangeDuration = changeDurationInMinutes;
+        var departureTime = flight.flightMetaData.flightLines[0].departureTime;
+        var timeBracket = determineTimeBracket(departureTime);
+        if (!returnDeparturePeriods.some(function (x) { return x.value === timeBracket; })) {
+            returnDeparturePeriods.push({
+                value: timeBracket,
+                label: getBracketTranslation(timeBracket, translations),
+                count: 0,
+                isSelected: false
+            });
+        }
+    });
+    return {
+        airports: airports,
+        airlines: airlines,
+        numberOfStops: numberOfStops,
+        outward: {
+            departurePeriod: outwardDeparturePeriods,
+            travelDuration: {
+                min: lowestDepartureTravelDuration,
+                max: highestDepartureTravelDuration,
+                selectedMin: lowestDepartureTravelDuration,
+                selectedMax: highestDepartureTravelDuration
+            },
+            changeDuration: {
+                min: lowestDepartureChangeDuration,
+                max: highestDepartureChangeDuration,
+                selectedMin: lowestDepartureChangeDuration,
+                selectedMax: highestDepartureChangeDuration
+            }
+        },
+        return: {
+            departurePeriod: returnDeparturePeriods,
+            travelDuration: {
+                min: lowestReturnTravelDuration,
+                max: highestReturnTravelDuration,
+                selectedMin: lowestReturnTravelDuration,
+                selectedMax: highestReturnTravelDuration
+            },
+            changeDuration: {
+                min: lowestReturnChangeDuration,
+                max: highestReturnChangeDuration,
+                selectedMin: lowestReturnChangeDuration,
+                selectedMax: highestReturnChangeDuration
+            }
+        }
+    };
+};
+var filterGroupedFlights = function (groups, filterOptions) {
+    if (!groups.length || !filterOptions)
+        return [];
+    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; }); });
+    }
+    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; }); });
+    }
+    if (filterOptions.numberOfStops.some(function (x) { return x.isSelected; })) {
+        var selectedNumberOfStops_1 = filterOptions.airlines.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 = filterGroupedFlightByDirection(filteredGroups, true, filterOptions.outward);
+    filteredGroups = filterGroupedFlightByDirection(filteredGroups, false, filterOptions.return);
+    return filteredGroups;
+};
+var filterGroupedFlightByDirection = function (groups, isOutward, directionFilter) {
+    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 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);
+    var mm = Math.floor(minutes % 60);
+    return pad(hh, 2) + ":" + pad(mm, 2);
+};
+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 waitDurations = getWaitDurations(flight.flightMetaData.flightLines);
+    return {
+        airline: flight.airlineDescription,
+        airlineCode: airlineCode,
+        departureDate: firstLine.departureDate,
+        departureTime: firstLine.departureTime,
+        departureAirportCode: firstLine.departureAirport,
+        departureAirport: firstLine.departureAirportDescription,
+        arrivalDate: lastLine.arrivalDate,
+        arrivalTime: lastLine.arrivalTime,
+        arrivalAirport: lastLine.arrivalAirportDescription,
+        travelDuration: formatDuration(flight.flightMetaData.durationInTicks),
+        travelDurationMinutes: minutesFromTicks(flight.flightMetaData.durationInTicks),
+        changeDurationMinutes: getTotalChangeDuration(flight),
+        numberOfStops: flight.flightMetaData.flightLines.length - 1,
+        isNextDay: isNextDay(firstLine.departureDate, lastLine.arrivalDate),
+        travelClass: firstLine.travelClass,
+        flightLines: flight.flightMetaData.flightLines.map(function (x, i) { return ({
+            airline: x.operatingAirlineDescription,
+            departureDate: x.departureDate,
+            departureTime: x.departureTime,
+            departureAirport: x.departureAirportDescription,
+            arrivalDate: x.arrivalDate,
+            arrivalTime: x.arrivalTime,
+            arrivalAirport: x.arrivalAirportDescription,
+            number: "".concat(x.airlineCode, " ").concat(x.number),
+            travelDuration: formatDuration(x.durationInTicks),
+            waitDuration: waitDurations.length - 1 <= i ? waitDurations[i] : undefined,
+        }); })
+    };
+};
+var isNextDay = function (startDateString, endDateString) {
+    var startDate = parseISO(startDateString);
+    var endDate = parseISO(endDateString);
+    return !isEqual(startDate, endDate);
+};
+var getWaitDurations = function (lines) {
+    if (lines.length <= 1)
+        return [];
+    var arrivalDate = lines[0].arrivalDate;
+    var arrivalTime = lines[0].arrivalTime;
+    var waitDurations = [];
+    for (var i = 1; i < lines.length; i++) {
+        var line = lines[i];
+        var waitDuration = getWaitDuration(arrivalDate, arrivalTime, line.departureDate, line.departureTime);
+        waitDurations.push(waitDuration);
+        arrivalDate = line.arrivalDate;
+        arrivalTime = line.arrivalTime;
+    }
+    return waitDurations;
+};
+var getWaitDuration = function (arrivalDateString, arrivalTime, departureDateString, departureTime) {
+    var minutes = getWaitDurationInMinutes(arrivalDateString, arrivalTime, departureDateString, departureTime);
+    var hh = Math.floor(minutes / 60);
+    var mm = Math.floor(minutes % 60);
+    return pad(hh, 2) + ":" + pad(mm, 2);
+};
+var getWaitDurationInMinutes = function (arrivalDateString, arrivalTime, departureDateString, departureTime) {
+    var arrivalDate = parseISO(arrivalDateString);
+    var arrivalTimeParts = arrivalTime.split(':');
+    arrivalDate.setHours(parseInt(arrivalTimeParts[0]));
+    arrivalDate.setMinutes(parseInt(arrivalTimeParts[1]));
+    var departureDate = parseISO(departureDateString);
+    var departureTimeParts = departureTime.split(':');
+    departureDate.setHours(parseInt(departureTimeParts[0]));
+    departureDate.setMinutes(parseInt(departureTimeParts[1]));
+    return differenceInMinutes(departureDate, arrivalDate);
+};
+/*const groupFlights = (flights: BookingPackageFlight[]) => {
+  let flightsPool = [...flights];
+  let groups = [] as FlightGroup[];
+  for (var i = 0; i < flightsPool.length; i++) {
+    const flight = flightsPool[i];
+
+    const relatedFlights = flightsPool.filter(x => x != flight
+      && x.code === flight.code
+      && isDateEqual(x.startDateTime, flight.startDateTime)
+      && isDateEqual(x.endDateTime, flight.endDateTime)
+    );
+
+    flightsPool = flightsPool.filter(x => x != flight
+      && relatedFlights.some(y => y != x));
+
+    groups.push({
+      code: flight.code,
+      startDate: parseISO(flight.startDateTime),
+      endDate: parseISO(flight.endDateTime),
+      options: [flight, ...relatedFlights]
+    });
+  }
+}
+
+const isDateEqual = (first: string, second: string) => {
+  const firstDate = parseISO(first);
+  const secondDate = parseISO(second);
+
+  return isEqual(firstDate, secondDate);
+}*/
+var minutesFromTicks = function (ticks) {
+    var totalSeconds = ticks / 10000000;
+    return Math.floor(totalSeconds / 60);
+};
+var formatDuration = function (ticks) {
+    if (!ticks)
+        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 determineTimeBracket = function (input) {
+    var time = parseInt(input.replace(':', ''));
+    if (time <= 500)
+        return '0000-0500';
+    if (time > 500 && time <= 1200)
+        return '0500-1200';
+    if (time > 1200 && time <= 1800)
+        return '1201-1800';
+    return '1800-2400';
+};
+var getBracketTranslation = function (input, translations) {
+    if (input === '0000-0500')
+        return translations.FLIGHTS_FORM.NIGHT_DEPARTURE;
+    if (input === '0500-1200')
+        return translations.FLIGHTS_FORM.MORNING_DEPARTURE;
+    if (input === '1200-1800')
+        return translations.FLIGHTS_FORM.AFTERNOON_DEPARTURE;
+    return translations.FLIGHTS_FORM.EVENING_DEPARTURE;
+};
+var getTotalChangeDuration = function (flight) {
+    var lines = flight.flightMetaData.flightLines;
+    if (lines.length <= 1)
+        return 0;
+    var arrivalDate = lines[0].arrivalDate;
+    var arrivalTime = lines[0].arrivalTime;
+    var waitDuration = 0;
+    for (var i = 1; i < lines.length; i++) {
+        var line = lines[i];
+        waitDuration += getWaitDurationInMinutes(arrivalDate, arrivalTime, line.departureDate, line.departureTime);
+    }
+    return waitDuration;
 };
 
-var NoneOption = function (_a) {
-    var group = _a.group, parentId = _a.parentId, handleNoneSelectionChanged = _a.handleNoneSelectionChanged;
+var FlightFilter = function (_a) {
+    var filterOptions = _a.filterOptions, resultCount = _a.resultCount, applyFilter = _a.applyFilter;
     var translations = useSelector(selectTranslations);
-    var selectedOption = group.options.find(function (x) { return x.isSelected; });
-    var showNoneOption = group.options.some(function (x) { return x.requirementType === 2; });
-    var noneSelected = !selectedOption;
-    var priceDifferencetext = selectedOption
-        ? "- ".concat(formatPrice(Math.abs(selectedOption.line.price)))
-        : "";
-    return (React.createElement(React.Fragment, null, showNoneOption && (React.createElement("tr", null,
-        React.createElement("td", null,
-            React.createElement("div", { className: buildClassName([
-                    "tree",
-                    noneSelected && "tree--selected",
-                ]) },
-                React.createElement("div", { className: "tree__level" },
-                    React.createElement("div", { className: "tree__header" },
-                        React.createElement("div", { className: "tree__description-collapse" },
-                            React.createElement("div", { className: "radiobutton" },
-                                React.createElement("div", { className: "radiobutton__label" },
-                                    React.createElement("input", { type: "radio", value: undefined, id: "".concat(parentId, "_NONE"), name: parentId, className: buildClassName([
-                                            "radiobutton__input",
-                                            "radiobutton__input--parent",
-                                        ]), defaultChecked: noneSelected, onChange: handleNoneSelectionChanged }),
+    var _b = useState(false), filtersVisible = _b[0], setFiltersVisible = _b[1];
+    var updateAirportFilter = function (code) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { airports: filterOptions.airports.map(function (x) {
+                if (x.value !== code)
+                    return x;
+                return __assign(__assign({}, x), { isSelected: !x.isSelected });
+            }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateAirlineFilter = function (code) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { airlines: filterOptions.airlines.map(function (x) {
+                if (x.value !== code)
+                    return x;
+                return __assign(__assign({}, x), { isSelected: !x.isSelected });
+            }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateStopsFilter = function (count) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { numberOfStops: filterOptions.airlines.map(function (x) {
+                if (x.value !== count)
+                    return x;
+                return __assign(__assign({}, x), { isSelected: !x.isSelected });
+            }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateOutwardDeparture = function (period) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { outward: __assign(__assign({}, filterOptions.outward), { departurePeriod: filterOptions.outward.departurePeriod.map(function (x) {
+                    if (x.value !== period)
+                        return x;
+                    return __assign(__assign({}, x), { isSelected: !x.isSelected });
+                }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateOutwardTravelDuration = function (min, max) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { outward: __assign(__assign({}, filterOptions.outward), { travelDuration: __assign(__assign({}, filterOptions.outward.travelDuration), { selectedMin: min, selectedMax: max }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateOutwardChangeDuration = function (min, max) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { outward: __assign(__assign({}, filterOptions.outward), { changeDuration: __assign(__assign({}, filterOptions.outward.changeDuration), { selectedMin: min, selectedMax: max }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateReturnDeparture = function (period) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { return: __assign(__assign({}, filterOptions.return), { departurePeriod: filterOptions.return.departurePeriod.map(function (x) {
+                    if (x.value !== period)
+                        return x;
+                    return __assign(__assign({}, x), { isSelected: !x.isSelected });
+                }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateReturnTravelDuration = function (min, max) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { return: __assign(__assign({}, filterOptions.return), { travelDuration: __assign(__assign({}, filterOptions.return.travelDuration), { selectedMin: min, selectedMax: max }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    var updateReturnChangeDuration = function (min, max) {
+        var updatedFilterOptions = __assign(__assign({}, filterOptions), { return: __assign(__assign({}, filterOptions.return), { changeDuration: __assign(__assign({}, filterOptions.return.changeDuration), { selectedMin: min, selectedMax: max }) }) });
+        applyFilter(updatedFilterOptions);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { type: "button", className: "cta cta--filter", onClick: function () { return setFiltersVisible(!filtersVisible); } },
+            React.createElement("svg", { width: 11, height: 10 },
+                React.createElement("use", { href: "/icons/svg-sprite.svg#filter" })),
+            React.createElement("span", null, translations.FLIGHTS_FORM.FILTER_OPTIONS),
+            filtersVisible),
+        React.createElement("div", { 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),
+                    React.createElement("p", null,
+                        "er zijn ",
+                        React.createElement("strong", null,
+                            resultCount,
+                            " vluchten"),
+                        " gevonden"))),
+            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("span", { className: "radiobutton__label-text" },
+                                    option.label,
+                                    " ",
+                                    option.count > 0 && (React.createElement("span", { className: "amount" },
+                                        "(",
+                                        option.count,
+                                        ")"))))))); }))),
+                React.createElement("div", { className: "flight__filter__group" },
+                    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("span", { className: "radiobutton__label-text" },
+                                    option.label,
+                                    " ",
+                                    option.count > 0 && (React.createElement("span", { className: "amount" },
+                                        "(",
+                                        option.count,
+                                        ")"))))))); }))),
+                React.createElement("div", { className: "flight__filter__group" },
+                    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("span", { className: "radiobutton__label-text" },
+                                    option.label,
+                                    " ",
+                                    option.count > 0 && (React.createElement("span", { className: "amount" },
+                                        "(",
+                                        option.count,
+                                        ")"))))))); }))),
+                React.createElement("div", { className: "flight__filter__group" },
+                    React.createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.FLIGHT_OUTWARD),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        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("span", { className: "radiobutton__label-text" },
-                                        React.createElement("div", { className: "date-list" },
-                                            React.createElement("span", { className: buildClassName([
-                                                    "date-list__item",
-                                                    "date-list__item--none",
-                                                ]) }))),
-                                    React.createElement("div", { className: "tree__columns-actions" },
-                                        React.createElement("div", { className: "tree__columns" },
-                                            React.createElement("div", { className: "tree__column" },
-                                                React.createElement("label", { htmlFor: "".concat(parentId, "_NONE"), className: buildClassName([
-                                                        "tree__product-name",
-                                                        "tree__product-name--none",
-                                                    ]) }, translations.OPTIONS_FORM.NONE)),
-                                            React.createElement("div", { className: "tree__column" }),
-                                            React.createElement("div", { className: "tree__column" }),
-                                            React.createElement("div", { className: buildClassName([
-                                                    "tree__column",
-                                                    "tree__column--price",
-                                                ]) }, !noneSelected && (React.createElement("span", { className: buildClassName([
-                                                    "price",
-                                                    "price--decrease",
-                                                ]) }, priceDifferencetext))))))))))))))));
+                                        option.label,
+                                        " ",
+                                        option.count > 0 && (React.createElement("span", { className: "amount" },
+                                            "(",
+                                            option.count,
+                                            ")"))))))); })),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        React.createElement("p", null, translations.FLIGHTS_FORM.TRAVEL_DURATION),
+                        React.createElement(MultiRangeFilter, { min: filterOptions.outward.travelDuration.min, max: filterOptions.outward.travelDuration.max, selectedMin: filterOptions.outward.travelDuration.selectedMin, selectedMax: filterOptions.outward.travelDuration.selectedMax, valueFormatter: formatMinutes, onChange: updateOutwardTravelDuration })),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        React.createElement("p", null, translations.FLIGHTS_FORM.CHANGE_TIME),
+                        React.createElement(MultiRangeFilter, { min: filterOptions.outward.changeDuration.min, max: filterOptions.outward.changeDuration.max, selectedMin: filterOptions.outward.changeDuration.selectedMin, selectedMax: filterOptions.outward.changeDuration.selectedMax, valueFormatter: formatMinutes, onChange: updateOutwardChangeDuration }))),
+                React.createElement("div", { className: "flight__filter__group" },
+                    React.createElement("div", { className: "flight__filter__group__title" }, translations.FLIGHTS_FORM.FLIGHT_RETURN),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        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("span", { className: "radiobutton__label-text" },
+                                        option.label,
+                                        " ",
+                                        option.count > 0 && (React.createElement("span", { className: "amount" },
+                                            "(",
+                                            option.count,
+                                            ")"))))))); })),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        React.createElement("p", null, translations.FLIGHTS_FORM.TRAVEL_DURATION),
+                        React.createElement(MultiRangeFilter, { min: filterOptions.return.travelDuration.min, max: filterOptions.return.travelDuration.max, selectedMin: filterOptions.return.travelDuration.selectedMin, selectedMax: filterOptions.return.travelDuration.selectedMax, valueFormatter: formatMinutes, onChange: updateReturnTravelDuration })),
+                    React.createElement("div", { className: "flight__filter__group__wrapper" },
+                        React.createElement("p", null, translations.FLIGHTS_FORM.CHANGE_TIME),
+                        React.createElement(MultiRangeFilter, { min: filterOptions.return.changeDuration.min, max: filterOptions.return.changeDuration.max, selectedMin: filterOptions.return.changeDuration.selectedMin, selectedMax: filterOptions.return.changeDuration.selectedMax, valueFormatter: formatMinutes, onChange: updateReturnChangeDuration })))))));
 };
 
 var getTravelersText = function (rooms) {
@@ -9564,7 +9986,7 @@ var parseFlightLines = function (metaDatas) {
 var parseFlightLineDateTime = function (date, time) {
     try {
         // Parse date
-        var parsedDate = new Date(date);
+        var parsedDate = parseISO(date);
         // Parse time
         var parsedTimeHours = parseInt(time.substring(0, 2));
         var parsedTimeMinutes = parseInt(time.substring(3, 5));
@@ -9579,6 +10001,521 @@ var parseFlightLineDateTime = function (date, time) {
     }
 };
 
+var FlightOptionFlight = function (_a) {
+    var details = _a.details, isOptionsVisible = _a.isOptionsVisible;
+    var translations = useSelector(selectTranslations);
+    var _b = useState(false), isDetailVisible = _b[0], setIsDetailVisible = _b[1];
+    return (React.createElement("div", { className: "flight__flight" },
+        React.createElement("div", { className: "flight__flight__container" },
+            React.createElement("div", { className: "flight__flight__wrapper" },
+                React.createElement("div", { className: "flight__logo__wrapper" },
+                    React.createElement("img", { src: "https://media.tidesoftware.be/media/shared/Airlines/".concat(details.airlineCode, ".png?height=30"), alt: "", className: "flight__logo" }),
+                    React.createElement("span", null, details.airline)),
+                React.createElement("div", { className: "flight__info" },
+                    React.createElement("div", { className: "flight__info__times" },
+                        React.createElement("strong", null,
+                            details.departureTime,
+                            " ",
+                            details.departureAirport),
+                        React.createElement("p", null, getDateText(details.departureDate))),
+                    React.createElement("div", { className: "flight__info__duration" },
+                        React.createElement("p", null, details.travelDuration),
+                        React.createElement("div", { className: "flight__info__duration__stops" },
+                            React.createElement("div", { className: "flight__info__duration__stop" })),
+                        details.numberOfStops > 0 && (React.createElement("span", null,
+                            details.numberOfStops,
+                            " ",
+                            translations.FLIGHTS_FORM.FLIGHT_STOPS))),
+                    React.createElement("div", { className: "flight__info__times flight__info__times--arrival" },
+                        React.createElement("strong", null,
+                            details.arrivalTime,
+                            " ",
+                            details.arrivalAirport),
+                        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("svg", { width: 16, height: 16, className: "flight__detail__btn__arrow" },
+                        React.createElement("use", { href: "/icons/svg-sprite.svg#chevron" }))))),
+        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" },
+                        React.createElement("strong", null,
+                            flightLine.departureTime,
+                            " ",
+                            flightLine.departureAirport),
+                        React.createElement("p", null, getDateText(flightLine.departureDate))),
+                    React.createElement("div", null,
+                        React.createElement("svg", { width: 30, height: 20 },
+                            React.createElement("use", { href: "/icons/svg-sprite.svg#plane-depart" })))),
+                React.createElement("div", { className: "flight__info__duration" },
+                    React.createElement("p", null, flightLine.travelDuration),
+                    React.createElement("div", { className: "flight__info__duration__stops" }),
+                    React.createElement("span", null, flightLine.airline),
+                    React.createElement("strong", null, flightLine.number)),
+                React.createElement("div", { className: "flight__info__times__wrapper flight__info__times__wrapper--arrival" },
+                    React.createElement("div", null,
+                        React.createElement("svg", { width: 35, height: 25 },
+                            React.createElement("use", { href: "/icons/svg-sprite.svg#plane-arive" }))),
+                    React.createElement("div", { className: "flight__info__times flight__info__times--arrival" },
+                        React.createElement("strong", null,
+                            flightLine.arrivalTime,
+                            " ",
+                            flightLine.arrivalAirport),
+                        React.createElement("p", null, getDateText(flightLine.arrivalDate))))),
+            flightLine.waitDuration && (React.createElement("div", { className: "flight__info" },
+                React.createElement("div", { className: "flight__info__times" }),
+                React.createElement("div", { className: "flight__info__duration flight__info__duration--waittime" },
+                    React.createElement("div", { className: "flight__info__duration__stops flight__info__duration__stops--stoptime" },
+                        React.createElement("svg", { width: 20, height: 20 },
+                            React.createElement("use", { href: "/icons/svg-sprite.svg#clock" }))),
+                    React.createElement("div", { className: "flight__info__duration__stoptime" },
+                        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"]) })));
+};
+
+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 outwardVisible = useState(false)[0];
+    var returnVisible = useState(false)[0];
+    var handleButtonClick = function () {
+        if (!item.isSelected)
+            onChange(item);
+    };
+    return (React.createElement("div", { className: "flight__option" },
+        React.createElement("div", { className: "flight__content" },
+            React.createElement("div", { className: "flight__flights" },
+                React.createElement("div", { className: "flight__flight" },
+                    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",
+                                    priceDifference > 0 && "price--increase",
+                                    priceDifference < 0 && "price--decrease"
+                                ]) }, getPriceDifferenceText(priceDifference))),
+                            React.createElement("button", { type: "button", className: "cta ".concat(isSelected ? 'cta--selected' : 'cta--secondary'), 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 })))));
+};
+
+var FlightOptionModal = function (_a) {
+    return (React.createElement("div", { className: "flight__rate__modal__container" },
+        " ",
+        React.createElement("div", { className: "flight__rate__modal" },
+            React.createElement("div", { className: "flight__rate__modal__header" },
+                React.createElement("h3", { className: "flight__rate__modal__header__title" }, "Selecteer een tarief"),
+                React.createElement("button", { className: "flight__rate__modal__header__close" },
+                    React.createElement("svg", { width: 18, height: 18 },
+                        React.createElement("use", { href: "/icons/svg-sprite.svg#close" })))),
+            React.createElement("div", { className: "flight__rate__modal__tabs" },
+                React.createElement("button", { className: "flight__rate__modal__tab flight__rate__modal__tab--active" }, "Economy / Economy premium"),
+                React.createElement("button", { className: "flight__rate__modal__tab" }, "Business / Business premium")),
+            React.createElement("div", { className: "flight__rate__modal__content" },
+                React.createElement("div", { className: "flight__rate__modal__card" },
+                    React.createElement("div", { className: "flight__rate__modal__card__wrapper" },
+                        React.createElement("div", { className: "flight__rate__modal__card__header" },
+                            React.createElement("h3", { className: "flight__rate__modal__card__header__title" }, "Economy Basic"),
+                            React.createElement("p", { className: "flight__rate__modal__card__header__class" }, "Klasse: Economy")),
+                        React.createElement("div", { className: "flight__rate__modal__card__items flight__rate__modal__card__items--top" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item flight__rate__modal__card__item--disabled" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#ticket" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Wijzigingen in het ticket"),
+                                    React.createElement("p", null, "Wijzigingen toestaan"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item flight__rate__modal__card__item--disabled" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#payback" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Terugbetaling van ticket"),
+                                    React.createElement("p", null, "Ticket retourneerbaar")))),
+                        React.createElement("div", { className: "flight__rate__modal__card__items" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#shopping-bag" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "persoonlijke items"),
+                                    React.createElement("p", null, "Gratis"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#backpack" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Handbagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 8kg"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#suitcase" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Ingecheckte bagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 32kg"))))),
+                    React.createElement("div", { className: "flight__rate__modal__card__footer" },
+                        React.createElement("button", { className: "cta cta--secondary" }, "Selecteer"),
+                        React.createElement("span", { className: "price price--increase" }, "+ \u20AC2460,00"))),
+                React.createElement("div", { className: "flight__rate__modal__card flight__rate__modal__card--premium" },
+                    React.createElement("div", { className: "flight__rate__modal__card__wrapper" },
+                        React.createElement("div", { className: "flight__rate__modal__card__header" },
+                            React.createElement("h3", { className: "flight__rate__modal__card__header__title" }, "Premium Economy Basic Plus"),
+                            React.createElement("p", { className: "flight__rate__modal__card__header__class" }, "Klasse: Economy")),
+                        React.createElement("div", { className: "flight__rate__modal__card__items flight__rate__modal__card__items--top" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#ticket" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Wijzigingen in het ticket"),
+                                    React.createElement("p", null, "Wijzigingen toestaan"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#payback" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Terugbetaling van ticket"),
+                                    React.createElement("p", null, "Ticket retourneerbaar")))),
+                        React.createElement("div", { className: "flight__rate__modal__card__items" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#shopping-bag" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "persoonlijke items"),
+                                    React.createElement("p", null, "Gratis"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#backpack" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Handbagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 8kg"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#suitcase" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Ingecheckte bagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 32kg"))))),
+                    React.createElement("div", { className: "flight__rate__modal__card__footer" },
+                        React.createElement("button", { className: "cta cta--secondary" }, "Selecteer"),
+                        React.createElement("span", { className: "price price--increase" }, "+ \u20AC2460,00"))),
+                React.createElement("div", { className: "flight__rate__modal__card flight__rate__modal__card--business" },
+                    React.createElement("div", { className: "flight__rate__modal__card__wrapper" },
+                        React.createElement("div", { className: "flight__rate__modal__card__header" },
+                            React.createElement("h3", { className: "flight__rate__modal__card__header__title" }, "Business Basic Plus"),
+                            React.createElement("p", { className: "flight__rate__modal__card__header__class" }, "Klasse: Economy")),
+                        React.createElement("div", { className: "flight__rate__modal__card__items flight__rate__modal__card__items--top" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#ticket" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Wijzigingen in het ticket"),
+                                    React.createElement("p", null, "Wijzigingen toestaan"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item flight__rate__modal__card__item--disabled" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#payback" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Terugbetaling van ticket"),
+                                    React.createElement("p", null, "Ticket retourneerbaar")))),
+                        React.createElement("div", { className: "flight__rate__modal__card__items" },
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#shopping-bag" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "persoonlijke items"),
+                                    React.createElement("p", null, "Gratis"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#backpack" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Handbagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 8kg"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#suitcase" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Ingecheckte bagage"),
+                                    React.createElement("p", null, "Gratis: 2 x 32kg"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#seat-selection" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Stoelselectie"),
+                                    React.createElement("p", null, "kies uw stoel in het vliegtijg"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#check-in" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Sneller inchecken"),
+                                    React.createElement("p", null, "Sla de wachtrijen voor de veiligheidscontrole over"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#business-lounge" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Zakenlunge"),
+                                    React.createElement("p", null, "Ontspan voor uw vlucht"))),
+                            React.createElement("div", { className: "flight__rate__modal__card__item" },
+                                React.createElement("svg", { width: 20, height: 20 },
+                                    React.createElement("use", { href: "/icons/svg-sprite.svg#priority" })),
+                                React.createElement("div", { className: "flight__rate__modal__card__item__wrapper" },
+                                    React.createElement("strong", null, "Prioriteit"),
+                                    React.createElement("p", null, "Stap voor anderen aan boord"))))),
+                    React.createElement("div", { className: "flight__rate__modal__card__footer" },
+                        React.createElement("button", { className: "cta cta--secondary" }, "Selecteer"),
+                        React.createElement("span", { className: "price price--increase" }, "+ \u20AC2460,00")))),
+            React.createElement("div", { className: "flight__rate__modal__footer" },
+                React.createElement("button", { className: "cta cta--secondary" }, "Toepassen")))));
+};
+
+var FlightOptionsForm = function () {
+    var _a, _b, _c, _d;
+    var settings = useContext(SettingsContext);
+    var translations = useSelector(selectTranslations);
+    var dispatch = useAppDispatch();
+    var packageDetails = useSelector(selectPackageDetails);
+    var bookingQueryString = useSelector(selectBookingQueryString);
+    var isLoading = useSelector(selectIsFetchingProductOptions);
+    var flights = useSelector(selectPackageFlights);
+    var _e = useState(), filterOptions = _e[0], setFilterOptions = _e[1];
+    var _f = useState([]), flightGroups = _f[0], setFlightGroups = _f[1];
+    var handleSubmit = function (e) {
+        if (settings.skipRouter) {
+            dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+        }
+        else {
+            if (settings.roomOptions.isHidden) {
+                navigate("".concat(settings.basePath).concat(settings.options.pathSuffix, "?").concat(bookingQueryString));
+            }
+            else {
+                navigate("".concat(settings.basePath).concat(settings.roomOptions.pathSuffix, "?").concat(bookingQueryString));
+            }
+        }
+        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);
+    useEffect(function () {
+        var _a, _b;
+        if (packageDetails && settings.roomOptions.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;
+            if (outwardFlight_1 && returnFlight_1) {
+                var desiredOutwardFlight_1 = packageDetails.outwardFlights.find(function (x) { return x.entryLineGuid == outwardFlight_1; });
+                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
+                                    ? true
+                                    : false });
+                        }), returnFlights: packageDetails.returnFlights.map(function (flight) {
+                            return __assign(__assign({}, flight), { isSelected: flight.entryLineGuid == desiredReturnFlight_1.entryLineGuid
+                                    ? true
+                                    : false });
+                        }) })));
+                }
+            }
+        }
+        dispatch(fetchPriceDetails());
+        var filters = buildFilterOptions(flights.outward, flights.return, translations);
+        setFilterOptions(filters);
+    }, []);
+    useEffect(function () {
+        var groups = buildGroupedFlights(flights.outward, flights.return);
+        setFlightGroups(groups);
+    }, [flights]);
+    var filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
+    var resultCount = filteredGroups.length;
+    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: "booking__navigator" },
+                React.createElement("button", { type: "submit", title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName(["cta", isLoading && "cta--disabled"]) }, translations.STEPS.NEXT)))));
+};
+
+var buildSelectableRooms = function (packageRooms, accommodations, regimes, accommodationViews) {
+    return packageRooms.map(function (x) {
+        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; })
+            .sort(function (a, b) { return a.price - b.price; });
+        var alternativeAccommodations = [];
+        alternativeOptions.forEach(function (x) {
+            var _a, _b, _c, _d;
+            var alternativeAccommodation = alternativeAccommodations.find(function (y) { return y.code === x.accommodationCode; });
+            if (alternativeAccommodation) {
+                var regime = regimes === null || regimes === void 0 ? void 0 : regimes.find(function (y) { return y.code === x.regimeCode; });
+                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
+                });
+            }
+            else {
+                var accommodation_1 = accommodations === null || accommodations === void 0 ? void 0 : accommodations.find(function (y) { return y.code === x.accommodationCode; });
+                var regime = regimes === null || regimes === void 0 ? void 0 : regimes.find(function (y) { return y.code === x.regimeCode; });
+                alternativeAccommodations.push({
+                    code: x.accommodationCode,
+                    regimeCode: x.regimeCode,
+                    from: x.from,
+                    to: x.to,
+                    price: x.price,
+                    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
+                        }],
+                    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]
+                });
+            }
+        });
+        var accommodation = accommodations === null || accommodations === void 0 ? void 0 : accommodations.find(function (y) { return y.code === selectedOption.accommodationCode; });
+        return {
+            index: x.index,
+            selected: {
+                code: selectedOption.accommodationCode,
+                regimeCode: selectedOption.regimeCode,
+                price: selectedOption.price,
+                from: selectedOption.from,
+                to: selectedOption.to,
+                regimes: x.options
+                    .filter(function (x) { return x.accommodationCode === selectedOption.accommodationCode; })
+                    .sort(function (a, b) { return a.price - b.price; })
+                    .map(function (o) {
+                    var _a;
+                    var regime = regimes === null || regimes === void 0 ? void 0 : regimes.find(function (y) { return y.code === o.regimeCode; });
+                    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
+                    };
+                }),
+                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]
+            },
+            showAlternatives: false,
+            alternatives: alternativeAccommodations
+        };
+    });
+};
+var updatePackageRooms = function (rooms, index, accommodationCode, regimeCode, availabilities) {
+    var updatedRooms = rooms.map(function (room) {
+        if (room.index !== index)
+            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 === '')) });
+            }) });
+    });
+    var selectedAccommodations = new Map();
+    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);
+        }
+        else {
+            selectedAccommodations.set(x.accommodationCode, 1);
+        }
+    });
+    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) {
+                var _a, _b, _c;
+                var isCurrentOption = selectedOption.accommodationCode === option.accommodationCode;
+                var usedCount = (_a = selectedAccommodations.get(option.accommodationCode)) !== null && _a !== void 0 ? _a : 0;
+                var availability = availabilities.find(function (x) { return x.code === option.accommodationCode; });
+                if (availability) {
+                    var accoCount = accoCounter.find(function (x) { return x.code === option.accommodationCode; });
+                    var roomsLeft = availability.count - usedCount;
+                    var isOnRequest = isCurrentOption
+                        ? accoCount.count < 0 && ((_b = availability === null || availability === void 0 ? void 0 : availability.onRequestPossible) !== null && _b !== void 0 ? _b : false)
+                        : 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 });
+                }
+                else {
+                    return option;
+                }
+            }) });
+    });
+};
+
+var NoOptions = function () {
+    var translations = useSelector(selectTranslations);
+    return (React.createElement("div", { className: "form__group" },
+        React.createElement(Message, { type: "success", title: translations.OPTIONS_FORM.NO_OPTIONS_TITLE },
+            React.createElement("p", null, translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE))));
+};
+
+var NoneOption = function (_a) {
+    var group = _a.group, parentId = _a.parentId, handleNoneSelectionChanged = _a.handleNoneSelectionChanged;
+    var translations = useSelector(selectTranslations);
+    var selectedOption = group.options.find(function (x) { return x.isSelected; });
+    var showNoneOption = group.options.some(function (x) { return x.requirementType === 2; });
+    var noneSelected = !selectedOption;
+    var priceDifferencetext = selectedOption
+        ? "- ".concat(formatPrice(Math.abs(selectedOption.line.price)))
+        : "";
+    return (React.createElement(React.Fragment, null, showNoneOption && (React.createElement("tr", null,
+        React.createElement("td", null,
+            React.createElement("div", { className: buildClassName([
+                    "tree",
+                    noneSelected && "tree--selected",
+                ]) },
+                React.createElement("div", { className: "tree__level" },
+                    React.createElement("div", { className: "tree__header" },
+                        React.createElement("div", { className: "tree__description-collapse" },
+                            React.createElement("div", { className: "radiobutton" },
+                                React.createElement("div", { className: "radiobutton__label" },
+                                    React.createElement("input", { type: "radio", value: undefined, id: "".concat(parentId, "_NONE"), name: parentId, className: buildClassName([
+                                            "radiobutton__input",
+                                            "radiobutton__input--parent",
+                                        ]), defaultChecked: noneSelected, onChange: handleNoneSelectionChanged }),
+                                    React.createElement("span", { className: "radiobutton__label-text" },
+                                        React.createElement("div", { className: "date-list" },
+                                            React.createElement("span", { className: buildClassName([
+                                                    "date-list__item",
+                                                    "date-list__item--none",
+                                                ]) }))),
+                                    React.createElement("div", { className: "tree__columns-actions" },
+                                        React.createElement("div", { className: "tree__columns" },
+                                            React.createElement("div", { className: "tree__column" },
+                                                React.createElement("label", { htmlFor: "".concat(parentId, "_NONE"), className: buildClassName([
+                                                        "tree__product-name",
+                                                        "tree__product-name--none",
+                                                    ]) }, translations.OPTIONS_FORM.NONE)),
+                                            React.createElement("div", { className: "tree__column" }),
+                                            React.createElement("div", { className: "tree__column" }),
+                                            React.createElement("div", { className: buildClassName([
+                                                    "tree__column",
+                                                    "tree__column--price",
+                                                ]) }, !noneSelected && (React.createElement("span", { className: buildClassName([
+                                                    "price",
+                                                    "price--decrease",
+                                                ]) }, priceDifferencetext))))))))))))))));
+};
+
 var OptionItem = function (_a) {
     var _b;
     var option = _a.option, parentId = _a.parentId, index = _a.index, selectedPrice = _a.selectedPrice, onOptionChange = _a.onOptionChange;
@@ -10074,10 +11011,9 @@ var OptionRoom = function (_a) {
         }
     }
     var accommodations = uniqBy(compact(packageRoom &&
-        packageRoom.options.map(function (option) {
-            if (!option.accommodationCode) {
-                return undefined;
-            }
+        packageRoom.options
+            .filter(function (x) { return x.accommodationCode && !x.isLocked; })
+            .map(function (option) {
             return {
                 accommodationCode: option.accommodationCode,
                 accommodationName: option.accommodationName,
@@ -10233,6 +11169,7 @@ var OptionsForm = function () {
     var airportGroups = useSelector(selectPackageAirportGroups);
     var optionUnits = useSelector(selectPackageOptionUnits);
     var optionPax = useSelector(selectPackageOptionPax);
+    var availabilities = useSelector(selectAvailabilities);
     // ROOMS
     var showRoomOptions = settings.roomOptions.isHidden;
     var packageRooms = useSelector(selectPackageRooms);
@@ -10248,14 +11185,7 @@ var OptionsForm = function () {
     var handleOnRoomChange = function (index, accommodationCode, regimeCode) {
         if (!packageRooms)
             return;
-        var updatedPackageRooms = packageRooms.map(function (room) {
-            if (room.index !== index)
-                return room;
-            return __assign(__assign({}, room), { options: room.options.map(function (option) {
-                    return __assign(__assign({}, option), { isSelected: option.accommodationCode === accommodationCode &&
-                            option.regimeCode === regimeCode });
-                }) });
-        });
+        var updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities);
         dispatch(setPackageRooms(updatedPackageRooms));
         dispatch(fetchPriceDetails());
     };
@@ -10344,22 +11274,23 @@ var OptionsForm = function () {
         dispatch(fetchPriceDetails());
     }, []);
     var goPrevious = function () {
-        if (settings.flightOptions.isHidden) {
-            dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+        if (settings.roomOptions.isHidden) {
+            dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
         }
         else {
-            dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+            dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
         }
     };
-    var previousUrl = settings.flightOptions.isHidden
-        ? "".concat(settings.basePath).concat(settings.roomOptions.pathSuffix, "?").concat(bookingQueryString)
-        : "".concat(settings.basePath).concat(settings.flightOptions.pathSuffix, "?").concat(bookingQueryString);
+    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));
     return (React.createElement(React.Fragment, null,
         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" },
-                packageTags && (React.createElement("div", { className: "form__group" },
+                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([
@@ -10371,14 +11302,14 @@ var OptionsForm = function () {
                                     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 })); })))),
-                                    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" },
+                                    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),
                                         "\u00A0",
-                                        React.createElement("span", { className: "tag-translation__description" }, tag.description))); })))))))),
+                                        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" },
@@ -10406,28 +11337,112 @@ var OptionsForm = function () {
                 React.createElement("button", { type: "submit", title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName(["cta", isLoading && "cta--disabled"]) }, translations.STEPS.NEXT)))));
 };
 
+var RoomOption = function (_a) {
+    var room = _a.room, hasAlternatives = _a.hasAlternatives, selectedRoomPrice = _a.selectedRoomPrice, onAcommodationChange = _a.onAcommodationChange, onRegimeChange = _a.onRegimeChange, onToggleAlternatives = _a.onToggleAlternatives;
+    var translations = useSelector(selectTranslations);
+    var _b = useState(0), roomPrice = _b[0], setRoomPrice = _b[1];
+    var _c = useState(room.regimeCode), roomRegimeCode = _c[0], setRoomRegimeCode = _c[1];
+    useEffect(function () {
+        setRoomPrice(room.price);
+    }, [room.code, room.regimeCode]);
+    var getPriceDifference = function (selectedPrice, currentPrice) {
+        var priceDifference = (selectedPrice !== null && selectedPrice !== void 0 ? selectedPrice : 0) - currentPrice;
+        if (priceDifference !== 0) {
+            return "(".concat(getPriceDifferenceText(priceDifference), ")");
+        }
+        else {
+            return "";
+        }
+    };
+    var selectAccommodation = function () {
+        if (onAcommodationChange) {
+            onAcommodationChange(room.code, roomRegimeCode);
+        }
+    };
+    var handleRegimeChange = function (e) {
+        var regimeCode = e.currentTarget.value;
+        var option = room.regimes.find(function (x) { return x.code === regimeCode || (x.code === null && regimeCode === ''); });
+        setRoomRegimeCode(option.code);
+        setRoomPrice(option.price);
+        if (onRegimeChange) {
+            onRegimeChange(regimeCode);
+        }
+        e.preventDefault();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "form__room" },
+            room.viewHtml && (React.createElement("div", { className: "form__room__wrapper", dangerouslySetInnerHTML: { __html: room.viewHtml } })),
+            !room.viewHtml && (React.createElement("div", { className: "form__room__wrapper" },
+                room.image && (React.createElement("div", { className: "form__room__image" },
+                    React.createElement("img", { src: room.image, alt: "", className: "form__room__img" }))),
+                React.createElement("div", { className: "form__room__body" },
+                    React.createElement("div", { className: "" },
+                        React.createElement("h3", { className: "form__room__title" }, room.title),
+                        room.description && (React.createElement("p", { className: "form__room__text" }, room.description)),
+                        React.createElement("ul", { className: "list--usps form__room__usps" }, room.usps.map(function (usp, uspIndex) { return (React.createElement("li", { key: uspIndex, className: "list__item" }, usp)); })))))),
+            React.createElement("div", { className: "form__room__footer" },
+                React.createElement("div", { className: "form__room__footer__top" },
+                    React.createElement("p", { className: "form__room__dates" },
+                        getDateText(room.from),
+                        " - ",
+                        getDateText(room.to)),
+                    React.createElement("span", { className: "form__room__days" }, getDatePeriodText(room.from, room.to))),
+                React.createElement("div", { className: "form__room__footer__bottom" },
+                    selectedRoomPrice != undefined && (React.createElement("p", { className: "form__room__price form__room__price--increase" },
+                        React.createElement("span", null, getPriceDifference(roomPrice, selectedRoomPrice)))),
+                    hasAlternatives && onToggleAlternatives && (React.createElement("button", { type: "button", onClick: onToggleAlternatives, className: "form__room__alternatives__btn" }, translations.ROOM_OPTIONS_FORM.SHOW_ALTERNATIVES)),
+                    React.createElement("div", { className: "select-wrapper" },
+                        React.createElement("div", { className: "select-wrapper__select" },
+                            React.createElement("select", { defaultValue: roomRegimeCode, onChange: handleRegimeChange }, room.regimes.map(function (regime) {
+                                var _a;
+                                return (React.createElement("option", { key: regime.code, value: (_a = regime.code) !== null && _a !== void 0 ? _a : "" },
+                                    regime.title,
+                                    " ",
+                                    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))))));
+};
+
+var TravelerRooms = function (_a) {
+    var index = _a.index, room = _a.room, onRoomChange = _a.onRoomChange;
+    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 },
+        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); } }),
+        !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);
+                } })); })))))));
+};
+
 var RoomOptionsForm = function () {
-    var _a = useContext(SettingsContext), basePath = _a.basePath, flightOptions = _a.flightOptions, options = _a.options, loaderComponent = _a.loaderComponent, skipRouter = _a.skipRouter;
+    var settings = useContext(SettingsContext);
     var translations = useSelector(selectTranslations);
     var dispatch = useAppDispatch();
     var packageDetails = useSelector(selectPackageDetails);
-    var requestRooms = useSelector(selectRequestRooms);
-    var pax = useSelector(selectBookingPackagePax);
     var packageRooms = useSelector(selectPackageRooms);
+    var availabilities = useSelector(selectAvailabilities);
     var bookingQueryString = useSelector(selectBookingQueryString);
+    var accommodationViews = useSelector(selectAccommodationViews);
     var isLoading = useSelector(selectIsFetchingProductOptions);
-    var optionPax = useSelector(selectPackageOptionPax);
-    var getRoomPax = function (index) {
-        var _a;
-        var room = requestRooms === null || requestRooms === void 0 ? void 0 : requestRooms.find(function (x) { return x.index == index; });
-        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 : [];
+    var rooms = buildSelectableRooms(packageRooms, settings.accommodations, settings.regimes, accommodationViews);
+    var goPrevious = function () {
+        dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
     };
     var handleSubmit = function (e) {
-        if (skipRouter) {
-            if (flightOptions.isHidden) {
+        if (settings.skipRouter) {
+            if (settings.flightOptions.isHidden) {
                 dispatch(setCurrentStep(OPTIONS_FORM_STEP));
             }
             else {
@@ -10435,26 +11450,14 @@ var RoomOptionsForm = function () {
             }
         }
         else {
-            if (flightOptions.isHidden) {
-                navigate("".concat(basePath).concat(options.pathSuffix, "?").concat(bookingQueryString));
-            }
-            else {
-                navigate("".concat(basePath).concat(flightOptions.pathSuffix, "?").concat(bookingQueryString));
-            }
+            navigate("".concat(settings.basePath).concat(settings.options.pathSuffix, "?").concat(bookingQueryString));
         }
         e.preventDefault();
     };
     var handleOnRoomChange = function (index, accommodationCode, regimeCode) {
         if (!packageRooms)
             return;
-        var updatedPackageRooms = packageRooms.map(function (room) {
-            if (room.index !== index)
-                return room;
-            return __assign(__assign({}, room), { options: room.options.map(function (option) {
-                    return __assign(__assign({}, option), { isSelected: option.accommodationCode === accommodationCode &&
-                            option.regimeCode === regimeCode });
-                }) });
-        });
+        var updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities);
         dispatch(setPackageRooms(updatedPackageRooms));
         dispatch(fetchPriceDetails());
     };
@@ -10482,61 +11485,11 @@ var RoomOptionsForm = function () {
         }
         dispatch(fetchPriceDetails());
     }, []);
-    // const [active, setActive] = useState(false)
     return (React.createElement(React.Fragment, null,
         React.createElement("form", { className: "form", name: "booking--options", id: "booking--options", noValidate: true, onSubmit: handleSubmit },
-            React.createElement("div", { className: "form__wrapper" },
-                isLoading && loaderComponent,
-                !isLoading && (React.createElement("div", { className: "form__region" },
-                    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",
-                                    ]) },
-                                    React.createElement("span", { className: "booking-card__tag" }, translations.OPTIONS_FORM.PACKAGE),
-                                    React.createElement("div", { className: "booking-card__group-body" },
-                                        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 })); })))))))))),
-                React.createElement("div", { className: "form__room" },
-                    React.createElement("div", { className: "form__room__wrapper" },
-                        React.createElement("div", { className: "form__room__image" },
-                            React.createElement("img", { src: "https://picsum.photos/1920/1080", alt: "", className: "form__room__img" }),
-                            React.createElement("div", { className: "form__room__favorite" },
-                                React.createElement("i", { className: "fa-regular fa-heart" }))),
-                        React.createElement("div", { className: "form__room__body" },
-                            React.createElement("div", { className: "" },
-                                React.createElement("h3", { className: "form__room__title" }, "Tara Penthouse suite frontal seaview"),
-                                React.createElement("p", null,
-                                    " Carrer de Nicaragua, 146, Les Corts, 08029 Barcelona, Spanje \u2013 ",
-                                    React.createElement("a", { href: "#" }, "Toon kaart")),
-                                React.createElement("ul", { className: "list--usps form__room__usps" },
-                                    React.createElement("li", { className: "list__item" }, "1 tweepersoonsbed"),
-                                    React.createElement("li", { className: "list__item" }, "Max. 2 personen"),
-                                    React.createElement("li", { className: "list__item" }, "Gratis WiFi"),
-                                    React.createElement("li", { className: "list__item" }, "Airconditioning"),
-                                    React.createElement("li", { className: "list__item" }, "Eigen badkamer")),
-                                React.createElement("div", { className: "form__room__select" },
-                                    React.createElement("div", { className: "select-wrapper" },
-                                        React.createElement("div", { className: "select-wrapper__select" },
-                                            React.createElement("select", null,
-                                                React.createElement("option", { value: "KO" }, "Kamer & Ontbijt "),
-                                                React.createElement("option", { value: "LU" }, "Lunch (+ \u20AC\u00A0354,38)"),
-                                                React.createElement("option", { value: "HB" }, "Half Pension (+ \u20AC\u00A0740,25)"),
-                                                React.createElement("option", { value: "FB" }, "Vol Pension (+ \u20AC\u00A01.094,63)")))))))),
-                    React.createElement("div", { className: "form__room__footer" },
-                        React.createElement("div", { className: "form__room__footer__top" },
-                            React.createElement("p", { className: "form__room__dates" }, "01/11 - 08/11"),
-                            React.createElement("span", { className: "form__room__days" }, "8 dagen, 7nachten")),
-                        React.createElement("div", { className: "form__room__footer__bottom" },
-                            React.createElement("p", { className: "form__room__price form__room__price--increase" },
-                                "+ ",
-                                React.createElement("span", null, "\u20AC 216,00"),
-                                " p.p."),
-                            React.createElement("button", { className: "cta cta--secondary" }, "Selecteer"))))),
+            React.createElement("div", { className: "form__wrapper" }, rooms.map(function (room) { return (React.createElement(TravelerRooms, { key: room.index, index: room.index, room: room, onRoomChange: handleOnRoomChange })); })),
             React.createElement("div", { className: "booking__navigator" },
+                !settings.flightOptions.isHidden && (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: "".concat(settings.basePath).concat(settings.flightOptions.pathSuffix, "?").concat(bookingQueryString), 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)))));
 };
 
@@ -11005,8 +11958,8 @@ var Summary = function () {
                     return [4 /*yield*/, validateVoucher_1(tideClientConfig, request)];
                 case 1:
                     result = _b.sent();
-                    if (result === null || result === void 0 ? void 0 : result.payload) {
-                        setVoucher(__assign(__assign({}, voucher), { isValidated: true, isValid: result.payload.isValid }));
+                    if (result) {
+                        setVoucher(__assign(__assign({}, voucher), { isValidated: true, isValid: result.isValid }));
                     }
                     return [2 /*return*/];
             }
@@ -11538,7 +12491,7 @@ var TravelersForm = function () {
     var hasVisibleError = function (key) {
         return get$2(formik.errors, key) && get$2(formik.touched, key);
     };
-    return (React.createElement("form", { className: "form", name: "booking--travellers", id: "booking--travellers", noValidate: true, onSubmit: formik.handleSubmit, onReset: formik.handleReset },
+    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__region-header" },
@@ -11706,7 +12659,7 @@ var TravelersForm = function () {
 
 var Booking = function (_a) {
     var productCode = _a.productCode, productName = _a.productName, thumbnailUrl = _a.thumbnailUrl;
-    var _b = useContext(SettingsContext), officeId = _b.officeId, bookingOptions = _b.bookingOptions, basePath = _b.basePath, roomOptions = _b.roomOptions, flightOptions = _b.flightOptions, options = _b.options, travellers = _b.travellers, summary = _b.summary, confirmation = _b.confirmation, error = _b.error, showSidebarDeposit = _b.showSidebarDeposit, includeFlights = _b.includeFlights, loaderComponent = _b.loaderComponent, skipPaymentWithAgent = _b.skipPaymentWithAgent, generatePaymentUrl = _b.generatePaymentUrl, tagIds = _b.tagIds, agentAdressId = _b.agentAdressId, language = _b.language, translationFiles = _b.translationFiles;
+    var _b = useContext(SettingsContext), officeId = _b.officeId, bookingOptions = _b.bookingOptions, basePath = _b.basePath, roomOptions = _b.roomOptions, flightOptions = _b.flightOptions, options = _b.options, travellers = _b.travellers, summary = _b.summary, confirmation = _b.confirmation, error = _b.error, showSidebarDeposit = _b.showSidebarDeposit, includeFlights = _b.includeFlights, loaderComponent = _b.loaderComponent, skipPaymentWithAgent = _b.skipPaymentWithAgent, generatePaymentUrl = _b.generatePaymentUrl, tagIds = _b.tagIds, agentAdressId = _b.agentAdressId, language = _b.language, translationFiles = _b.translationFiles, accommodationViewId = _b.accommodationViewId;
     var dispatch = useAppDispatch();
     var location = useLocation();
     var productAttributes = useSelector(selectProductAttributes);
@@ -11730,7 +12683,7 @@ var Booking = function (_a) {
         var rooms = getRoomsFromParams(params, "rooms");
         var flight = getFlightsFromParams(params, "flight");
         var allotmentName = getStringFromParams(params, "allotmentName");
-        var allotmentIds = getNumbersFromParams(params, "allotementId");
+        var allotmentIds = getNumbersFromParams(params, "allotmentId");
         var tourCode = getStringFromParams(params, "tourCode");
         var bookingNumber = (_a = params.get("bookingNr")) !== null && _a !== void 0 ? _a : undefined;
         if (typeof window !== "undefined") {
@@ -11827,6 +12780,9 @@ var Booking = function (_a) {
         if (agentAdressId && agentAdressId != 0) {
             dispatch(setBookingType("b2b"));
         }
+        if (accommodationViewId && accommodationViewId != 0) {
+            dispatch(setAccommodationViewId(accommodationViewId));
+        }
     }, [
         officeId,
         language,
@@ -11837,6 +12793,7 @@ var Booking = function (_a) {
         setCalculateDeposit,
         tagIds,
         agentAdressId,
+        accommodationViewId
     ]);
     useEffect(function () {
         if (!productAttributes ||
@@ -11865,8 +12822,8 @@ var Booking = function (_a) {
             React.createElement("div", { className: "booking__content" },
                 React.createElement("div", { className: "booking__panel" },
                     React.createElement(Router, { basepath: basePath },
-                        !roomOptions.isHidden && roomOptions.pathSuffix && (React.createElement(StepRoute, { path: roomOptions.pathSuffix, number: numberIndex++, title: translations.STEPS.ROOM_OPTIONS, component: React.createElement(RoomOptionsForm, null) })),
                         !flightOptions.isHidden && flightOptions.pathSuffix && (React.createElement(StepRoute, { path: flightOptions.pathSuffix, number: numberIndex++, title: translations.STEPS.FLIGHT_OPTIONS, component: React.createElement(FlightOptionsForm, null) })),
+                        !roomOptions.isHidden && roomOptions.pathSuffix && (React.createElement(StepRoute, { path: roomOptions.pathSuffix, number: numberIndex++, title: translations.STEPS.ROOM_OPTIONS, component: React.createElement(RoomOptionsForm, null) })),
                         React.createElement(StepRoute, { path: options.pathSuffix, number: numberIndex++, title: translations.STEPS.EXTRA_OPTIONS, component: React.createElement(OptionsForm, null) }),
                         React.createElement(StepRoute, { path: travellers.pathSuffix, number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React.createElement(TravelersForm, null) }),
                         React.createElement(StepRoute, { path: summary.pathSuffix, number: numberIndex++, title: translations.STEPS.SUMMARY, component: React.createElement(Summary, null) }),