@qite/tide-booking-component 1.4.88 → 1.4.90

package/build/build-cjs/index.js

@@ -38514,13 +38514,22 @@ var formatPrice = function (price, currencyCode) {
   }).format(price);
 };
 var GroupTourFlyIn = function (_a) {
-  var _b;
-  _a.isLoading;
-  var isOpen = _a.isOpen,
+  var _b, _c;
+  var isLoading = _a.isLoading,
+    isOpen = _a.isOpen,
     setIsOpen = _a.setIsOpen;
   var dispatch = reactRedux.useDispatch();
   var context = React.useContext(SearchResultsConfigurationContext);
-  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  if (isLoading) {
+    return React__default['default'].createElement(
+      React__default['default'].Fragment,
+      null,
+      (_b = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _b !== void 0
+        ? _b
+        : React__default['default'].createElement(Spinner, null)
+    );
+  }
+  var language = (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB';
   var translations = getTranslations(language);
   var bookingPackageDetails = reactRedux.useSelector(function (state) {
     return state.searchResults;
@@ -38536,13 +38545,34 @@ var GroupTourFlyIn = function (_a) {
     },
     [bookingPackageDetails]
   );
+  var packageKey = ''
+    .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
+    .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
+  var initialSelectedOptionsRef = React.useRef({});
+  React.useEffect(
+    function () {
+      if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
+        return;
+      if (!initialSelectedOptionsRef.current[packageKey]) {
+        initialSelectedOptionsRef.current[packageKey] = {};
+      }
+      selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
+        if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
+          initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
+            return option.isSelected;
+          });
+        }
+      });
+    },
+    [packageKey, selectedBookingPackageDetails]
+  );
   var groupedRooms = React.useMemo(
     function () {
       if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
       return selectedBookingPackageDetails.rooms.map(function (room) {
         var groupedMap = new Map();
         room.options.forEach(function (option) {
-          var _a;
+          var _a, _b;
           var key = option.accommodationCode;
           if (!groupedMap.has(key)) {
             groupedMap.set(key, {
@@ -38555,7 +38585,7 @@ var GroupTourFlyIn = function (_a) {
             ? void 0
             : _a.regimes.push({
                 id: option.entryLineGuid,
-                label: option.regimeName
+                label: (_b = option.regimeName) !== null && _b !== void 0 ? _b : 'No regime'
               });
         });
         return Array.from(groupedMap.values());
@@ -38563,19 +38593,14 @@ var GroupTourFlyIn = function (_a) {
     },
     [selectedBookingPackageDetails]
   );
-  if (!bookingPackageDetails) {
+  if (!bookingPackageDetails || !selectedBookingPackageDetails) {
     return null;
   }
   var getSelectedOptionForRoom = function (roomIndex) {
     var _a, _b, _c;
     return (_c =
-      (_b =
-        (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
-        _a === void 0
-          ? void 0
-          : _a[roomIndex]) === null || _b === void 0
-        ? void 0
-        : _b.options) === null || _c === void 0
+      (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
+      null || _c === void 0
       ? void 0
       : _c.find(function (option) {
           return option.isSelected;
@@ -38584,18 +38609,18 @@ var GroupTourFlyIn = function (_a) {
   var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
     var _a, _b, _c;
     return (_c =
-      (_b =
-        (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
-        _a === void 0
-          ? void 0
-          : _a[roomIndex]) === null || _b === void 0
-        ? void 0
-        : _b.options) === null || _c === void 0
+      (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
+      null || _c === void 0
       ? void 0
       : _c.find(function (option) {
           return option.accommodationCode === accommodationCode && option.isSelected;
         });
   };
+  var getInitialSelectedOptionForRoom = function (roomIndex) {
+    var _a;
+    if (!packageKey) return undefined;
+    return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
+  };
   var handlePick = function (roomIndex, selectedGuid) {
     if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
     var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38623,52 +38648,39 @@ var GroupTourFlyIn = function (_a) {
     if (isOpen) {
       setIsOpen(false);
     }
-    console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
     if (context === null || context === void 0 ? void 0 : context.onBook) {
       context.onBook(bookingPackageDetails);
     }
   };
-  var calculateTotalPrice = function () {
-    var selectedOptions =
-      selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
-        ? void 0
-        : selectedBookingPackageDetails.rooms.flatMap(function (room) {
-            return room.options.filter(function (option) {
-              return option.isSelected;
+  var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
+    var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
+    var targetOption;
+    if (regimeId) {
+      targetOption =
+        (_c =
+          (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
+            ? void 0
+            : _b.options) === null || _c === void 0
+          ? void 0
+          : _c.find(function (option) {
+              return option.entryLineGuid === regimeId;
             });
-          });
-    var totalPrice =
-      selectedOptions === null || selectedOptions === void 0
-        ? void 0
-        : selectedOptions.reduce(function (total, option) {
-            return total + (option.price || 0);
-          }, 0);
-    return formatPrice(totalPrice, bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode);
-  };
-  var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
-    var targetPrice = 0;
-    var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
-    if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
-      targetPrice = selectedOption.price;
     } else {
-      var firstOption =
-        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
+      targetOption =
+        (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
+          ? _d
+          : (_g =
+              (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
+                ? void 0
+                : _f.options) === null || _g === void 0
           ? void 0
-          : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
+          : _g.find(function (option) {
               return option.accommodationCode === accommodationCode;
             });
-      targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
-    }
-    if (regimeId) {
-      var regimeOption =
-        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
-          ? void 0
-          : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
-              return option.entryLineGuid === regimeId;
-            });
-      targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
     }
-    return targetPrice - (currentSelectedPrice || 0);
+    return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
   };
   var formatPriceDifference = function (difference, currencyCode) {
     if (difference === 0) {
@@ -38687,15 +38699,28 @@ var GroupTourFlyIn = function (_a) {
     return 'flyin__acco__price';
   };
   var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
-    var roomOption = getSelectedOptionForRoom(roomIndex);
-    var difference = getPriceDifference(
-      roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
-      roomIndex,
-      accommodation.accommodationCode,
-      regimeId
-    );
+    var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
     return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
   };
+  var adjustedTotalPrice = React.useMemo(
+    function () {
+      if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
+        return 0;
+      }
+      var basePrice = selectedBookingPackageDetails.price;
+      var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
+        var initialOption = getInitialSelectedOptionForRoom(roomIndex);
+        var currentOption = room.options.find(function (option) {
+          return option.isSelected;
+        });
+        var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
+        var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
+        return sum + (currentPrice - initialPrice);
+      }, 0);
+      return basePrice + totalDelta;
+    },
+    [selectedBookingPackageDetails, packageKey]
+  );
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
@@ -38712,12 +38737,9 @@ var GroupTourFlyIn = function (_a) {
             'div',
             { className: 'flyin__acco__cards' },
             roomAccommodations.map(function (accommodation) {
+              var _a;
               var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
-              var priceDifference = getPriceDifference(
-                selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
-                roomIndex,
-                accommodation.accommodationCode
-              );
+              var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
               return React__default['default'].createElement(
                 'div',
                 { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38731,7 +38753,7 @@ var GroupTourFlyIn = function (_a) {
                   { className: 'flyin__acco__footer' },
                   React__default['default'].createElement(ItemPicker$1, {
                     items: accommodation.regimes,
-                    selection: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeName,
+                    selection: selectedOption != null ? ((_a = selectedOption.regimeName) !== null && _a !== void 0 ? _a : 'No regime') : undefined,
                     label: '',
                     placeholder: 'Select regime',
                     classModifier: '',
@@ -38749,7 +38771,7 @@ var GroupTourFlyIn = function (_a) {
                       'button',
                       {
                         className:
-                          (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                          (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
                           accommodation.accommodationCode
                             ? 'cta cta--select cta--selected'
                             : 'cta cta--select',
@@ -38765,7 +38787,7 @@ var GroupTourFlyIn = function (_a) {
                           );
                         }
                       },
-                      (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                      (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
                         accommodation.accommodationCode
                         ? translations === null || translations === void 0
                           ? void 0
@@ -38780,10 +38802,7 @@ var GroupTourFlyIn = function (_a) {
                       React__default['default'].createElement(
                         'span',
                         { className: getPriceDifferenceClassName(priceDifference) },
-                        formatPriceDifference(
-                          priceDifference,
-                          bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
-                        )
+                        formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
                       )
                     )
                   )
@@ -38797,7 +38816,12 @@ var GroupTourFlyIn = function (_a) {
     React__default['default'].createElement(
       'div',
       { className: 'flyin__footer' },
-      React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
+      React__default['default'].createElement(
+        'div',
+        { className: 'flyin__footer__price' },
+        'Total price: ',
+        formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
+      ),
       React__default['default'].createElement(
         'div',
         { className: 'flyin__button-wrapper' },
@@ -38814,7 +38838,8 @@ var FlyIn = function (_a) {
     setIsOpen = _a.setIsOpen,
     _b = _a.className,
     className = _b === void 0 ? '' : _b,
-    onPanelRef = _a.onPanelRef;
+    onPanelRef = _a.onPanelRef,
+    detailsLoading = _a.detailsLoading;
   var dispatch = reactRedux.useDispatch();
   var onCancelSearch = useFlightSearch().onCancelSearch;
   var panelRef = React.useRef(null);
@@ -38892,7 +38917,7 @@ var FlyIn = function (_a) {
       srpType === build.PortalQsmType.Accommodation &&
         React__default['default'].createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen }),
       srpType === build.PortalQsmType.GroupTour &&
-        React__default['default'].createElement(GroupTourFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
+        React__default['default'].createElement(GroupTourFlyIn, { isLoading: detailsLoading, isOpen: isOpen, setIsOpen: setIsOpen })
     )
   );
 };
@@ -46821,8 +46846,11 @@ var SearchResultsContainer = function () {
     filtersOpen = _e[0],
     setFiltersOpen = _e[1];
   var _f = React.useState(false),
-    itineraryOpen = _f[0],
-    setItineraryOpen = _f[1];
+    detailsIsLoading = _f[0],
+    setDetailsIsLoading = _f[1];
+  var _g = React.useState(false),
+    itineraryOpen = _g[0],
+    setItineraryOpen = _g[1];
   var panelRef = React.useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47337,6 +47365,7 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
+                setDetailsIsLoading(true);
                 console.log('Fetching details for selected search result', selectedSearchResult);
                 if (!selectedSearchResult || !context) return [2 /*return*/];
                 if (
@@ -47400,12 +47429,14 @@ var SearchResultsContainer = function () {
               case 4:
                 detailsResponse = _a.sent();
                 dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
+                setDetailsIsLoading(false);
                 _a.label = 5;
               case 5:
                 return [3 /*break*/, 7];
               case 6:
                 err_3 = _a.sent();
                 console.error('Failed to fetch package details', err_3);
+                setDetailsIsLoading(false);
                 return [3 /*break*/, 7];
               case 7:
                 return [2 /*return*/];
@@ -47570,7 +47601,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             ),
           (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
@@ -47734,7 +47766,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             )
         )

package/build/build-cjs/src/shared/components/flyin/flyin.d.ts

@@ -7,6 +7,7 @@ type FlyInProps = {
   setIsOpen: (open: boolean) => void;
   className?: string;
   onPanelRef?: (el: HTMLDivElement | null) => void;
+  detailsLoading: boolean;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/build/build-esm/index.js

@@ -38337,13 +38337,22 @@ var formatPrice = function (price, currencyCode) {
   }).format(price);
 };
 var GroupTourFlyIn = function (_a) {
-  var _b;
-  _a.isLoading;
-  var isOpen = _a.isOpen,
+  var _b, _c;
+  var isLoading = _a.isLoading,
+    isOpen = _a.isOpen,
     setIsOpen = _a.setIsOpen;
   var dispatch = useDispatch();
   var context = useContext(SearchResultsConfigurationContext);
-  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  if (isLoading) {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      (_b = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _b !== void 0
+        ? _b
+        : React__default.createElement(Spinner, null)
+    );
+  }
+  var language = (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB';
   var translations = getTranslations(language);
   var bookingPackageDetails = useSelector(function (state) {
     return state.searchResults;
@@ -38359,13 +38368,34 @@ var GroupTourFlyIn = function (_a) {
     },
     [bookingPackageDetails]
   );
+  var packageKey = ''
+    .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
+    .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
+  var initialSelectedOptionsRef = useRef({});
+  useEffect(
+    function () {
+      if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
+        return;
+      if (!initialSelectedOptionsRef.current[packageKey]) {
+        initialSelectedOptionsRef.current[packageKey] = {};
+      }
+      selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
+        if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
+          initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
+            return option.isSelected;
+          });
+        }
+      });
+    },
+    [packageKey, selectedBookingPackageDetails]
+  );
   var groupedRooms = useMemo(
     function () {
       if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
       return selectedBookingPackageDetails.rooms.map(function (room) {
         var groupedMap = new Map();
         room.options.forEach(function (option) {
-          var _a;
+          var _a, _b;
           var key = option.accommodationCode;
           if (!groupedMap.has(key)) {
             groupedMap.set(key, {
@@ -38378,7 +38408,7 @@ var GroupTourFlyIn = function (_a) {
             ? void 0
             : _a.regimes.push({
                 id: option.entryLineGuid,
-                label: option.regimeName
+                label: (_b = option.regimeName) !== null && _b !== void 0 ? _b : 'No regime'
               });
         });
         return Array.from(groupedMap.values());
@@ -38386,19 +38416,14 @@ var GroupTourFlyIn = function (_a) {
     },
     [selectedBookingPackageDetails]
   );
-  if (!bookingPackageDetails) {
+  if (!bookingPackageDetails || !selectedBookingPackageDetails) {
     return null;
   }
   var getSelectedOptionForRoom = function (roomIndex) {
     var _a, _b, _c;
     return (_c =
-      (_b =
-        (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
-        _a === void 0
-          ? void 0
-          : _a[roomIndex]) === null || _b === void 0
-        ? void 0
-        : _b.options) === null || _c === void 0
+      (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
+      null || _c === void 0
       ? void 0
       : _c.find(function (option) {
           return option.isSelected;
@@ -38407,18 +38432,18 @@ var GroupTourFlyIn = function (_a) {
   var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
     var _a, _b, _c;
     return (_c =
-      (_b =
-        (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
-        _a === void 0
-          ? void 0
-          : _a[roomIndex]) === null || _b === void 0
-        ? void 0
-        : _b.options) === null || _c === void 0
+      (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
+      null || _c === void 0
       ? void 0
       : _c.find(function (option) {
           return option.accommodationCode === accommodationCode && option.isSelected;
         });
   };
+  var getInitialSelectedOptionForRoom = function (roomIndex) {
+    var _a;
+    if (!packageKey) return undefined;
+    return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
+  };
   var handlePick = function (roomIndex, selectedGuid) {
     if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
     var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38446,52 +38471,39 @@ var GroupTourFlyIn = function (_a) {
     if (isOpen) {
       setIsOpen(false);
     }
-    console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
     if (context === null || context === void 0 ? void 0 : context.onBook) {
       context.onBook(bookingPackageDetails);
     }
   };
-  var calculateTotalPrice = function () {
-    var selectedOptions =
-      selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
-        ? void 0
-        : selectedBookingPackageDetails.rooms.flatMap(function (room) {
-            return room.options.filter(function (option) {
-              return option.isSelected;
+  var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
+    var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
+    var targetOption;
+    if (regimeId) {
+      targetOption =
+        (_c =
+          (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
+            ? void 0
+            : _b.options) === null || _c === void 0
+          ? void 0
+          : _c.find(function (option) {
+              return option.entryLineGuid === regimeId;
             });
-          });
-    var totalPrice =
-      selectedOptions === null || selectedOptions === void 0
-        ? void 0
-        : selectedOptions.reduce(function (total, option) {
-            return total + (option.price || 0);
-          }, 0);
-    return formatPrice(totalPrice, bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode);
-  };
-  var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
-    var targetPrice = 0;
-    var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
-    if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
-      targetPrice = selectedOption.price;
     } else {
-      var firstOption =
-        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
+      targetOption =
+        (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
+          ? _d
+          : (_g =
+              (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
+                ? void 0
+                : _f.options) === null || _g === void 0
           ? void 0
-          : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
+          : _g.find(function (option) {
               return option.accommodationCode === accommodationCode;
             });
-      targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
-    }
-    if (regimeId) {
-      var regimeOption =
-        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
-          ? void 0
-          : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
-              return option.entryLineGuid === regimeId;
-            });
-      targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
     }
-    return targetPrice - (currentSelectedPrice || 0);
+    return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
   };
   var formatPriceDifference = function (difference, currencyCode) {
     if (difference === 0) {
@@ -38510,15 +38522,28 @@ var GroupTourFlyIn = function (_a) {
     return 'flyin__acco__price';
   };
   var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
-    var roomOption = getSelectedOptionForRoom(roomIndex);
-    var difference = getPriceDifference(
-      roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
-      roomIndex,
-      accommodation.accommodationCode,
-      regimeId
-    );
+    var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
     return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
   };
+  var adjustedTotalPrice = useMemo(
+    function () {
+      if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
+        return 0;
+      }
+      var basePrice = selectedBookingPackageDetails.price;
+      var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
+        var initialOption = getInitialSelectedOptionForRoom(roomIndex);
+        var currentOption = room.options.find(function (option) {
+          return option.isSelected;
+        });
+        var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
+        var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
+        return sum + (currentPrice - initialPrice);
+      }, 0);
+      return basePrice + totalDelta;
+    },
+    [selectedBookingPackageDetails, packageKey]
+  );
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -38535,12 +38560,9 @@ var GroupTourFlyIn = function (_a) {
             'div',
             { className: 'flyin__acco__cards' },
             roomAccommodations.map(function (accommodation) {
+              var _a;
               var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
-              var priceDifference = getPriceDifference(
-                selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
-                roomIndex,
-                accommodation.accommodationCode
-              );
+              var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
               return React__default.createElement(
                 'div',
                 { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38554,7 +38576,7 @@ var GroupTourFlyIn = function (_a) {
                   { className: 'flyin__acco__footer' },
                   React__default.createElement(ItemPicker$1, {
                     items: accommodation.regimes,
-                    selection: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeName,
+                    selection: selectedOption != null ? ((_a = selectedOption.regimeName) !== null && _a !== void 0 ? _a : 'No regime') : undefined,
                     label: '',
                     placeholder: 'Select regime',
                     classModifier: '',
@@ -38572,7 +38594,7 @@ var GroupTourFlyIn = function (_a) {
                       'button',
                       {
                         className:
-                          (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                          (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
                           accommodation.accommodationCode
                             ? 'cta cta--select cta--selected'
                             : 'cta cta--select',
@@ -38584,7 +38606,7 @@ var GroupTourFlyIn = function (_a) {
                           );
                         }
                       },
-                      (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                      (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
                         accommodation.accommodationCode
                         ? translations === null || translations === void 0
                           ? void 0
@@ -38599,10 +38621,7 @@ var GroupTourFlyIn = function (_a) {
                       React__default.createElement(
                         'span',
                         { className: getPriceDifferenceClassName(priceDifference) },
-                        formatPriceDifference(
-                          priceDifference,
-                          bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
-                        )
+                        formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
                       )
                     )
                   )
@@ -38616,7 +38635,12 @@ var GroupTourFlyIn = function (_a) {
     React__default.createElement(
       'div',
       { className: 'flyin__footer' },
-      React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
+      React__default.createElement(
+        'div',
+        { className: 'flyin__footer__price' },
+        'Total price: ',
+        formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
+      ),
       React__default.createElement(
         'div',
         { className: 'flyin__button-wrapper' },
@@ -38633,7 +38657,8 @@ var FlyIn = function (_a) {
     setIsOpen = _a.setIsOpen,
     _b = _a.className,
     className = _b === void 0 ? '' : _b,
-    onPanelRef = _a.onPanelRef;
+    onPanelRef = _a.onPanelRef,
+    detailsLoading = _a.detailsLoading;
   var dispatch = useDispatch();
   var onCancelSearch = useFlightSearch().onCancelSearch;
   var panelRef = useRef(null);
@@ -38710,7 +38735,8 @@ var FlyIn = function (_a) {
       srpType === build.PortalQsmType.Flight && React__default.createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
       srpType === build.PortalQsmType.Accommodation &&
         React__default.createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen }),
-      srpType === build.PortalQsmType.GroupTour && React__default.createElement(GroupTourFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
+      srpType === build.PortalQsmType.GroupTour &&
+        React__default.createElement(GroupTourFlyIn, { isLoading: detailsLoading, isOpen: isOpen, setIsOpen: setIsOpen })
     )
   );
 };
@@ -46568,8 +46594,11 @@ var SearchResultsContainer = function () {
     filtersOpen = _e[0],
     setFiltersOpen = _e[1];
   var _f = useState(false),
-    itineraryOpen = _f[0],
-    setItineraryOpen = _f[1];
+    detailsIsLoading = _f[0],
+    setDetailsIsLoading = _f[1];
+  var _g = useState(false),
+    itineraryOpen = _g[0],
+    setItineraryOpen = _g[1];
   var panelRef = useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47084,6 +47113,7 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
+                setDetailsIsLoading(true);
                 console.log('Fetching details for selected search result', selectedSearchResult);
                 if (!selectedSearchResult || !context) return [2 /*return*/];
                 if (
@@ -47147,12 +47177,14 @@ var SearchResultsContainer = function () {
               case 4:
                 detailsResponse = _a.sent();
                 dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
+                setDetailsIsLoading(false);
                 _a.label = 5;
               case 5:
                 return [3 /*break*/, 7];
               case 6:
                 err_3 = _a.sent();
                 console.error('Failed to fetch package details', err_3);
+                setDetailsIsLoading(false);
                 return [3 /*break*/, 7];
               case 7:
                 return [2 /*return*/];
@@ -47317,7 +47349,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             ),
           (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
@@ -47481,7 +47514,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             )
         )

package/build/build-esm/src/shared/components/flyin/flyin.d.ts

@@ -7,6 +7,7 @@ type FlyInProps = {
   setIsOpen: (open: boolean) => void;
   className?: string;
   onPanelRef?: (el: HTMLDivElement | null) => void;
+  detailsLoading: boolean;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.88",
+  "version": "1.4.90",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -89,6 +89,8 @@ const SearchResultsContainer: React.FC = () => {
   const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
   const [filtersOpen, setFiltersOpen] = useState(false);
 
+  const [detailsIsLoading, setDetailsIsLoading] = useState(false);
+
   const [itineraryOpen, setItineraryOpen] = useState(false);
 
   const panelRef = useRef<HTMLDivElement | null>(null);
@@ -577,6 +579,7 @@ const SearchResultsContainer: React.FC = () => {
   // Seperate detailsCall
   useEffect(() => {
     const fetchDetails = async () => {
+      setDetailsIsLoading(true);
       console.log('Fetching details for selected search result', selectedSearchResult);
       if (!selectedSearchResult || !context) return;
       if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
@@ -639,9 +642,11 @@ const SearchResultsContainer: React.FC = () => {
 
           const detailsResponse = await details(config, detailsRequest);
           dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
+          setDetailsIsLoading(false);
         }
       } catch (err) {
         console.error('Failed to fetch package details', err);
+        setDetailsIsLoading(false);
       }
     };
 
@@ -763,6 +768,7 @@ const SearchResultsContainer: React.FC = () => {
                   isOpen={flyInIsOpen}
                   setIsOpen={handleFlyInToggle}
                   onPanelRef={(el) => (panelRef.current = el)}
+                  detailsLoading={detailsIsLoading}
                 />
               </FlightSearchProvider>
             )}
@@ -871,6 +877,7 @@ const SearchResultsContainer: React.FC = () => {
                   isOpen={flyInIsOpen}
                   setIsOpen={handleFlyInToggle}
                   onPanelRef={(el) => (panelRef.current = el)}
+                  detailsLoading={detailsIsLoading}
                 />
               </>
             )}

package/src/shared/components/flyin/flyin.tsx

@@ -15,9 +15,10 @@ type FlyInProps = {
   setIsOpen: (open: boolean) => void;
   className?: string;
   onPanelRef?: (el: HTMLDivElement | null) => void;
+  detailsLoading: boolean;
 };
 
-const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, className = '', onPanelRef }) => {
+const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, className = '', onPanelRef, detailsLoading }) => {
   const dispatch = useDispatch();
   const { onCancelSearch } = useFlightSearch();
   const panelRef = useRef<HTMLDivElement>(null);
@@ -72,7 +73,7 @@ const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, classN
         </div>
         {srpType === PortalQsmType.Flight && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
         {srpType === PortalQsmType.Accommodation && <AccommodationFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
-        {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
+        {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={detailsLoading} isOpen={isOpen} setIsOpen={setIsOpen} />}
       </div>
     </div>
   );

package/src/shared/components/flyin/group-tour-flyin.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useRef, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import ItemPicker from '../../../qsm/components/item-picker';
 import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
@@ -8,6 +8,7 @@ import { setBookingPackageDetails } from '../../../search-results/store/search-r
 import { BookingPackageOption } from '@qite/tide-client';
 import { PickerItem } from '../../types';
 import { first } from 'lodash';
+import Spinner from '../../../search-results/components/spinner/spinner';
 
 type GroupTourFlyInProps = {
   isLoading: boolean;
@@ -21,6 +22,8 @@ type GroupedAccommodation = {
   regimes: PickerItem[];
 };
 
+type RoomOption = BookingPackageOption['rooms'][number]['options'][number];
+
 const formatPrice = (price?: number, currencyCode = 'EUR') => {
   if (typeof price !== 'number') return '';
 
@@ -33,6 +36,11 @@ const formatPrice = (price?: number, currencyCode = 'EUR') => {
 const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
   const dispatch = useDispatch();
   const context = useContext(SearchResultsConfigurationContext);
+
+  if (isLoading) {
+    return <>{context?.customSpinner ?? <Spinner />}</>;
+  }
+
   const language = context?.languageCode ?? 'en-GB';
   const translations = getTranslations(language);
 
@@ -42,6 +50,24 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
     return bookingPackageDetails?.options?.find((x) => x.isSelected);
   }, [bookingPackageDetails]);
 
+  const packageKey = `${bookingPackageDetails?.transactionId}-${selectedBookingPackageDetails?.id}`;
+
+  const initialSelectedOptionsRef = useRef<Record<string, Record<number, RoomOption | undefined>>>({});
+
+  useEffect(() => {
+    if (!packageKey || !selectedBookingPackageDetails?.rooms) return;
+
+    if (!initialSelectedOptionsRef.current[packageKey]) {
+      initialSelectedOptionsRef.current[packageKey] = {};
+    }
+
+    selectedBookingPackageDetails.rooms.forEach((room, roomIndex) => {
+      if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
+        initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find((option) => option.isSelected);
+      }
+    });
+  }, [packageKey, selectedBookingPackageDetails]);
+
   const groupedRooms = useMemo(() => {
     if (!selectedBookingPackageDetails?.rooms) return [];
 
@@ -61,7 +87,7 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
 
         groupedMap.get(key)?.regimes.push({
           id: option.entryLineGuid,
-          label: option.regimeName
+          label: option.regimeName ?? 'No regime'
         });
       });
 
@@ -69,16 +95,21 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
     });
   }, [selectedBookingPackageDetails]);
 
-  if (!bookingPackageDetails) {
+  if (!bookingPackageDetails || !selectedBookingPackageDetails) {
     return null;
   }
 
   const getSelectedOptionForRoom = (roomIndex: number) => {
-    return selectedBookingPackageDetails?.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
+    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
   };
 
   const getSelectedOptionForAccommodation = (roomIndex: number, accommodationCode: string) => {
-    return selectedBookingPackageDetails?.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
+    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
+  };
+
+  const getInitialSelectedOptionForRoom = (roomIndex: number) => {
+    if (!packageKey) return undefined;
+    return initialSelectedOptionsRef.current[packageKey]?.[roomIndex];
   };
 
   const handlePick = (roomIndex: number, selectedGuid?: string) => {
@@ -117,36 +148,27 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
     if (isOpen) {
       setIsOpen(false);
     }
-    console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
+
     if (context?.onBook) {
       context.onBook(bookingPackageDetails);
     }
   };
 
-  const calculateTotalPrice = () => {
-    const selectedOptions = selectedBookingPackageDetails?.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
-    const totalPrice = selectedOptions?.reduce((total, option) => total + (option.price || 0), 0);
-    return formatPrice(totalPrice, bookingPackageDetails?.currencyCode);
-  };
+  const getPriceDifference = (roomIndex: number, accommodationCode: string, regimeId?: string) => {
+    const currentSelectedOption = getSelectedOptionForRoom(roomIndex);
+    const currentSelectedPrice = currentSelectedOption?.price || 0;
 
-  const getPriceDifference = (currentSelectedPrice: number | undefined, roomIndex: number, accommodationCode: string, regimeId?: string) => {
-    let targetPrice = 0;
-
-    const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
-
-    if (selectedOption?.price) {
-      targetPrice = selectedOption.price;
-    } else {
-      const firstOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.accommodationCode === accommodationCode);
-      targetPrice = firstOption?.price || 0;
-    }
+    let targetOption;
 
     if (regimeId) {
-      const regimeOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.entryLineGuid === regimeId);
-      targetPrice = regimeOption?.price || 0;
+      targetOption = selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.entryLineGuid === regimeId);
+    } else {
+      targetOption =
+        getSelectedOptionForAccommodation(roomIndex, accommodationCode) ??
+        selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode);
     }
 
-    return targetPrice - (currentSelectedPrice || 0);
+    return (targetOption?.price || 0) - currentSelectedPrice;
   };
 
   const formatPriceDifference = (difference: number, currencyCode: string) => {
@@ -171,13 +193,30 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
   };
 
   const regimeFormatter = (roomIndex: number, accommodation: GroupedAccommodation, regimeId: string, label: string) => {
-    const roomOption = getSelectedOptionForRoom(roomIndex);
-
-    const difference = getPriceDifference(roomOption?.price, roomIndex, accommodation.accommodationCode, regimeId);
-
+    const difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
     return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, bookingPackageDetails.currencyCode)})` : ''}`;
   };
 
+  const adjustedTotalPrice = useMemo(() => {
+    if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
+      return 0;
+    }
+
+    const basePrice = selectedBookingPackageDetails.price;
+
+    const totalDelta = selectedBookingPackageDetails.rooms.reduce((sum, room, roomIndex) => {
+      const initialOption = getInitialSelectedOptionForRoom(roomIndex);
+      const currentOption = room.options.find((option) => option.isSelected);
+
+      const initialPrice = initialOption?.price || 0;
+      const currentPrice = currentOption?.price || 0;
+
+      return sum + (currentPrice - initialPrice);
+    }, 0);
+
+    return basePrice + totalDelta;
+  }, [selectedBookingPackageDetails, packageKey]);
+
   return (
     <>
       <div className="flyin__content">
@@ -190,8 +229,8 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
               <div className="flyin__acco__cards">
                 {roomAccommodations.map((accommodation) => {
                   const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
+                  const priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
 
-                  const priceDifference = getPriceDifference(selectedRoomOption?.price, roomIndex, accommodation.accommodationCode);
                   return (
                     <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
                       <div className="flyin__acco__content">
@@ -201,9 +240,9 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
                       <div className="flyin__acco__footer">
                         <ItemPicker
                           items={accommodation.regimes}
-                          selection={selectedOption?.regimeName}
-                          label={''}
-                          placeholder={'Select regime'}
+                          selection={selectedOption != null ? selectedOption.regimeName ?? 'No regime' : undefined}
+                          label=""
+                          placeholder="Select regime"
                           classModifier=""
                           onPick={(selected, selectedGuid) => handlePick(roomIndex, selectedGuid)}
                           valueFormatter={(id, label) => regimeFormatter(roomIndex, accommodation, id, label)}
@@ -212,19 +251,19 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
                         <div className="flyin__acco__footer__actions">
                           <button
                             className={
-                              selectedRoomOption?.accommodationCode == accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
+                              selectedRoomOption?.accommodationCode === accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
                             }
                             onClick={() => {
                               handlePick(roomIndex, selectedOption ? selectedOption.entryLineGuid : first(accommodation.regimes)?.id);
                             }}>
-                            {selectedRoomOption?.accommodationCode == accommodation.accommodationCode
+                            {selectedRoomOption?.accommodationCode === accommodation.accommodationCode
                               ? translations?.SHARED.SELECTED
                               : translations?.SHARED.SELECT}
                           </button>
 
                           <div className="flyin__acco__price__wrapper">
                             <span className={getPriceDifferenceClassName(priceDifference)}>
-                              {formatPriceDifference(priceDifference, bookingPackageDetails?.currencyCode)}
+                              {formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)}
                             </span>
                           </div>
                         </div>
@@ -239,7 +278,7 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
       </div>
 
       <div className="flyin__footer">
-        <div className="flyin__footer__price">Total price: {calculateTotalPrice()}</div>
+        <div className="flyin__footer__price">Total price: {formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)}</div>
 
         <div className="flyin__button-wrapper">
           <button className="cta cta--select" onClick={handleConfirm}>