@qite/tide-booking-component 1.4.88 → 1.4.89

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;
@@ -38542,7 +38551,7 @@ var GroupTourFlyIn = function (_a) {
       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 +38564,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());
@@ -38712,6 +38721,7 @@ 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,
@@ -38731,7 +38741,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: '',
@@ -38814,7 +38824,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 +38903,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 +46832,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 +47351,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 +47415,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 +47587,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             ),
           (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
@@ -47734,7 +47752,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;
@@ -38365,7 +38374,7 @@ var GroupTourFlyIn = function (_a) {
       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 +38387,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());
@@ -38535,6 +38544,7 @@ 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,
@@ -38554,7 +38564,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: '',
@@ -38633,7 +38643,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 +38721,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 +46580,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 +47099,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 +47163,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 +47335,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             ),
           (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
@@ -47481,7 +47500,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.89",
   "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

@@ -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;
@@ -33,6 +34,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);
 
@@ -61,7 +67,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'
         });
       });
 
@@ -190,7 +196,6 @@ 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(selectedRoomOption?.price, roomIndex, accommodation.accommodationCode);
                   return (
                     <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
@@ -201,7 +206,7 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
                       <div className="flyin__acco__footer">
                         <ItemPicker
                           items={accommodation.regimes}
-                          selection={selectedOption?.regimeName}
+                          selection={selectedOption != null ? selectedOption.regimeName ?? 'No regime' : undefined}
                           label={''}
                           placeholder={'Select regime'}
                           classModifier=""