@qite/tide-booking-component 1.4.102 → 1.4.103

package/build/build-esm/index.js

@@ -611,6 +611,8 @@ var QSM$g = {
   GROUP_TOUR: 'جولة جماعية'
 };
 var SRP$f = {
+  SHOW_MORE: 'عرض المزيد',
+  SHOW_LESS: 'عرض أقل',
   NO_RESULTS: 'لم يتم العثور على نتائج.',
   TOTAL_RESULTS_LABEL: 'تم العثور على باقات',
   RESET: 'إعادة تعيين',
@@ -1015,6 +1017,8 @@ var QSM$f = {
   GROUP_TOUR: 'Grupperejse'
 };
 var SRP$e = {
+  SHOW_MORE: 'Vis flere',
+  SHOW_LESS: 'Vis færre',
   NO_RESULTS: 'Ingen resultater fundet.',
   TOTAL_RESULTS_LABEL: 'Fundne pakker',
   RESET: 'Nulstil',
@@ -1420,6 +1424,8 @@ var QSM$e = {
   GROUP_TOUR: 'Gruppentour'
 };
 var SRP$d = {
+  SHOW_MORE: 'Mehr anzeigen',
+  SHOW_LESS: 'Weniger anzeigen',
   NO_RESULTS: 'Keine Ergebnisse gefunden.',
   TOTAL_RESULTS_LABEL: 'Gefundene Pakete',
   RESET: 'Zurücksetzen',
@@ -1828,6 +1834,8 @@ var QSM$d = {
   GROUP_TOUR: 'Group tour'
 };
 var SRP$c = {
+  SHOW_MORE: 'Show more',
+  SHOW_LESS: 'Show less',
   NO_RESULTS: 'No results found.',
   TOTAL_RESULTS_LABEL: 'Packages found',
   RESET: 'Reset',
@@ -2233,6 +2241,8 @@ var QSM$c = {
   GROUP_TOUR: 'Tour grupal'
 };
 var SRP$b = {
+  SHOW_MORE: 'Mostrar más',
+  SHOW_LESS: 'Mostrar menos',
   NO_RESULTS: 'No se han encontrado resultados.',
   TOTAL_RESULTS_LABEL: 'Paquetes encontrados',
   RESET: 'Restablecer',
@@ -2642,6 +2652,8 @@ var QSM$b = {
   GROUP_TOUR: 'Tour en groupe'
 };
 var SRP$a = {
+  SHOW_MORE: 'Afficher plus',
+  SHOW_LESS: 'Afficher moins',
   NO_RESULTS: 'Aucun résultat trouvé.',
   TOTAL_RESULTS_LABEL: 'Forfaits trouvés',
   RESET: 'Réinitialiser',
@@ -3046,6 +3058,8 @@ var QSM$a = {
   GROUP_TOUR: 'Tour en groupe'
 };
 var SRP$9 = {
+  SHOW_MORE: 'Afficher plus',
+  SHOW_LESS: 'Afficher moins',
   NO_RESULTS: 'Aucun résultat trouvé.',
   TOTAL_RESULTS_LABEL: 'Forfaits trouvés',
   RESET: 'Réinitialiser',
@@ -3450,6 +3464,8 @@ var QSM$9 = {
   GROUP_TOUR: 'Ferð í hóp'
 };
 var SRP$8 = {
+  SHOW_MORE: 'Sýna meira',
+  SHOW_LESS: 'Sýna minna',
   NO_RESULTS: 'Engar niðurstöður fundust.',
   TOTAL_RESULTS_LABEL: 'Fundnar pakkar',
   RESET: 'Endurstilla',
@@ -3855,6 +3871,8 @@ var QSM$8 = {
   GROUP_TOUR: 'Tour di gruppo'
 };
 var SRP$7 = {
+  SHOW_MORE: 'Mostra di più',
+  SHOW_LESS: 'Mostra di meno',
   NO_RESULTS: 'Nessun risultato trovato.',
   TOTAL_RESULTS_LABEL: 'Pacchetti trovati',
   RESET: 'Reimposta',
@@ -4264,6 +4282,8 @@ var QSM$7 = {
   GROUP_TOUR: 'Groepsreis'
 };
 var SRP$6 = {
+  SHOW_MORE: 'Toon meer',
+  SHOW_LESS: 'Toon minder',
   NO_RESULTS: 'Geen resultaten gevonden.',
   TOTAL_RESULTS_LABEL: 'Gevonden pakketten',
   RESET: 'Resetten',
@@ -4669,6 +4689,8 @@ var QSM$6 = {
   GROUP_TOUR: 'Groepsreis'
 };
 var SRP$5 = {
+  SHOW_MORE: 'Toon meer',
+  SHOW_LESS: 'Toon minder',
   NO_RESULTS: 'Geen resultaten gevonden.',
   TOTAL_RESULTS_LABEL: 'Gevonden pakketten',
   RESET: 'Resetten',
@@ -5074,6 +5096,8 @@ var QSM$5 = {
   GROUP_TOUR: 'Gruppetur'
 };
 var SRP$4 = {
+  SHOW_MORE: 'Vis mer',
+  SHOW_LESS: 'Vis mindre',
   NO_RESULTS: 'Ingen resultater funnet.',
   TOTAL_RESULTS_LABEL: 'Fant pakker',
   RESET: 'Tilbakestill',
@@ -5479,6 +5503,8 @@ var QSM$4 = {
   GROUP_TOUR: 'Tour w grupie'
 };
 var SRP$3 = {
+  SHOW_MORE: 'Pokaż więcej',
+  SHOW_LESS: 'Pokaż mniej',
   NO_RESULTS: 'Nie znaleziono wyników.',
   TOTAL_RESULTS_LABEL: 'Znalezione pakiety',
   RESET: 'Resetuj',
@@ -5884,6 +5910,8 @@ var QSM$3 = {
   GROUP_TOUR: 'Tour em grupo'
 };
 var SRP$2 = {
+  SHOW_MORE: 'Mostrar mais',
+  SHOW_LESS: 'Mostrar menos',
   NO_RESULTS: 'Nenhum resultado encontrado.',
   TOTAL_RESULTS_LABEL: 'Pacotes encontrados',
   RESET: 'Redefinir',
@@ -6289,6 +6317,8 @@ var QSM$2 = {
   GROUP_TOUR: 'Gruppresa'
 };
 var SRP$1 = {
+  SHOW_MORE: 'Visa mer',
+  SHOW_LESS: 'Visa mindre',
   NO_RESULTS: 'Inga resultat hittades.',
   TOTAL_RESULTS_LABEL: 'Hittade paket',
   RESET: 'Återställ',
@@ -6692,6 +6722,8 @@ var QSM$1 = {
   GROUP_TOUR: 'グループツアー'
 };
 var SRP = {
+  SHOW_MORE: 'もっと見る',
+  SHOW_LESS: '閉じる',
   NO_RESULTS: '結果が見つかりませんでした。',
   TOTAL_RESULTS_LABEL: '見つかったパッケージ',
   RESET: 'リセット',
@@ -6898,8 +6930,8 @@ var timeFromDateTime = function (dateTime) {
     return '';
   }
   var date = new Date(dateTime);
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
+  var hours = date.getUTCHours();
+  var minutes = date.getUTCMinutes();
   return ''
     .concat(hours, ':')
     .concat(minutes < 10 ? '0' : '')
@@ -34099,7 +34131,7 @@ var Icon$1 = function (_a) {
         title && React__default.createElement('title', null, title),
         React__default.createElement('path', {
           d: 'M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z',
-          fill: 'currentColor'
+          fill: fill !== null && fill !== void 0 ? fill : 'currentColor'
         })
       );
     case 'ui-utensils':
@@ -43524,16 +43556,6 @@ var HotelAccommodationResults = function (_a) {
       : firstPackagingResult.fromDate;
   var firstResultDay = firstResultDate ? format$1(parseISO(firstResultDate), 'd') : null;
   var firstResultMonth = firstResultDate ? format$1(parseISO(firstResultDate), 'MMM') : null;
-  if (isLoading) {
-    return React__default.createElement(
-      React__default.Fragment,
-      null,
-      (_c = context.customSpinner) !== null && _c !== void 0 ? _c : React__default.createElement(Spinner, null)
-    );
-  }
-  if (mappedResults.length === 0) {
-    return React__default.createElement('div', { className: 'no-results' }, translations.SRP.NO_RESULTS);
-  }
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -43543,8 +43565,14 @@ var HotelAccommodationResults = function (_a) {
       React__default.createElement(
         'div',
         { className: 'search__results__label__date' },
-        React__default.createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
-        React__default.createElement('p', null, firstResultMonth)
+        firstResultDay && firstResultMonth
+          ? React__default.createElement(
+              React__default.Fragment,
+              null,
+              React__default.createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+              React__default.createElement('p', null, firstResultMonth)
+            )
+          : React__default.createElement(Icon$1, { name: 'ui-bed', height: 16, fill: 'white' })
       ),
       React__default.createElement(
         'div',
@@ -43552,7 +43580,14 @@ var HotelAccommodationResults = function (_a) {
         React__default.createElement('h3', null, translations.SRP.SELECT, ' ', React__default.createElement('strong', null, translations.SRP.ACCOMMODATION))
       )
     ),
-    renderHotelResults(mappedResults, context, activeTab, translations)
+    isLoading
+      ? React__default.createElement(
+          React__default.Fragment,
+          null,
+          (_c = context.customSpinner) !== null && _c !== void 0 ? _c : React__default.createElement(Spinner, null)
+        )
+      : renderHotelResults(mappedResults, context, activeTab, translations),
+    mappedResults.length === 0 && !isLoading && React__default.createElement('div', { className: 'no-results' }, translations.SRP.NO_RESULTS)
   );
 };
 
@@ -44414,24 +44449,28 @@ var PairedFlightSelection = function (_a) {
 };
 
 var IndependentFlightOption = function (_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   var item = _a.item,
     onSelect = _a.onSelect,
     guid = _a.guid,
-    selectedGuid = _a.selectedGuid;
-  _a.isOutward;
+    selectedGuid = _a.selectedGuid,
+    isOutward = _a.isOutward,
+    showSelectedState = _a.showSelectedState,
+    currentSelectedPrice = _a.currentSelectedPrice,
+    price = _a.price;
   var context = useContext(SearchResultsConfigurationContext);
   var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
   var translations = getTranslations(language);
-  var _m = useState(false),
-    detailsOpen = _m[0],
-    setDetailsOpen = _m[1];
+  var _p = useState(false),
+    detailsOpen = _p[0],
+    setDetailsOpen = _p[1];
+  var priceDifference = price && currentSelectedPrice ? price - currentSelectedPrice : null;
   return React__default.createElement(
     'div',
     { className: 'search__result-card', key: 'flight-'.concat(item.code) },
     React__default.createElement(
       'div',
-      { className: 'flight' },
+      { className: 'flight '.concat(showSelectedState && selectedGuid === guid ? 'flight--selected' : '') },
       React__default.createElement(
         'div',
         { className: 'flight__option' },
@@ -44451,6 +44490,33 @@ var IndependentFlightOption = function (_a) {
                 React__default.createElement(
                   'div',
                   { className: 'flight__price' },
+                  price != null &&
+                    price > 0 &&
+                    (isOutward
+                      ? React__default.createElement(
+                          'span',
+                          { className: 'price' },
+                          translations.QSM.ROUNDTRIP + ' ' + translations.SRP.PRICE,
+                          '\u00A0',
+                          formatPrice$2(
+                            price,
+                            'EUR',
+                            (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
+                          )
+                        )
+                      : priceDifference != null &&
+                        Math.abs(priceDifference) > 0 &&
+                        React__default.createElement(
+                          'span',
+                          { className: 'price' },
+                          priceDifference > 0 ? '+' : '-',
+                          '\u00A0',
+                          formatPrice$2(
+                            Math.abs(priceDifference),
+                            'EUR',
+                            (_d = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _d !== void 0 ? _d : 'en-GB'
+                          )
+                        )),
                   React__default.createElement(
                     'button',
                     {
@@ -44479,13 +44545,13 @@ var IndependentFlightOption = function (_a) {
                     { className: 'flight__logo__wrapper' },
                     React__default.createElement('img', {
                       src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
-                        (_c = getDepartureSegment(item)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
+                        (_e = getDepartureSegment(item)) === null || _e === void 0 ? void 0 : _e.marketingAirlineCode,
                         '.png?height=256'
                       ),
                       alt: '',
                       className: 'flight__logo'
                     }),
-                    React__default.createElement('span', null, (_d = getDepartureSegment(item)) === null || _d === void 0 ? void 0 : _d.marketingAirlineName)
+                    React__default.createElement('span', null, (_f = getDepartureSegment(item)) === null || _f === void 0 ? void 0 : _f.marketingAirlineName)
                   ),
                   React__default.createElement(
                     'div',
@@ -44496,14 +44562,14 @@ var IndependentFlightOption = function (_a) {
                       React__default.createElement(
                         'strong',
                         null,
-                        timeFromDateTime((_e = getDepartureSegment(item)) === null || _e === void 0 ? void 0 : _e.departureDateTime),
+                        timeFromDateTime((_g = getDepartureSegment(item)) === null || _g === void 0 ? void 0 : _g.departureDateTime),
                         ' ',
-                        (_f = getDepartureSegment(item)) === null || _f === void 0 ? void 0 : _f.departureAirportCode
+                        (_h = getDepartureSegment(item)) === null || _h === void 0 ? void 0 : _h.departureAirportCode
                       ),
                       React__default.createElement(
                         'p',
                         null,
-                        longFormatDate((_g = getDepartureSegment(item)) === null || _g === void 0 ? void 0 : _g.departureDateTime, language)
+                        longFormatDate((_j = getDepartureSegment(item)) === null || _j === void 0 ? void 0 : _j.departureDateTime, language)
                       )
                     ),
                     React__default.createElement(
@@ -44527,14 +44593,14 @@ var IndependentFlightOption = function (_a) {
                       React__default.createElement(
                         'strong',
                         null,
-                        timeFromDateTime((_h = getArrivalSegment(item)) === null || _h === void 0 ? void 0 : _h.arrivalDateTime),
+                        timeFromDateTime((_k = getArrivalSegment(item)) === null || _k === void 0 ? void 0 : _k.arrivalDateTime),
                         ' ',
-                        (_j = getArrivalSegment(item)) === null || _j === void 0 ? void 0 : _j.arrivalAirportCode
+                        (_l = getArrivalSegment(item)) === null || _l === void 0 ? void 0 : _l.arrivalAirportCode
                       ),
                       React__default.createElement(
                         'p',
                         null,
-                        longFormatDate((_k = getArrivalSegment(item)) === null || _k === void 0 ? void 0 : _k.arrivalDateTime, language)
+                        longFormatDate((_m = getArrivalSegment(item)) === null || _m === void 0 ? void 0 : _m.arrivalDateTime, language)
                       )
                     )
                   )
@@ -44559,9 +44625,9 @@ var IndependentFlightOption = function (_a) {
               React__default.createElement(
                 'div',
                 { className: 'flight__detail '.concat(detailsOpen ? 'flight__detail--active' : '') },
-                (_l = getFlightSegments(item)) === null || _l === void 0
+                (_o = getFlightSegments(item)) === null || _o === void 0
                   ? void 0
-                  : _l.map(function (segment, index) {
+                  : _o.map(function (segment, index) {
                       return React__default.createElement(
                         React__default.Fragment,
                         { key: 'outward-segment-'.concat(index, '-').concat(segment.flightNumber) },
@@ -46980,6 +47046,7 @@ var SearchResultsContainer = function () {
     filteredPackagingAccoResults = _c.filteredPackagingAccoResults;
   _c.bookingPackageDetails;
   var isLoading = _c.isLoading,
+    flightsLoading = _c.flightsLoading,
     filters = _c.filters,
     selectedSortType = _c.selectedSortType,
     selectedSearchResult = _c.selectedSearchResult,
@@ -47017,6 +47084,9 @@ var SearchResultsContainer = function () {
     selectedAccommodationSeed = _l[0],
     setSelectedAccommodationSeed = _l[1];
   var skipInitialPackagingAccoDetailsRef = useRef(false);
+  var _m = useState(false),
+    showAllOutwardFlights = _m[0],
+    setShowAllOutwardFlights = _m[1];
   var panelRef = useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47524,6 +47594,7 @@ var SearchResultsContainer = function () {
           case 0:
             _a.trys.push([0, 2, , 3]);
             if (!context) return [2 /*return*/, null];
+            dispatch(setIsLoading(true));
             config = {
               host: context.tideConnection.host,
               apiKey: context.tideConnection.apiKey
@@ -47531,12 +47602,13 @@ var SearchResultsContainer = function () {
             return [4 /*yield*/, build.startTransaction(config)];
           case 1:
             transaction = _a.sent();
-            console.log('Transaction started', transaction);
             dispatch(setTransactionId(transaction.transactionId));
+            dispatch(setIsLoading(false));
             return [2 /*return*/, transaction.transactionId];
           case 2:
             err_2 = _a.sent();
             console.error('Transaction failed', err_2);
+            dispatch(setIsLoading(false));
             return [2 /*return*/, null];
           case 3:
             return [2 /*return*/];
@@ -47614,7 +47686,7 @@ var SearchResultsContainer = function () {
   };
   var runFlightSearch = function (currentTransactionId, seed) {
     return __awaiter(void 0, void 0, void 0, function () {
-      var config, searchRequest, packageFlightSearchResults, err_4;
+      var config, searchRequest, packageFlightSearchResults, firstResult, err_4;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -47631,6 +47703,11 @@ var SearchResultsContainer = function () {
           case 1:
             packageFlightSearchResults = _a.sent();
             dispatch(setPackagingFlightResults(packageFlightSearchResults));
+            firstResult = first(packageFlightSearchResults);
+            if (firstResult) {
+              setSelectedOutwardKey(getFlightKey(firstResult.outward.segments));
+              setSelectedReturnKey(getFlightKey(firstResult.return.segments));
+            }
             dispatch(setFlightsLoading(false));
             return [3 /*break*/, 3];
           case 2:
@@ -47738,9 +47815,7 @@ var SearchResultsContainer = function () {
   );
   useEffect(
     function () {
-      console.log('packaging entry from context', context === null || context === void 0 ? void 0 : context.packagingEntry);
       if (context === null || context === void 0 ? void 0 : context.packagingEntry) {
-        console.log('original packaging entry from context', context.packagingEntry);
         dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
         dispatch(setTransactionId(context.packagingEntry.transactionId));
       }
@@ -47975,27 +48050,35 @@ var SearchResultsContainer = function () {
     function () {
       var fetchPriceDetails = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, priceDetails, err_7;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
+          var config, request, priceDetails, err_7;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
               case 0:
                 if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
                 setPricesAreLoading(true);
-                _a.label = 1;
+                _c.label = 1;
               case 1:
-                _a.trys.push([1, 3, , 4]);
+                _c.trys.push([1, 3, , 4]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
                 };
-                return [4 /*yield*/, build.getPriceDetails(config, editablePackagingEntry)];
+                request = {
+                  language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
+                  officeId: context.tideConnection.officeId,
+                  catalogueId: (_b = context.searchConfiguration.defaultCatalogueId) !== null && _b !== void 0 ? _b : 0,
+                  agentId: context.agentId,
+                  payload: editablePackagingEntry
+                };
+                return [4 /*yield*/, build.getPriceDetails(config, request)];
               case 2:
-                priceDetails = _a.sent();
+                priceDetails = _c.sent();
                 dispatch(setPriceDetails(priceDetails));
                 setPricesAreLoading(false);
                 return [3 /*break*/, 4];
               case 3:
-                err_7 = _a.sent();
+                err_7 = _c.sent();
                 console.error('Error fetching price details', err_7);
                 setPricesAreLoading(false);
                 return [3 /*break*/, 4];
@@ -48007,29 +48090,36 @@ var SearchResultsContainer = function () {
       };
       var fetchItinerary = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, itinerary_1, err_8;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
+          var config, request, itinerary_1, err_8;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
               case 0:
-                console.log('Fetching itinerary for entry', editablePackagingEntry);
-                if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
+                if (!context || !context.packagingEntry || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
                 setItineraryIsLoading(true);
-                _a.label = 1;
+                _c.label = 1;
               case 1:
-                _a.trys.push([1, 3, , 4]);
+                _c.trys.push([1, 3, , 4]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
                 };
-                return [4 /*yield*/, build.getItinerary(config, editablePackagingEntry)];
+                request = {
+                  language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
+                  officeId: context.tideConnection.officeId,
+                  catalogueId: (_b = context.searchConfiguration.defaultCatalogueId) !== null && _b !== void 0 ? _b : 0,
+                  agentId: context.agentId,
+                  payload: editablePackagingEntry
+                };
+                return [4 /*yield*/, build.getItinerary(config, request)];
               case 2:
-                itinerary_1 = _a.sent();
+                itinerary_1 = _c.sent();
                 console.log('Fetched itinerary', itinerary_1);
                 dispatch(setItinerary(itinerary_1));
                 setItineraryIsLoading(false);
                 return [3 /*break*/, 4];
               case 3:
-                err_8 = _a.sent();
+                err_8 = _c.sent();
                 console.error('Error fetching itinerary', err_8);
                 setItineraryIsLoading(false);
                 return [3 /*break*/, 4];
@@ -48045,12 +48135,12 @@ var SearchResultsContainer = function () {
     [editablePackagingEntry]
   );
   // Flight selection
-  var _m = useState(null),
-    selectedOutwardKey = _m[0],
-    setSelectedOutwardKey = _m[1];
   var _o = useState(null),
-    selectedReturnKey = _o[0],
-    setSelectedReturnKey = _o[1];
+    selectedOutwardKey = _o[0],
+    setSelectedOutwardKey = _o[1];
+  var _p = useState(null),
+    selectedReturnKey = _p[0],
+    setSelectedReturnKey = _p[1];
   var uniqueOutwardFlights = React__default.useMemo(
     function () {
       var map = new Map();
@@ -48064,11 +48154,12 @@ var SearchResultsContainer = function () {
     },
     [packagingFlightResults]
   );
-  var _p = useState([]),
-    uniqueReturnFlights = _p[0],
-    setUniqueReturnFlights = _p[1];
+  var _q = useState([]),
+    uniqueReturnFlights = _q[0],
+    setUniqueReturnFlights = _q[1];
   useEffect(
     function () {
+      var _a;
       if (!selectedOutwardKey) {
         setUniqueReturnFlights([]);
         setSelectedReturnKey(null);
@@ -48087,6 +48178,10 @@ var SearchResultsContainer = function () {
       });
       var returns = Array.from(returnMap.values());
       setUniqueReturnFlights(returns);
+      var firstReturnKey = returns.length > 0 ? getFlightKey((_a = first(returns)) === null || _a === void 0 ? void 0 : _a.return.segments) : null;
+      if (firstReturnKey) {
+        setSelectedReturnKey(firstReturnKey);
+      }
     },
     [selectedOutwardKey, packagingFlightResults]
   );
@@ -48155,7 +48250,6 @@ var SearchResultsContainer = function () {
             : '',
         language: (_d = context.languageCode) !== null && _d !== void 0 ? _d : 'en-GB'
       });
-      console.log('Built next packaging entry', nextEntry);
       if (!nextEntry) return;
       dispatch(setEditablePackagingEntry(nextEntry));
       if (selectedCombinationFlight) {
@@ -48371,7 +48465,6 @@ var SearchResultsContainer = function () {
           return r.code === selectedHotelCode;
         })
       : null;
-    console.log('Selected hotel for packaging entry', selectedHotel);
     // Update accommodation only when enough data exists
     if (selectedHotel) {
       var accommodationLines = buildAccommodationLinesFromSelection(selectedHotel, seed);
@@ -48383,8 +48476,6 @@ var SearchResultsContainer = function () {
     // Update flights only when full selected combination exists
     if (selectedFlight) {
       var flightLines = buildFlightLinesFromSelection(selectedFlight);
-      console.log('selectedFlight', selectedFlight);
-      console.log('Built flight lines from selection', flightLines);
       if (flightLines.length) {
         nextLines = removeFlightLines(nextLines);
         nextLines = __spreadArray(__spreadArray([], nextLines, true), flightLines, true);
@@ -48430,6 +48521,12 @@ var SearchResultsContainer = function () {
       lines: []
     };
   };
+  var visibleOutwardFlights = React__default.useMemo(
+    function () {
+      return showAllOutwardFlights ? uniqueOutwardFlights : uniqueOutwardFlights.slice(0, 3);
+    },
+    [showAllOutwardFlights, uniqueOutwardFlights]
+  );
   return React__default.createElement(
     'div',
     { id: 'tide-booking', className: 'search__bg' },
@@ -48625,32 +48722,59 @@ var SearchResultsContainer = function () {
                           )
                         )
                       ),
-                      React__default.createElement(
-                        'div',
-                        { className: 'search__results__cards search__results__cards--extended' },
-                        selectedOutwardKey && selectedOutward
-                          ? React__default.createElement(IndependentFlightOption, {
-                              key: 'flight-'.concat(selectedOutwardKey),
-                              item: selectedOutward.outward,
-                              guid: selectedOutward.outwardGuid,
-                              onSelect: function () {
-                                return setSelectedOutwardKey(null);
-                              },
-                              selectedGuid: selectedOutward.outwardGuid,
-                              isOutward: true
-                            })
-                          : uniqueOutwardFlights.map(function (result) {
-                              return React__default.createElement(IndependentFlightOption, {
-                                key: 'flight-'.concat(result.outwardGuid),
-                                item: result.outward,
-                                onSelect: function () {
-                                  return setSelectedOutwardKey(getFlightKey(result.outward.segments));
-                                },
-                                guid: result.outwardGuid,
-                                isOutward: true
-                              });
-                            })
-                      )
+                      flightsLoading
+                        ? React__default.createElement(Spinner, null)
+                        : React__default.createElement(
+                            React__default.Fragment,
+                            null,
+                            React__default.createElement(
+                              'div',
+                              { className: 'search__results__cards search__results__cards--extended' },
+                              selectedOutwardKey &&
+                                selectedOutward &&
+                                React__default.createElement(IndependentFlightOption, {
+                                  key: 'flight-'.concat(selectedOutwardKey),
+                                  item: selectedOutward.outward,
+                                  guid: selectedOutward.outwardGuid,
+                                  onSelect: function () {
+                                    return setSelectedOutwardKey(null);
+                                  },
+                                  selectedGuid: selectedOutward.outwardGuid,
+                                  isOutward: true,
+                                  showSelectedState: true,
+                                  price: selectedOutward.price
+                                }),
+                              visibleOutwardFlights.map(function (result) {
+                                return React__default.createElement(IndependentFlightOption, {
+                                  key: 'flight-'.concat(result.outwardGuid),
+                                  item: result.outward,
+                                  onSelect: function () {
+                                    return setSelectedOutwardKey(getFlightKey(result.outward.segments));
+                                  },
+                                  guid: result.outwardGuid,
+                                  isOutward: true,
+                                  price: result.price,
+                                  currentSelectedPrice: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.price
+                                });
+                              })
+                            ),
+                            uniqueOutwardFlights &&
+                              uniqueOutwardFlights.length > 3 &&
+                              React__default.createElement(
+                                'div',
+                                { className: 'search__results__cards__actions' },
+                                React__default.createElement(
+                                  'button',
+                                  {
+                                    className: 'cta cta--secondary',
+                                    onClick: function () {
+                                      return setShowAllOutwardFlights(!showAllOutwardFlights);
+                                    }
+                                  },
+                                  showAllOutwardFlights ? translations.SRP.SHOW_LESS : translations.SRP.SHOW_MORE
+                                )
+                              )
+                          )
                     ),
                   context.showHotelAccommodationResults &&
                     !context.packagingEntry &&
@@ -48686,25 +48810,30 @@ var SearchResultsContainer = function () {
                       React__default.createElement(
                         'div',
                         { className: 'search__results__cards search__results__cards--extended' },
-                        selectedReturnKey && selectedReturn
-                          ? React__default.createElement(IndependentFlightOption, {
-                              key: 'flight-'.concat(selectedReturnKey),
-                              item: selectedReturn.return,
-                              guid: selectedReturn.outwardGuid,
-                              selectedGuid: selectedReturn.outwardGuid,
-                              isOutward: false
-                            })
-                          : uniqueReturnFlights.map(function (result) {
-                              return React__default.createElement(IndependentFlightOption, {
-                                key: 'flight-'.concat(result.outwardGuid),
-                                item: result.return,
-                                onSelect: function () {
-                                  return setSelectedReturnKey(getFlightKey(result.return.segments));
-                                },
-                                guid: result.outwardGuid,
-                                isOutward: false
-                              });
-                            })
+                        selectedReturnKey &&
+                          selectedReturn &&
+                          React__default.createElement(IndependentFlightOption, {
+                            key: 'flight-'.concat(selectedReturnKey),
+                            item: selectedReturn.return,
+                            guid: selectedReturn.outwardGuid,
+                            selectedGuid: selectedReturn.outwardGuid,
+                            isOutward: false,
+                            showSelectedState: true,
+                            price: selectedReturn.price
+                          }),
+                        uniqueReturnFlights.map(function (result) {
+                          return React__default.createElement(IndependentFlightOption, {
+                            key: 'flight-'.concat(result.outwardGuid),
+                            item: result.return,
+                            onSelect: function () {
+                              return setSelectedReturnKey(getFlightKey(result.return.segments));
+                            },
+                            guid: result.outwardGuid,
+                            isOutward: false,
+                            currentSelectedPrice: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.price,
+                            price: result.price
+                          });
+                        })
                       )
                     ),
                   context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&