@qite/tide-booking-component 1.4.71 → 1.4.73

package/build/build-cjs/index.js

@@ -12915,6 +12915,7 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT_PORTAL = function (portalId) {
     return ENDPOINT$4 + '/portal/' + portalId;
   };
+  var ENDPOINT_AIRPORT = '/api/web/entity/airport';
   /**
    * api/search/countries
    * Gets all Countries
@@ -12927,6 +12928,13 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var searchCountries = function (config, searchTerm, signal) {
+    var apiKey = config.apiKey;
+    var safeSearch = searchTerm.replace(/'/g, "''");
+    var filter = "$skip=0&$top=20&$orderby=name%20asc&$filter=contains(name,'" + safeSearch.toLowerCase() + "')";
+    var url = '' + config.host + ENDPOINT_COUNTRIES + '?' + filter;
+    return get(url, apiKey, config.token, signal, true);
+  };
   var searchRegions = function (config, searchTerm, signal) {
     var apiKey = config.apiKey;
     var safeSearch = searchTerm.replace(/'/g, "''");
@@ -12953,6 +12961,11 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var getAirports = function (config, signal) {
+    var url = '' + config.host + ENDPOINT_AIRPORT;
+    var apiKey = config.apiKey;
+    return get(url, apiKey, config.token, signal, true);
+  };
 
   var createParams = function (filter, all, gridColumns, mode, forceToLower) {
     var params = {};
@@ -13332,6 +13345,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.forgotPassword = forgotPassword;
   exports.generateBookingAccommodations = generateBookingAccommodations;
   exports.getAffiliates = getAffiliates;
+  exports.getAirports = getAirports;
   exports.getAllotment = getAllotment;
   exports.getAllotmentAvailability = getAllotmentAvailability;
   exports.getAllotmentList = getAllotmentList;
@@ -13356,6 +13370,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.print = print;
   exports.resetPassword = resetPassword;
   exports.search = search;
+  exports.searchCountries = searchCountries;
   exports.searchElastic = searchElastic;
   exports.searchFlightPool = searchFlightPool;
   exports.searchLocations = searchLocations;
@@ -31080,6 +31095,24 @@ var Icon$2 = function (_a) {
   }
 };
 
+var SearchResultsConfigurationContext = React__default['default'].createContext(undefined);
+
+var Spinner = function () {
+  var _a;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
+  return React__default['default'].createElement(
+    'div',
+    { className: 'spinner__container' },
+    React__default['default'].createElement('span', { className: 'spinner__icon' }),
+    React__default['default'].createElement(
+      'span',
+      { className: 'spinner__label' },
+      translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING
+    )
+  );
+};
+
 var SearchInput = function (_a) {
   var searchResults = _a.searchResults,
     onOptionSelect = _a.onOptionSelect,
@@ -31087,7 +31120,8 @@ var SearchInput = function (_a) {
   _a.label;
   var isSecondInput = _a.isSecondInput,
     isDoubleInput = _a.isDoubleInput,
-    isDisabled = _a.isDisabled;
+    isDisabled = _a.isDisabled,
+    isLoading = _a.isLoading;
   if (isDisabled) {
     return null;
   }
@@ -31106,9 +31140,9 @@ var SearchInput = function (_a) {
       })
     );
   };
-  if (searchResults.length === 0) {
-    return null;
-  }
+  // if (searchResults.length === 0) {
+  //   return null;
+  // }
   return React__default['default'].createElement(
     'div',
     {
@@ -31116,6 +31150,7 @@ var SearchInput = function (_a) {
         .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
         .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
     },
+    isLoading && React__default['default'].createElement(Spinner, null),
     searchResults.map(function (option, index) {
       return React__default['default'].createElement(
         'div',
@@ -32443,6 +32478,9 @@ var SearchInputGroup = function (_a) {
     placeholder = fieldConfig.placeholder,
     options = fieldConfig.options,
     autoComplete = fieldConfig.autoComplete;
+  var _j = React.useState(false),
+    isLoading = _j[0],
+    setIsLoading = _j[1];
   var selector = React.useMemo(
     function () {
       return function (state) {
@@ -32453,11 +32491,11 @@ var SearchInputGroup = function (_a) {
     [fieldKey]
   );
   var value = reactRedux.useSelector(selector);
-  var _j = reactRedux.useSelector(function (state) {
+  var _k = reactRedux.useSelector(function (state) {
       return state.qsm;
     }),
-    searchResults = _j.searchResults,
-    activeSearchField = _j.activeSearchField;
+    searchResults = _k.searchResults,
+    activeSearchField = _k.activeSearchField;
   var selectedOption = options.find(function (option) {
     return option.value === value;
   });
@@ -32485,6 +32523,7 @@ var SearchInputGroup = function (_a) {
       // if field has custom onChange (API search)
       if (fieldConfig.onChange) {
         fieldConfig.onChange(input);
+        setIsLoading(true);
         return;
       }
       // fallback to local filtering
@@ -32492,6 +32531,13 @@ var SearchInputGroup = function (_a) {
     },
     [dispatch, fieldKey, small, match, fieldConfig]
   );
+  React.useEffect(
+    function () {
+      console.log('options updated, resetting loading state');
+      setIsLoading(false);
+    },
+    [options]
+  );
   React.useEffect(
     function () {
       if (!value || activeSearchField !== fieldKey) return;
@@ -32609,7 +32655,8 @@ var SearchInputGroup = function (_a) {
         label: label,
         isSecondInput: isSecondInput,
         isDoubleInput: isDoubleInput,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isLoading: isLoading
       })
   );
 };
@@ -32982,6 +33029,10 @@ var QSMContainer = function () {
       if (fromDate || toDate) return;
       var startDate = dateFns.addMonths(new Date(), 1);
       var endDate = dateFns.addDays(startDate, 7);
+      if (qsmType === 'groupTour') {
+        startDate = new Date();
+        endDate = dateFns.addYears(startDate, 1);
+      }
       dispatch(setFromDate(startDate.toISOString()));
       dispatch(setToDate(endDate.toISOString()));
     },
@@ -33007,17 +33058,16 @@ var QSMContainer = function () {
   };
   var handleQsmTypeChange = function (value) {
     dispatch(setSelectedQsmType(value));
+    var startDate = dateFns.addMonths(new Date(), 1);
+    var endDate = dateFns.addDays(startDate, 7);
     if (value === 'groupTour') {
-      handleDateChange({
-        fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
-        toDate: dateFns.addYears(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 1)
-      });
-    } else {
-      handleDateChange({
-        fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
-        toDate: dateFns.addDays(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 7)
-      });
+      startDate = new Date();
+      endDate = dateFns.addYears(startDate, 1);
     }
+    handleDateChange({
+      fromDate: startDate,
+      toDate: endDate
+    });
   };
   var handleSubmit = function () {
     if (!onSubmit) return;
@@ -33475,8 +33525,6 @@ var QSM = function (_a) {
   );
 };
 
-var SearchResultsConfigurationContext = React__default['default'].createContext(undefined);
-
 var _a;
 var initialState$1 = {
   results: [],
@@ -34613,22 +34661,6 @@ var Icon$1 = function (_a) {
   }
 };
 
-var Spinner = function () {
-  var _a;
-  var context = React.useContext(SearchResultsConfigurationContext);
-  var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
-  return React__default['default'].createElement(
-    'div',
-    { className: 'spinner__container' },
-    React__default['default'].createElement('span', { className: 'spinner__icon' }),
-    React__default['default'].createElement(
-      'span',
-      { className: 'spinner__label' },
-      translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING
-    )
-  );
-};
-
 var getDepartureTime = function (flight) {
   var _a, _b;
   if (lodash.isEmpty(flight === null || flight === void 0 ? void 0 : flight.metaDatas)) return '';
@@ -40917,33 +40949,96 @@ var FlightResultsContainer = function (_a) {
     React__default['default'].createElement(
       'div',
       { className: 'search__results' },
-      flightsLoading
-        ? React__default['default'].createElement(Spinner, null)
-        : React__default['default'].createElement(
-            React__default['default'].Fragment,
-            null,
-            isMobile &&
+      React__default['default'].createElement(
+        React__default['default'].Fragment,
+        null,
+        isMobile &&
+          React__default['default'].createElement(
+            'div',
+            { className: 'search__result-row' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'search__results__actions' },
+              (context === null || context === void 0 ? void 0 : context.showFilters) &&
+                React__default['default'].createElement(
+                  'div',
+                  {
+                    className: 'cta cta--filter',
+                    onClick: function () {
+                      return setFiltersOpen(true);
+                    }
+                  },
+                  React__default['default'].createElement(Icon$1, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                  translations.SRP.FILTERS
+                )
+            ),
+            sortByTypes &&
+              sortByTypes.length > 0 &&
+              React__default['default'].createElement(ItemPicker, {
+                items: sortByTypes,
+                selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
+                selectedSortByType: selectedSortByType || undefined,
+                label: translations.SRP.SORTBY,
+                placeholder: translations.SRP.SORTBY,
+                classModifier: 'travel-class-picker__items',
+                valueFormatter: function (value, direction) {
+                  return getSortingName(translations, findSortByType(value, direction !== null && direction !== void 0 ? direction : 'asc'));
+                },
+                onPick: handleSortChange
+              })
+          ),
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__result-row' },
+          React__default['default'].createElement(
+            'span',
+            { className: 'search__result-row-text' },
+            !flightsLoading &&
+              React__default['default'].createElement(
+                React__default['default'].Fragment,
+                null,
+                (results === null || results === void 0 ? void 0 : results.length) &&
+                  React__default['default'].createElement(React__default['default'].Fragment, null, results.length, ' ', translations.SRP.TOTAL_RESULTS_LABEL)
+              )
+          ),
+          !isMobile &&
+            React__default['default'].createElement(
+              React__default['default'].Fragment,
+              null,
               React__default['default'].createElement(
                 'div',
-                { className: 'search__result-row' },
+                { className: 'search__result-row-filter' },
+                React__default['default'].createElement(ItemPicker, {
+                  items: selectionTypes,
+                  selection:
+                    ((_c = selectionTypes.find(function (type) {
+                      return type.code === flightSelectionType;
+                    })) === null || _c === void 0
+                      ? void 0
+                      : _c.label) || undefined,
+                  label: 'Selection Type',
+                  placeholder: 'Selection Type',
+                  classModifier: 'travel-class-picker__items',
+                  valueFormatter: function (value) {
+                    return value;
+                  },
+                  onPick: function (value) {
+                    var _a;
+                    return setFlightSelectionType(
+                      ((_a = selectionTypes.find(function (type) {
+                        return type.label === value;
+                      })) === null || _a === void 0
+                        ? void 0
+                        : _a.code) || 'independent'
+                    );
+                  }
+                })
+              ),
+              sortByTypes &&
+                sortByTypes.length > 0 &&
                 React__default['default'].createElement(
                   'div',
-                  { className: 'search__results__actions' },
-                  (context === null || context === void 0 ? void 0 : context.showFilters) &&
-                    React__default['default'].createElement(
-                      'div',
-                      {
-                        className: 'cta cta--filter',
-                        onClick: function () {
-                          return setFiltersOpen(true);
-                        }
-                      },
-                      React__default['default'].createElement(Icon$1, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
-                      translations.SRP.FILTERS
-                    )
-                ),
-                sortByTypes &&
-                  sortByTypes.length > 0 &&
+                  { className: 'search__result-row-filter' },
                   React__default['default'].createElement(ItemPicker, {
                     items: sortByTypes,
                     selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
@@ -40956,85 +41051,20 @@ var FlightResultsContainer = function (_a) {
                     },
                     onPick: handleSortChange
                   })
-              ),
-            React__default['default'].createElement(
-              'div',
-              { className: 'search__result-row' },
-              React__default['default'].createElement(
-                'span',
-                { className: 'search__result-row-text' },
-                !flightsLoading &&
-                  React__default['default'].createElement(
-                    React__default['default'].Fragment,
-                    null,
-                    (results === null || results === void 0 ? void 0 : results.length) && results.length,
-                    ' ',
-                    translations.SRP.TOTAL_RESULTS_LABEL
-                  )
-              ),
-              !isMobile &&
-                React__default['default'].createElement(
-                  React__default['default'].Fragment,
-                  null,
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'search__result-row-filter' },
-                    React__default['default'].createElement(ItemPicker, {
-                      items: selectionTypes,
-                      selection:
-                        ((_c = selectionTypes.find(function (type) {
-                          return type.code === flightSelectionType;
-                        })) === null || _c === void 0
-                          ? void 0
-                          : _c.label) || undefined,
-                      label: 'Selection Type',
-                      placeholder: 'Selection Type',
-                      classModifier: 'travel-class-picker__items',
-                      valueFormatter: function (value) {
-                        return value;
-                      },
-                      onPick: function (value) {
-                        var _a;
-                        return setFlightSelectionType(
-                          ((_a = selectionTypes.find(function (type) {
-                            return type.label === value;
-                          })) === null || _a === void 0
-                            ? void 0
-                            : _a.code) || 'independent'
-                        );
-                      }
-                    })
-                  ),
-                  sortByTypes &&
-                    sortByTypes.length > 0 &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'search__result-row-filter' },
-                      React__default['default'].createElement(ItemPicker, {
-                        items: sortByTypes,
-                        selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
-                        selectedSortByType: selectedSortByType || undefined,
-                        label: translations.SRP.SORTBY,
-                        placeholder: translations.SRP.SORTBY,
-                        classModifier: 'travel-class-picker__items',
-                        valueFormatter: function (value, direction) {
-                          return getSortingName(translations, findSortByType(value, direction !== null && direction !== void 0 ? direction : 'asc'));
-                        },
-                        onPick: handleSortChange
-                      })
-                    )
                 )
-            ),
-            React__default['default'].createElement(
-              'div',
-              { className: 'search__results__wrapper' },
-              (context === null || context === void 0 ? void 0 : context.type) == 'flight' &&
-                (context === null || context === void 0 ? void 0 : context.showFlightAccommodationResults) &&
-                results &&
-                results.length > 0 &&
-                React__default['default'].createElement(FlightSelection, { searchResults: results, flightSelectionType: flightSelectionType })
             )
-          )
+        ),
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__results__wrapper' },
+          flightsLoading && React__default['default'].createElement(Spinner, null),
+          (context === null || context === void 0 ? void 0 : context.type) == 'flight' &&
+            (context === null || context === void 0 ? void 0 : context.showFlightAccommodationResults) &&
+            results &&
+            results.length > 0 &&
+            React__default['default'].createElement(FlightSelection, { searchResults: results, flightSelectionType: flightSelectionType })
+        )
+      )
     )
   );
 };
@@ -41746,7 +41776,7 @@ var SearchResultsContainer = function () {
             var room = { index: i, pax: [] };
             lodash.range(0, x.adults).forEach(function () {
               room.pax.push({
-                age: Math.floor(Math.random() * 100)
+                age: 30
               });
             });
             x.childAges.forEach(function (x) {

package/build/build-cjs/src/qsm/components/search-input/index.d.ts

@@ -9,6 +9,7 @@ interface SearchInputProps {
   isSecondInput?: boolean;
   isDoubleInput?: boolean;
   isDisabled?: boolean;
+  isLoading?: boolean;
 }
 declare const SearchInput: React.FC<SearchInputProps>;
 export default SearchInput;

package/build/build-esm/index.js

@@ -12946,6 +12946,7 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT_PORTAL = function (portalId) {
     return ENDPOINT$4 + '/portal/' + portalId;
   };
+  var ENDPOINT_AIRPORT = '/api/web/entity/airport';
   /**
    * api/search/countries
    * Gets all Countries
@@ -12958,6 +12959,13 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var searchCountries = function (config, searchTerm, signal) {
+    var apiKey = config.apiKey;
+    var safeSearch = searchTerm.replace(/'/g, "''");
+    var filter = "$skip=0&$top=20&$orderby=name%20asc&$filter=contains(name,'" + safeSearch.toLowerCase() + "')";
+    var url = '' + config.host + ENDPOINT_COUNTRIES + '?' + filter;
+    return get(url, apiKey, config.token, signal, true);
+  };
   var searchRegions = function (config, searchTerm, signal) {
     var apiKey = config.apiKey;
     var safeSearch = searchTerm.replace(/'/g, "''");
@@ -12984,6 +12992,11 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var getAirports = function (config, signal) {
+    var url = '' + config.host + ENDPOINT_AIRPORT;
+    var apiKey = config.apiKey;
+    return get(url, apiKey, config.token, signal, true);
+  };
 
   var createParams = function (filter, all, gridColumns, mode, forceToLower) {
     var params = {};
@@ -13363,6 +13376,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.forgotPassword = forgotPassword;
   exports.generateBookingAccommodations = generateBookingAccommodations;
   exports.getAffiliates = getAffiliates;
+  exports.getAirports = getAirports;
   exports.getAllotment = getAllotment;
   exports.getAllotmentAvailability = getAllotmentAvailability;
   exports.getAllotmentList = getAllotmentList;
@@ -13387,6 +13401,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.print = print;
   exports.resetPassword = resetPassword;
   exports.search = search;
+  exports.searchCountries = searchCountries;
   exports.searchElastic = searchElastic;
   exports.searchFlightPool = searchFlightPool;
   exports.searchLocations = searchLocations;
@@ -30965,6 +30980,20 @@ var Icon$2 = function (_a) {
   }
 };
 
+var SearchResultsConfigurationContext = React__default.createContext(undefined);
+
+var Spinner = function () {
+  var _a;
+  var context = useContext(SearchResultsConfigurationContext);
+  var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
+  return React__default.createElement(
+    'div',
+    { className: 'spinner__container' },
+    React__default.createElement('span', { className: 'spinner__icon' }),
+    React__default.createElement('span', { className: 'spinner__label' }, translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING)
+  );
+};
+
 var SearchInput = function (_a) {
   var searchResults = _a.searchResults,
     onOptionSelect = _a.onOptionSelect,
@@ -30972,7 +31001,8 @@ var SearchInput = function (_a) {
   _a.label;
   var isSecondInput = _a.isSecondInput,
     isDoubleInput = _a.isDoubleInput,
-    isDisabled = _a.isDisabled;
+    isDisabled = _a.isDisabled,
+    isLoading = _a.isLoading;
   if (isDisabled) {
     return null;
   }
@@ -30991,9 +31021,9 @@ var SearchInput = function (_a) {
       })
     );
   };
-  if (searchResults.length === 0) {
-    return null;
-  }
+  // if (searchResults.length === 0) {
+  //   return null;
+  // }
   return React__default.createElement(
     'div',
     {
@@ -31001,6 +31031,7 @@ var SearchInput = function (_a) {
         .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
         .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
     },
+    isLoading && React__default.createElement(Spinner, null),
     searchResults.map(function (option, index) {
       return React__default.createElement(
         'div',
@@ -32312,6 +32343,9 @@ var SearchInputGroup = function (_a) {
     placeholder = fieldConfig.placeholder,
     options = fieldConfig.options,
     autoComplete = fieldConfig.autoComplete;
+  var _j = useState(false),
+    isLoading = _j[0],
+    setIsLoading = _j[1];
   var selector = useMemo(
     function () {
       return function (state) {
@@ -32322,11 +32356,11 @@ var SearchInputGroup = function (_a) {
     [fieldKey]
   );
   var value = useSelector(selector);
-  var _j = useSelector(function (state) {
+  var _k = useSelector(function (state) {
       return state.qsm;
     }),
-    searchResults = _j.searchResults,
-    activeSearchField = _j.activeSearchField;
+    searchResults = _k.searchResults,
+    activeSearchField = _k.activeSearchField;
   var selectedOption = options.find(function (option) {
     return option.value === value;
   });
@@ -32354,6 +32388,7 @@ var SearchInputGroup = function (_a) {
       // if field has custom onChange (API search)
       if (fieldConfig.onChange) {
         fieldConfig.onChange(input);
+        setIsLoading(true);
         return;
       }
       // fallback to local filtering
@@ -32361,6 +32396,13 @@ var SearchInputGroup = function (_a) {
     },
     [dispatch, fieldKey, small, match, fieldConfig]
   );
+  useEffect(
+    function () {
+      console.log('options updated, resetting loading state');
+      setIsLoading(false);
+    },
+    [options]
+  );
   useEffect(
     function () {
       if (!value || activeSearchField !== fieldKey) return;
@@ -32478,7 +32520,8 @@ var SearchInputGroup = function (_a) {
         label: label,
         isSecondInput: isSecondInput,
         isDoubleInput: isDoubleInput,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isLoading: isLoading
       })
   );
 };
@@ -32851,6 +32894,10 @@ var QSMContainer = function () {
       if (fromDate || toDate) return;
       var startDate = addMonths(new Date(), 1);
       var endDate = addDays(startDate, 7);
+      if (qsmType === 'groupTour') {
+        startDate = new Date();
+        endDate = addYears(startDate, 1);
+      }
       dispatch(setFromDate(startDate.toISOString()));
       dispatch(setToDate(endDate.toISOString()));
     },
@@ -32876,17 +32923,16 @@ var QSMContainer = function () {
   };
   var handleQsmTypeChange = function (value) {
     dispatch(setSelectedQsmType(value));
+    var startDate = addMonths(new Date(), 1);
+    var endDate = addDays(startDate, 7);
     if (value === 'groupTour') {
-      handleDateChange({
-        fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
-        toDate: addYears(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 1)
-      });
-    } else {
-      handleDateChange({
-        fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
-        toDate: addDays(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 7)
-      });
+      startDate = new Date();
+      endDate = addYears(startDate, 1);
     }
+    handleDateChange({
+      fromDate: startDate,
+      toDate: endDate
+    });
   };
   var handleSubmit = function () {
     if (!onSubmit) return;
@@ -33301,8 +33347,6 @@ var QSM = function (_a) {
   );
 };
 
-var SearchResultsConfigurationContext = React__default.createContext(undefined);
-
 var _a;
 var initialState$1 = {
   results: [],
@@ -34437,18 +34481,6 @@ var Icon$1 = function (_a) {
   }
 };
 
-var Spinner = function () {
-  var _a;
-  var context = useContext(SearchResultsConfigurationContext);
-  var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
-  return React__default.createElement(
-    'div',
-    { className: 'spinner__container' },
-    React__default.createElement('span', { className: 'spinner__icon' }),
-    React__default.createElement('span', { className: 'spinner__label' }, translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING)
-  );
-};
-
 var getDepartureTime = function (flight) {
   var _a, _b;
   if (isEmpty(flight === null || flight === void 0 ? void 0 : flight.metaDatas)) return '';
@@ -40622,33 +40654,96 @@ var FlightResultsContainer = function (_a) {
     React__default.createElement(
       'div',
       { className: 'search__results' },
-      flightsLoading
-        ? React__default.createElement(Spinner, null)
-        : React__default.createElement(
-            React__default.Fragment,
-            null,
-            isMobile &&
+      React__default.createElement(
+        React__default.Fragment,
+        null,
+        isMobile &&
+          React__default.createElement(
+            'div',
+            { className: 'search__result-row' },
+            React__default.createElement(
+              'div',
+              { className: 'search__results__actions' },
+              (context === null || context === void 0 ? void 0 : context.showFilters) &&
+                React__default.createElement(
+                  'div',
+                  {
+                    className: 'cta cta--filter',
+                    onClick: function () {
+                      return setFiltersOpen(true);
+                    }
+                  },
+                  React__default.createElement(Icon$1, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                  translations.SRP.FILTERS
+                )
+            ),
+            sortByTypes &&
+              sortByTypes.length > 0 &&
+              React__default.createElement(ItemPicker, {
+                items: sortByTypes,
+                selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
+                selectedSortByType: selectedSortByType || undefined,
+                label: translations.SRP.SORTBY,
+                placeholder: translations.SRP.SORTBY,
+                classModifier: 'travel-class-picker__items',
+                valueFormatter: function (value, direction) {
+                  return getSortingName(translations, findSortByType(value, direction !== null && direction !== void 0 ? direction : 'asc'));
+                },
+                onPick: handleSortChange
+              })
+          ),
+        React__default.createElement(
+          'div',
+          { className: 'search__result-row' },
+          React__default.createElement(
+            'span',
+            { className: 'search__result-row-text' },
+            !flightsLoading &&
+              React__default.createElement(
+                React__default.Fragment,
+                null,
+                (results === null || results === void 0 ? void 0 : results.length) &&
+                  React__default.createElement(React__default.Fragment, null, results.length, ' ', translations.SRP.TOTAL_RESULTS_LABEL)
+              )
+          ),
+          !isMobile &&
+            React__default.createElement(
+              React__default.Fragment,
+              null,
               React__default.createElement(
                 'div',
-                { className: 'search__result-row' },
+                { className: 'search__result-row-filter' },
+                React__default.createElement(ItemPicker, {
+                  items: selectionTypes,
+                  selection:
+                    ((_c = selectionTypes.find(function (type) {
+                      return type.code === flightSelectionType;
+                    })) === null || _c === void 0
+                      ? void 0
+                      : _c.label) || undefined,
+                  label: 'Selection Type',
+                  placeholder: 'Selection Type',
+                  classModifier: 'travel-class-picker__items',
+                  valueFormatter: function (value) {
+                    return value;
+                  },
+                  onPick: function (value) {
+                    var _a;
+                    return setFlightSelectionType(
+                      ((_a = selectionTypes.find(function (type) {
+                        return type.label === value;
+                      })) === null || _a === void 0
+                        ? void 0
+                        : _a.code) || 'independent'
+                    );
+                  }
+                })
+              ),
+              sortByTypes &&
+                sortByTypes.length > 0 &&
                 React__default.createElement(
                   'div',
-                  { className: 'search__results__actions' },
-                  (context === null || context === void 0 ? void 0 : context.showFilters) &&
-                    React__default.createElement(
-                      'div',
-                      {
-                        className: 'cta cta--filter',
-                        onClick: function () {
-                          return setFiltersOpen(true);
-                        }
-                      },
-                      React__default.createElement(Icon$1, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
-                      translations.SRP.FILTERS
-                    )
-                ),
-                sortByTypes &&
-                  sortByTypes.length > 0 &&
+                  { className: 'search__result-row-filter' },
                   React__default.createElement(ItemPicker, {
                     items: sortByTypes,
                     selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
@@ -40661,85 +40756,20 @@ var FlightResultsContainer = function (_a) {
                     },
                     onPick: handleSortChange
                   })
-              ),
-            React__default.createElement(
-              'div',
-              { className: 'search__result-row' },
-              React__default.createElement(
-                'span',
-                { className: 'search__result-row-text' },
-                !flightsLoading &&
-                  React__default.createElement(
-                    React__default.Fragment,
-                    null,
-                    (results === null || results === void 0 ? void 0 : results.length) && results.length,
-                    ' ',
-                    translations.SRP.TOTAL_RESULTS_LABEL
-                  )
-              ),
-              !isMobile &&
-                React__default.createElement(
-                  React__default.Fragment,
-                  null,
-                  React__default.createElement(
-                    'div',
-                    { className: 'search__result-row-filter' },
-                    React__default.createElement(ItemPicker, {
-                      items: selectionTypes,
-                      selection:
-                        ((_c = selectionTypes.find(function (type) {
-                          return type.code === flightSelectionType;
-                        })) === null || _c === void 0
-                          ? void 0
-                          : _c.label) || undefined,
-                      label: 'Selection Type',
-                      placeholder: 'Selection Type',
-                      classModifier: 'travel-class-picker__items',
-                      valueFormatter: function (value) {
-                        return value;
-                      },
-                      onPick: function (value) {
-                        var _a;
-                        return setFlightSelectionType(
-                          ((_a = selectionTypes.find(function (type) {
-                            return type.label === value;
-                          })) === null || _a === void 0
-                            ? void 0
-                            : _a.code) || 'independent'
-                        );
-                      }
-                    })
-                  ),
-                  sortByTypes &&
-                    sortByTypes.length > 0 &&
-                    React__default.createElement(
-                      'div',
-                      { className: 'search__result-row-filter' },
-                      React__default.createElement(ItemPicker, {
-                        items: sortByTypes,
-                        selection: (selectedSortByType === null || selectedSortByType === void 0 ? void 0 : selectedSortByType.label) || undefined,
-                        selectedSortByType: selectedSortByType || undefined,
-                        label: translations.SRP.SORTBY,
-                        placeholder: translations.SRP.SORTBY,
-                        classModifier: 'travel-class-picker__items',
-                        valueFormatter: function (value, direction) {
-                          return getSortingName(translations, findSortByType(value, direction !== null && direction !== void 0 ? direction : 'asc'));
-                        },
-                        onPick: handleSortChange
-                      })
-                    )
                 )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'search__results__wrapper' },
-              (context === null || context === void 0 ? void 0 : context.type) == 'flight' &&
-                (context === null || context === void 0 ? void 0 : context.showFlightAccommodationResults) &&
-                results &&
-                results.length > 0 &&
-                React__default.createElement(FlightSelection, { searchResults: results, flightSelectionType: flightSelectionType })
             )
-          )
+        ),
+        React__default.createElement(
+          'div',
+          { className: 'search__results__wrapper' },
+          flightsLoading && React__default.createElement(Spinner, null),
+          (context === null || context === void 0 ? void 0 : context.type) == 'flight' &&
+            (context === null || context === void 0 ? void 0 : context.showFlightAccommodationResults) &&
+            results &&
+            results.length > 0 &&
+            React__default.createElement(FlightSelection, { searchResults: results, flightSelectionType: flightSelectionType })
+        )
+      )
     )
   );
 };
@@ -41451,7 +41481,7 @@ var SearchResultsContainer = function () {
             var room = { index: i, pax: [] };
             range(0, x.adults).forEach(function () {
               room.pax.push({
-                age: Math.floor(Math.random() * 100)
+                age: 30
               });
             });
             x.childAges.forEach(function (x) {

package/build/build-esm/src/qsm/components/search-input/index.d.ts

@@ -9,6 +9,7 @@ interface SearchInputProps {
   isSecondInput?: boolean;
   isDoubleInput?: boolean;
   isDisabled?: boolean;
+  isLoading?: boolean;
 }
 declare const SearchInput: React.FC<SearchInputProps>;
 export default SearchInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.71",
+  "version": "1.4.73",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.143",
+    "@qite/tide-client": "^1.1.144",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -47,8 +47,13 @@ const QSMContainer: React.FC = () => {
   useEffect(() => {
     if (fromDate || toDate) return;
 
-    const startDate = addMonths(new Date(), 1);
-    const endDate = addDays(startDate, 7);
+    let startDate = addMonths(new Date(), 1);
+    let endDate = addDays(startDate, 7);
+
+    if (qsmType === 'groupTour') {
+      startDate = new Date();
+      endDate = addYears(startDate, 1);
+    }
 
     dispatch(setFromDate(startDate.toISOString()));
     dispatch(setToDate(endDate.toISOString()));
@@ -75,17 +80,18 @@ const QSMContainer: React.FC = () => {
   const handleQsmTypeChange = (value: SRPType) => {
     dispatch(setSelectedQsmType(value));
 
+    let startDate = addMonths(new Date(), 1);
+    let endDate = addDays(startDate, 7);
+
     if (value === 'groupTour') {
-      handleDateChange({
-        fromDate: new Date(fromDate ?? Date.now()),
-        toDate: addYears(new Date(fromDate ?? Date.now()), 1)
-      });
-    } else {
-      handleDateChange({
-        fromDate: new Date(fromDate ?? Date.now()),
-        toDate: addDays(new Date(fromDate ?? Date.now()), 7)
-      });
+      startDate = new Date();
+      endDate = addYears(startDate, 1);
     }
+
+    handleDateChange({
+      fromDate: startDate,
+      toDate: endDate
+    });
   };
 
   const handleSubmit = () => {

package/src/qsm/components/search-input/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Icon from '../icon';
 import { TypeaheadOption } from '../../types';
+import Spinner from '../../../search-results/components/spinner/spinner';
 
 interface SearchInputProps {
   onChange: (input: string) => void;
@@ -11,9 +12,19 @@ interface SearchInputProps {
   isSecondInput?: boolean;
   isDoubleInput?: boolean;
   isDisabled?: boolean;
+  isLoading?: boolean;
 }
 
-const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect, highlightTarget, label, isSecondInput, isDoubleInput, isDisabled }) => {
+const SearchInput: React.FC<SearchInputProps> = ({
+  searchResults,
+  onOptionSelect,
+  highlightTarget,
+  label,
+  isSecondInput,
+  isDoubleInput,
+  isDisabled,
+  isLoading
+}) => {
   if (isDisabled) {
     return null;
   }
@@ -38,15 +49,16 @@ const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect
     );
   };
 
-  if (searchResults.length === 0) {
-    return null;
-  }
+  // if (searchResults.length === 0) {
+  //   return null;
+  // }
 
   return (
     <div
       className={`qsm__double-input-options${isSecondInput ? ' qsm__double-input-options--second-input' : ''}${
         isDoubleInput ? ' qsm__double-input-options--splittable' : ''
       }`}>
+      {isLoading && <Spinner />}
       {searchResults.map((option, index) => (
         <div
           key={index}

package/src/qsm/components/search-input-group/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import React, { useEffect, useRef, useMemo, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { QSMRootState } from '../../store/qsm-store';
 import { setFieldValue, setSearchResults, setActiveSearchField, setMobileFilterType, setActiveSearchFieldProps } from '../../store/qsm-slice';
@@ -32,8 +32,8 @@ const SearchInputGroup: React.FC<Props> = ({
   if (!fieldConfig) {
     return null;
   }
-
   const { fieldKey, label, placeholder, options, autoComplete } = fieldConfig;
+  const [isLoading, setIsLoading] = useState(false);
 
   const selector = useMemo(() => (state: QSMRootState) => ((state.qsm as any)[fieldKey] ?? '') as string, [fieldKey]);
   const value = useSelector(selector);
@@ -66,6 +66,7 @@ const SearchInputGroup: React.FC<Props> = ({
       // if field has custom onChange (API search)
       if (fieldConfig.onChange) {
         fieldConfig.onChange(input);
+        setIsLoading(true);
         return;
       }
 
@@ -75,6 +76,11 @@ const SearchInputGroup: React.FC<Props> = ({
     [dispatch, fieldKey, small, match, fieldConfig]
   );
 
+  useEffect(() => {
+    console.log('options updated, resetting loading state');
+    setIsLoading(false);
+  }, [options]);
+
   useEffect(() => {
     if (!value || activeSearchField !== fieldKey) return;
 
@@ -183,6 +189,7 @@ const SearchInputGroup: React.FC<Props> = ({
           isSecondInput={isSecondInput}
           isDoubleInput={isDoubleInput}
           isDisabled={isDisabled}
+          isLoading={isLoading}
         />
       )}
     </label>

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

@@ -57,81 +57,82 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
       {context?.showFilters && <FlightFilters isOpen={filtersOpen} handleSetIsOpen={() => setFiltersOpen(!filtersOpen)} isLoading={flightsLoading} />}
       {/* ---------------- Results ---------------- */}
       <div className="search__results">
-        {flightsLoading ? (
-          <Spinner />
-        ) : (
-          <>
-            {isMobile && (
-              <div className="search__result-row">
-                <div className="search__results__actions">
-                  {context?.showFilters && (
-                    <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
-                      <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
-                      {translations.SRP.FILTERS}
-                    </div>
-                  )}
-                </div>
-                {sortByTypes && sortByTypes.length > 0 && (
-                  <ItemPicker
-                    items={sortByTypes}
-                    selection={selectedSortByType?.label || undefined}
-                    selectedSortByType={selectedSortByType || undefined}
-                    label={translations.SRP.SORTBY}
-                    placeholder={translations.SRP.SORTBY}
-                    classModifier="travel-class-picker__items"
-                    valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
-                    onPick={handleSortChange}
-                  />
+        <>
+          {isMobile && (
+            <div className="search__result-row">
+              <div className="search__results__actions">
+                {context?.showFilters && (
+                  <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
+                    <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                    {translations.SRP.FILTERS}
+                  </div>
                 )}
               </div>
-            )}
+              {sortByTypes && sortByTypes.length > 0 && (
+                <ItemPicker
+                  items={sortByTypes}
+                  selection={selectedSortByType?.label || undefined}
+                  selectedSortByType={selectedSortByType || undefined}
+                  label={translations.SRP.SORTBY}
+                  placeholder={translations.SRP.SORTBY}
+                  classModifier="travel-class-picker__items"
+                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                  onPick={handleSortChange}
+                />
+              )}
+            </div>
+          )}
 
-            <div className="search__result-row">
-              <span className="search__result-row-text">
-                {!flightsLoading && (
-                  <>
-                    {results?.length && results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
-                  </>
-                )}
-              </span>
-              {!isMobile && (
+          <div className="search__result-row">
+            <span className="search__result-row-text">
+              {!flightsLoading && (
                 <>
+                  {results?.length && (
+                    <>
+                      {results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+            {!isMobile && (
+              <>
+                <div className="search__result-row-filter">
+                  <ItemPicker
+                    items={selectionTypes}
+                    selection={selectionTypes.find((type) => type.code === flightSelectionType)?.label || undefined}
+                    label="Selection Type"
+                    placeholder="Selection Type"
+                    classModifier="travel-class-picker__items"
+                    valueFormatter={(value) => value}
+                    onPick={(value) => setFlightSelectionType(selectionTypes.find((type) => type.label === value)?.code || 'independent')}
+                  />
+                </div>
+                {sortByTypes && sortByTypes.length > 0 && (
                   <div className="search__result-row-filter">
                     <ItemPicker
-                      items={selectionTypes}
-                      selection={selectionTypes.find((type) => type.code === flightSelectionType)?.label || undefined}
-                      label="Selection Type"
-                      placeholder="Selection Type"
+                      items={sortByTypes}
+                      selection={selectedSortByType?.label || undefined}
+                      selectedSortByType={selectedSortByType || undefined}
+                      label={translations.SRP.SORTBY}
+                      placeholder={translations.SRP.SORTBY}
                       classModifier="travel-class-picker__items"
-                      valueFormatter={(value) => value}
-                      onPick={(value) => setFlightSelectionType(selectionTypes.find((type) => type.label === value)?.code || 'independent')}
+                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                      onPick={handleSortChange}
                     />
                   </div>
-                  {sortByTypes && sortByTypes.length > 0 && (
-                    <div className="search__result-row-filter">
-                      <ItemPicker
-                        items={sortByTypes}
-                        selection={selectedSortByType?.label || undefined}
-                        selectedSortByType={selectedSortByType || undefined}
-                        label={translations.SRP.SORTBY}
-                        placeholder={translations.SRP.SORTBY}
-                        classModifier="travel-class-picker__items"
-                        valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
-                        onPick={handleSortChange}
-                      />
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
+                )}
+              </>
+            )}
+          </div>
 
-            <div className="search__results__wrapper">
-              {context?.type == 'flight' && context?.showFlightAccommodationResults && results && results.length > 0 && (
-                <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
-              )}
-            </div>
-          </>
-        )}
+          <div className="search__results__wrapper">
+            {flightsLoading && <Spinner />}
+            {context?.type == 'flight' && context?.showFlightAccommodationResults && results && results.length > 0 && (
+              <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
+            )}
+          </div>
+        </>
       </div>
     </>
   );

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

@@ -270,7 +270,7 @@ const SearchResultsContainer: React.FC = () => {
       var room = { index: i, pax: [] } as BookingPackageRequestRoom;
       range(0, x.adults).forEach(() => {
         room.pax.push({
-          age: Math.floor(Math.random() * 100)
+          age: 30
         } as BookingPackagePax);
       });
       x.childAges.forEach((x) => {

package/styles/booking-search-results.scss

@@ -1,4 +1,5 @@
-#tide-booking {
+#tide-booking,
+#tide-content {
   @import './components/mixins';
   @import './components/placeholders';
   @import './components/base';