@qite/tide-booking-component 1.4.27 → 1.4.29

package/build/build-cjs/index.js

@@ -23074,11 +23074,11 @@ var setMobileFilterType = _a$1.setMobileFilterType,
   setActiveSearchFieldProps = _a$1.setActiveSearchFieldProps,
   setSearchResults = _a$1.setSearchResults;
 _a$1.setLanguage;
-var setMobileDatePickerMode = _a$1.setMobileDatePickerMode,
-  setMinDate = _a$1.setMinDate,
-  setMaxDate = _a$1.setMaxDate,
-  setDateFlexibility = _a$1.setDateFlexibility,
-  setSelectedFlexRange = _a$1.setSelectedFlexRange;
+_a$1.setMobileDatePickerMode;
+_a$1.setMinDate;
+_a$1.setMaxDate;
+_a$1.setDateFlexibility;
+var setSelectedFlexRange = _a$1.setSelectedFlexRange;
 _a$1.setTravelTypes;
 var setSelectedTravelType = _a$1.setSelectedTravelType;
 _a$1.setTravelClasses;
@@ -24883,7 +24883,8 @@ var SearchInputGroup = function (_a) {
   }
   var label = config.label,
     placeholder = config.placeholder,
-    options = config.options;
+    options = config.options,
+    autoComplete = config.autoComplete;
   var selector = React.useMemo(
     function () {
       return function (state) {
@@ -24916,7 +24917,7 @@ var SearchInputGroup = function (_a) {
       dispatch(setFieldValue({ fieldKey: fieldKey, value: input }));
       dispatch(setSearchResults([]));
       if (small) return;
-      if (input.length === 3) {
+      if (input.length === 3 && autoComplete) {
         var exactIataMatch = findExactIataMatch(options, input);
         if (exactIataMatch) {
           dispatch(setFieldValue({ fieldKey: fieldKey, value: exactIataMatch.value }));
@@ -25201,180 +25202,6 @@ var DoubleSearchInputGroup = function (_a) {
   );
 };
 
-var DatePicker = function () {
-  var dispatch = reactRedux.useDispatch();
-  var isSmallScreen = useMediaQuery('(max-width: 768px)');
-  /* 🔑  STATE FIRST (no TDZ issues) */
-  var _a = React.useState(false),
-    isOpen = _a[0],
-    setIsOpen = _a[1]; // range pop-over
-  var _b = React.useState(false),
-    isSingleOpen = _b[0],
-    setIsSingleOpen = _b[1]; // single pop-over
-  var _c = React.useContext(QSMConfigurationContext),
-    datesIcon = _c.datesIcon,
-    _d = _c.showReturnDate,
-    showReturnDate = _d === void 0 ? true : _d,
-    minDate = _c.minDate,
-    maxDate = _c.maxDate,
-    _e = _c.dateFlexibility,
-    dateFlexibility = _e === void 0 ? [] : _e;
-  var isSingleDate = !showReturnDate;
-  var dateInputWrapperRef = React.useRef(null);
-  var dateInputRef = React.useRef(null);
-  var today = dateFns.startOfDay(new Date());
-  var effectiveMinDate = minDate !== null && minDate !== void 0 ? minDate : today;
-  var effectiveMaxDate = maxDate !== null && maxDate !== void 0 ? maxDate : dateFns.addYears(today, 1);
-  var _f = reactRedux.useSelector(function (state) {
-      return {
-        fromDate: state.qsm.fromDate,
-        toDate: state.qsm.toDate
-      };
-    }),
-    fromDate = _f.fromDate,
-    toDate = _f.toDate;
-  /* ----------------------- outside click close ----------------------- */
-  React.useEffect(function () {
-    var handleClickOutside = function (event) {
-      if (
-        dateInputWrapperRef.current &&
-        !dateInputWrapperRef.current.contains(event.target) &&
-        dateInputRef.current &&
-        !dateInputRef.current.contains(event.target)
-      ) {
-        setIsOpen(false);
-        setIsSingleOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  /* ----------------------- min/max & flexibility sync ---------------- */
-  React.useEffect(
-    function () {
-      dispatch(setMinDate(effectiveMinDate.toISOString()));
-      dispatch(setMaxDate(effectiveMaxDate.toISOString()));
-    },
-    [dispatch, effectiveMinDate, effectiveMaxDate]
-  );
-  React.useEffect(
-    function () {
-      if (dateFlexibility.length) {
-        dispatch(setDateFlexibility(dateFlexibility));
-      }
-    },
-    [dispatch, JSON.stringify(dateFlexibility)]
-  );
-  /* =================== SINGLE DATE (only departure) ================= */
-  if (isSingleDate) {
-    return React__default['default'].createElement(
-      'div',
-      { className: 'qsm__double-input', ref: dateInputWrapperRef },
-      React__default['default'].createElement(
-        'div',
-        {
-          className: 'qsm__input-wrapper',
-          onClick: function () {
-            if (isSmallScreen) {
-              dispatch(setMobileDatePickerMode('single'));
-              dispatch(setMobileFilterType('date'));
-            } else {
-              setIsSingleOpen(true);
-            }
-          }
-        },
-        datesIcon && React__default['default'].createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-        React__default['default'].createElement('label', { className: 'qsm__label' }, 'Vertrek'),
-        React__default['default'].createElement('input', {
-          type: 'text',
-          className: 'qsm__input u-ps-2',
-          placeholder: 'Datum',
-          readOnly: true,
-          value: fromDate ? dateFns.format(new Date(fromDate), 'dd/MM/yyyy') : ''
-        })
-      ),
-      !isSmallScreen &&
-        isSingleOpen &&
-        React__default['default'].createElement(
-          'div',
-          { className: 'qsm__datepicker-popover', ref: dateInputRef },
-          React__default['default'].createElement(DateRangePicker, {
-            fromDate: fromDate ? new Date(fromDate) : undefined,
-            onSelectionChange: function (from) {
-              dispatch(setFromDate(from ? from.toISOString() : undefined));
-              dispatch(setToDate(undefined));
-            },
-            onRequestClose: function () {
-              return setIsSingleOpen(false);
-            },
-            isSingleDate: true
-          })
-        )
-    );
-  }
-  /* ======================== RANGE PICKER ============================= */
-  var handleFromDateClick = function () {
-    if (isSmallScreen) {
-      dispatch(setMobileDatePickerMode('range'));
-      dispatch(setMobileFilterType('date'));
-    } else {
-      setIsOpen(true);
-    }
-  };
-  return React__default['default'].createElement(
-    'div',
-    { className: 'qsm__double-input', ref: dateInputWrapperRef },
-    React__default['default'].createElement(
-      'label',
-      { className: 'qsm__input-wrapper', onClick: handleFromDateClick },
-      datesIcon && React__default['default'].createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-      React__default['default'].createElement('span', { className: 'qsm__label' }, 'Vertrek'),
-      React__default['default'].createElement('input', {
-        type: 'text',
-        id: 'vertrek',
-        className: 'qsm__input u-ps-2',
-        placeholder: 'Datum',
-        readOnly: true,
-        value: fromDate ? dateFns.format(new Date(fromDate), 'dd/MM/yyyy') : ''
-      }),
-      React__default['default'].createElement('div', { className: 'qsm__input-line qsm__input-line--datepicker' })
-    ),
-    React__default['default'].createElement(
-      'label',
-      { className: 'qsm__input-wrapper', onClick: handleFromDateClick },
-      datesIcon && React__default['default'].createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-      React__default['default'].createElement('span', { className: 'qsm__label qsm__label--second-input-label' }, 'Retour'),
-      React__default['default'].createElement('input', {
-        type: 'text',
-        id: 'retour',
-        className: 'qsm__input',
-        placeholder: 'Datum',
-        readOnly: true,
-        value: toDate ? dateFns.format(new Date(toDate), 'dd/MM/yyyy') : ''
-      })
-    ),
-    isOpen &&
-      !isSmallScreen &&
-      React__default['default'].createElement(
-        'div',
-        { className: 'qsm__datepicker-popover', ref: dateInputRef },
-        React__default['default'].createElement(DateRangePicker, {
-          fromDate: fromDate ? new Date(fromDate) : undefined,
-          toDate: toDate ? new Date(toDate) : undefined,
-          onSelectionChange: function (from, to) {
-            dispatch(setFromDate(from ? from.toISOString() : undefined));
-            dispatch(setToDate(to ? to.toISOString() : undefined));
-          },
-          onRequestClose: function () {
-            return setIsOpen(false);
-          }
-        })
-      )
-  );
-};
-
 var selectTravelerSummary = function (state, areTravelersInRooms) {
   var _a = state.qsm,
     adults = _a.adults,
@@ -25498,11 +25325,7 @@ var ItemPicker$1 = function (_a) {
   var _b = React.useState(false),
     isDropdownOpen = _b[0],
     setIsDropdownOpen = _b[1];
-  var _c = React.useState('down'),
-    openDirection = _c[0],
-    setOpenDirection = _c[1];
   var dropdownRef = React.useRef(null);
-  var dropdownMenuRef = React.useRef(null);
   var toggleButtonRef = React.useRef(null);
   var handlePick = function (picked) {
     setIsDropdownOpen(false);
@@ -25519,19 +25342,6 @@ var ItemPicker$1 = function (_a) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  React.useEffect(
-    function () {
-      var _a, _b;
-      if (isDropdownOpen && toggleButtonRef.current) {
-        var buttonRect = toggleButtonRef.current.getBoundingClientRect();
-        var spaceBelow = window.innerHeight - buttonRect.bottom;
-        var spaceAbove = buttonRect.top;
-        var dropdownHeight = (_b = (_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 16;
-        setOpenDirection(spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down');
-      }
-    },
-    [isDropdownOpen]
-  );
   return React__default['default'].createElement(
     'div',
     { className: 'dropdown__input ' + classModifier },
@@ -25556,7 +25366,7 @@ var ItemPicker$1 = function (_a) {
       isDropdownOpen &&
         React__default['default'].createElement(
           'ul',
-          { className: 'dropdown-menu dropdown-menu--'.concat(openDirection), ref: dropdownMenuRef },
+          { className: 'dropdown-menu' },
           items.map(function (_a) {
             var label = _a.label,
               icon = _a.icon;
@@ -25625,17 +25435,97 @@ var TravelNationalityPicker = function () {
 };
 
 var QSMContainer = function () {
+  var dispatch = reactRedux.useDispatch();
   var isMobile = useMediaQuery('(max-width: 768px)');
-  var mobileFilterType = reactRedux.useSelector(function (state) {
-    return state.qsm.mobileFilterType;
+  var qsmState = reactRedux.useSelector(function (state) {
+    return state.qsm;
   });
+  var mobileFilterType = qsmState.mobileFilterType,
+    fromDate = qsmState.fromDate,
+    toDate = qsmState.toDate;
   var _a = React.useContext(QSMConfigurationContext),
     searchFields = _a.searchFields,
     askTravelers = _a.askTravelers,
     submitIcon = _a.submitIcon,
     submitLabel = _a.submitLabel,
     onSubmit = _a.onSubmit;
-  // ... read props from QSMConfigurationContext as needed
+  React.useEffect(
+    function () {
+      if (fromDate || toDate) return;
+      var startDate = dateFns.addMonths(new Date(), 1);
+      var endDate = dateFns.addDays(startDate, 7);
+      dispatch(setFromDate(startDate.toISOString()));
+      dispatch(setToDate(endDate.toISOString()));
+    },
+    [fromDate, toDate, dispatch]
+  );
+  var dateRange = React.useMemo(
+    function () {
+      if (!fromDate || !toDate) return undefined;
+      return {
+        fromDate: new Date(fromDate),
+        toDate: new Date(toDate)
+      };
+    },
+    [fromDate, toDate]
+  );
+  var handleDateChange = function (value) {
+    var _a, _b;
+    dispatch(setFromDate((_a = value.fromDate) === null || _a === void 0 ? void 0 : _a.toISOString()));
+    dispatch(setToDate((_b = value.toDate) === null || _b === void 0 ? void 0 : _b.toISOString()));
+  };
+  var handleSubmit = function () {
+    if (!onSubmit) return;
+    var selectedOrigin = qsmState.selectedOrigin,
+      selectedDestination = qsmState.selectedDestination,
+      selectedAirport = qsmState.selectedAirport,
+      fromDate = qsmState.fromDate,
+      toDate = qsmState.toDate,
+      travelers = qsmState.travelers,
+      selectedTravelClass = qsmState.selectedTravelClass,
+      selectedTravelType = qsmState.selectedTravelType,
+      selectedNationality = qsmState.selectedNationality,
+      adults = qsmState.adults,
+      kids = qsmState.kids,
+      babies = qsmState.babies,
+      rooms = qsmState.rooms,
+      selectedFlexRange = qsmState.selectedFlexRange,
+      language = qsmState.language;
+    var payload = {
+      selectedOrigin: selectedOrigin,
+      selectedDestination: selectedDestination,
+      selectedAirport: selectedAirport,
+      fromDate: fromDate,
+      toDate: toDate,
+      travelers: travelers,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelType,
+      nationality: selectedNationality,
+      adults: adults,
+      kids: kids,
+      babies: babies,
+      rooms: rooms,
+      dateFlexibility: selectedFlexRange,
+      language: language
+    };
+    addSearchFieldsToPayload(payload, searchFields, qsmState);
+    onSubmit(payload);
+  };
+  var addSearchFieldsToPayload = function (payload, fields, state) {
+    fields.forEach(function (field) {
+      if (field.type === 'single') {
+        var key = field.fieldKey;
+        payload[key] = state[key];
+      }
+      if (field.type === 'double' && field.fields) {
+        // recursively add each nested field
+        field.fields.forEach(function (nestedField) {
+          var key = nestedField.fieldKey;
+          payload[key] = state[key];
+        });
+      }
+    });
+  };
   return React__default['default'].createElement(
     'div',
     { className: 'qsm' },
@@ -25757,6 +25647,8 @@ var QSMContainer = function () {
                 // onBlur={formik.handleBlur}
                 value: '',
                 // checked={formik.values.mainBookerId === travelerValues.id}
+                checked: true,
+                readOnly: true,
                 className: 'radiobutton__input'
               }),
               React__default['default'].createElement('span', null, 'One accommodation')
@@ -25775,7 +25667,8 @@ var QSMContainer = function () {
                 // onBlur={formik.handleBlur}
                 value: '',
                 // checked={formik.values.mainBookerId === travelerValues.id}
-                className: 'radiobutton__input'
+                className: 'radiobutton__input',
+                disabled: true
               }),
               React__default['default'].createElement('span', null, 'Multiple accommodations')
             )
@@ -25798,11 +25691,11 @@ var QSMContainer = function () {
           }
           return React__default['default'].createElement(SearchInputGroup, { key: idx, fieldKey: field.fieldKey });
         }),
-        React__default['default'].createElement(DatePicker, null),
+        React__default['default'].createElement(Dates, { value: dateRange, onChange: handleDateChange }),
         askTravelers && React__default['default'].createElement(TravelInputGroup, null),
         React__default['default'].createElement(
           'button',
-          { type: 'button', className: 'cta', onClick: onSubmit },
+          { type: 'button', className: 'cta', onClick: handleSubmit },
           submitIcon && submitIcon.toString().length > 0 && React__default['default'].createElement('span', null, submitIcon),
           React__default['default'].createElement('span', null, submitLabel)
         )

package/build/build-cjs/qsm/store/qsm-slice.d.ts

@@ -7,7 +7,6 @@ export interface QSMState {
   fromDate?: string;
   toDate?: string;
   travelers: any[];
-  travelClass?: string;
   mobileFilterType: MobileFilterType;
   searchResults: TypeaheadOption[];
   activeSearchField: string | null;

package/build/build-cjs/qsm/types.d.ts

@@ -44,6 +44,7 @@ export interface BaseFieldConfig {
   label: string;
   placeholder: string;
   options: TypeaheadOption[];
+  autoComplete?: boolean;
 }
 export interface TypeaheadOption {
   key: string;
@@ -97,6 +98,7 @@ export interface TravelType {
   icon?: ReactNode;
 }
 export interface TravelClass {
+  id: number;
   label: string;
   icon?: ReactNode;
 }

package/build/build-esm/index.js

@@ -22934,11 +22934,11 @@ var setMobileFilterType = _a$1.setMobileFilterType,
   setActiveSearchFieldProps = _a$1.setActiveSearchFieldProps,
   setSearchResults = _a$1.setSearchResults;
 _a$1.setLanguage;
-var setMobileDatePickerMode = _a$1.setMobileDatePickerMode,
-  setMinDate = _a$1.setMinDate,
-  setMaxDate = _a$1.setMaxDate,
-  setDateFlexibility = _a$1.setDateFlexibility,
-  setSelectedFlexRange = _a$1.setSelectedFlexRange;
+_a$1.setMobileDatePickerMode;
+_a$1.setMinDate;
+_a$1.setMaxDate;
+_a$1.setDateFlexibility;
+var setSelectedFlexRange = _a$1.setSelectedFlexRange;
 _a$1.setTravelTypes;
 var setSelectedTravelType = _a$1.setSelectedTravelType;
 _a$1.setTravelClasses;
@@ -24721,7 +24721,8 @@ var SearchInputGroup = function (_a) {
   }
   var label = config.label,
     placeholder = config.placeholder,
-    options = config.options;
+    options = config.options,
+    autoComplete = config.autoComplete;
   var selector = useMemo(
     function () {
       return function (state) {
@@ -24754,7 +24755,7 @@ var SearchInputGroup = function (_a) {
       dispatch(setFieldValue({ fieldKey: fieldKey, value: input }));
       dispatch(setSearchResults([]));
       if (small) return;
-      if (input.length === 3) {
+      if (input.length === 3 && autoComplete) {
         var exactIataMatch = findExactIataMatch(options, input);
         if (exactIataMatch) {
           dispatch(setFieldValue({ fieldKey: fieldKey, value: exactIataMatch.value }));
@@ -25030,180 +25031,6 @@ var DoubleSearchInputGroup = function (_a) {
   );
 };
 
-var DatePicker = function () {
-  var dispatch = useDispatch();
-  var isSmallScreen = useMediaQuery('(max-width: 768px)');
-  /* 🔑  STATE FIRST (no TDZ issues) */
-  var _a = useState(false),
-    isOpen = _a[0],
-    setIsOpen = _a[1]; // range pop-over
-  var _b = useState(false),
-    isSingleOpen = _b[0],
-    setIsSingleOpen = _b[1]; // single pop-over
-  var _c = useContext(QSMConfigurationContext),
-    datesIcon = _c.datesIcon,
-    _d = _c.showReturnDate,
-    showReturnDate = _d === void 0 ? true : _d,
-    minDate = _c.minDate,
-    maxDate = _c.maxDate,
-    _e = _c.dateFlexibility,
-    dateFlexibility = _e === void 0 ? [] : _e;
-  var isSingleDate = !showReturnDate;
-  var dateInputWrapperRef = useRef(null);
-  var dateInputRef = useRef(null);
-  var today = startOfDay(new Date());
-  var effectiveMinDate = minDate !== null && minDate !== void 0 ? minDate : today;
-  var effectiveMaxDate = maxDate !== null && maxDate !== void 0 ? maxDate : addYears(today, 1);
-  var _f = useSelector(function (state) {
-      return {
-        fromDate: state.qsm.fromDate,
-        toDate: state.qsm.toDate
-      };
-    }),
-    fromDate = _f.fromDate,
-    toDate = _f.toDate;
-  /* ----------------------- outside click close ----------------------- */
-  useEffect(function () {
-    var handleClickOutside = function (event) {
-      if (
-        dateInputWrapperRef.current &&
-        !dateInputWrapperRef.current.contains(event.target) &&
-        dateInputRef.current &&
-        !dateInputRef.current.contains(event.target)
-      ) {
-        setIsOpen(false);
-        setIsSingleOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  /* ----------------------- min/max & flexibility sync ---------------- */
-  useEffect(
-    function () {
-      dispatch(setMinDate(effectiveMinDate.toISOString()));
-      dispatch(setMaxDate(effectiveMaxDate.toISOString()));
-    },
-    [dispatch, effectiveMinDate, effectiveMaxDate]
-  );
-  useEffect(
-    function () {
-      if (dateFlexibility.length) {
-        dispatch(setDateFlexibility(dateFlexibility));
-      }
-    },
-    [dispatch, JSON.stringify(dateFlexibility)]
-  );
-  /* =================== SINGLE DATE (only departure) ================= */
-  if (isSingleDate) {
-    return React.createElement(
-      'div',
-      { className: 'qsm__double-input', ref: dateInputWrapperRef },
-      React.createElement(
-        'div',
-        {
-          className: 'qsm__input-wrapper',
-          onClick: function () {
-            if (isSmallScreen) {
-              dispatch(setMobileDatePickerMode('single'));
-              dispatch(setMobileFilterType('date'));
-            } else {
-              setIsSingleOpen(true);
-            }
-          }
-        },
-        datesIcon && React.createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-        React.createElement('label', { className: 'qsm__label' }, 'Vertrek'),
-        React.createElement('input', {
-          type: 'text',
-          className: 'qsm__input u-ps-2',
-          placeholder: 'Datum',
-          readOnly: true,
-          value: fromDate ? format$1(new Date(fromDate), 'dd/MM/yyyy') : ''
-        })
-      ),
-      !isSmallScreen &&
-        isSingleOpen &&
-        React.createElement(
-          'div',
-          { className: 'qsm__datepicker-popover', ref: dateInputRef },
-          React.createElement(DateRangePicker, {
-            fromDate: fromDate ? new Date(fromDate) : undefined,
-            onSelectionChange: function (from) {
-              dispatch(setFromDate(from ? from.toISOString() : undefined));
-              dispatch(setToDate(undefined));
-            },
-            onRequestClose: function () {
-              return setIsSingleOpen(false);
-            },
-            isSingleDate: true
-          })
-        )
-    );
-  }
-  /* ======================== RANGE PICKER ============================= */
-  var handleFromDateClick = function () {
-    if (isSmallScreen) {
-      dispatch(setMobileDatePickerMode('range'));
-      dispatch(setMobileFilterType('date'));
-    } else {
-      setIsOpen(true);
-    }
-  };
-  return React.createElement(
-    'div',
-    { className: 'qsm__double-input', ref: dateInputWrapperRef },
-    React.createElement(
-      'label',
-      { className: 'qsm__input-wrapper', onClick: handleFromDateClick },
-      datesIcon && React.createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-      React.createElement('span', { className: 'qsm__label' }, 'Vertrek'),
-      React.createElement('input', {
-        type: 'text',
-        id: 'vertrek',
-        className: 'qsm__input u-ps-2',
-        placeholder: 'Datum',
-        readOnly: true,
-        value: fromDate ? format$1(new Date(fromDate), 'dd/MM/yyyy') : ''
-      }),
-      React.createElement('div', { className: 'qsm__input-line qsm__input-line--datepicker' })
-    ),
-    React.createElement(
-      'label',
-      { className: 'qsm__input-wrapper', onClick: handleFromDateClick },
-      datesIcon && React.createElement('span', { className: 'qsm__input-icon' }, datesIcon),
-      React.createElement('span', { className: 'qsm__label qsm__label--second-input-label' }, 'Retour'),
-      React.createElement('input', {
-        type: 'text',
-        id: 'retour',
-        className: 'qsm__input',
-        placeholder: 'Datum',
-        readOnly: true,
-        value: toDate ? format$1(new Date(toDate), 'dd/MM/yyyy') : ''
-      })
-    ),
-    isOpen &&
-      !isSmallScreen &&
-      React.createElement(
-        'div',
-        { className: 'qsm__datepicker-popover', ref: dateInputRef },
-        React.createElement(DateRangePicker, {
-          fromDate: fromDate ? new Date(fromDate) : undefined,
-          toDate: toDate ? new Date(toDate) : undefined,
-          onSelectionChange: function (from, to) {
-            dispatch(setFromDate(from ? from.toISOString() : undefined));
-            dispatch(setToDate(to ? to.toISOString() : undefined));
-          },
-          onRequestClose: function () {
-            return setIsOpen(false);
-          }
-        })
-      )
-  );
-};
-
 var selectTravelerSummary = function (state, areTravelersInRooms) {
   var _a = state.qsm,
     adults = _a.adults,
@@ -25327,11 +25154,7 @@ var ItemPicker$1 = function (_a) {
   var _b = useState(false),
     isDropdownOpen = _b[0],
     setIsDropdownOpen = _b[1];
-  var _c = useState('down'),
-    openDirection = _c[0],
-    setOpenDirection = _c[1];
   var dropdownRef = useRef(null);
-  var dropdownMenuRef = useRef(null);
   var toggleButtonRef = useRef(null);
   var handlePick = function (picked) {
     setIsDropdownOpen(false);
@@ -25348,19 +25171,6 @@ var ItemPicker$1 = function (_a) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  useEffect(
-    function () {
-      var _a, _b;
-      if (isDropdownOpen && toggleButtonRef.current) {
-        var buttonRect = toggleButtonRef.current.getBoundingClientRect();
-        var spaceBelow = window.innerHeight - buttonRect.bottom;
-        var spaceAbove = buttonRect.top;
-        var dropdownHeight = (_b = (_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 16;
-        setOpenDirection(spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down');
-      }
-    },
-    [isDropdownOpen]
-  );
   return React.createElement(
     'div',
     { className: 'dropdown__input ' + classModifier },
@@ -25385,7 +25195,7 @@ var ItemPicker$1 = function (_a) {
       isDropdownOpen &&
         React.createElement(
           'ul',
-          { className: 'dropdown-menu dropdown-menu--'.concat(openDirection), ref: dropdownMenuRef },
+          { className: 'dropdown-menu' },
           items.map(function (_a) {
             var label = _a.label,
               icon = _a.icon;
@@ -25454,17 +25264,97 @@ var TravelNationalityPicker = function () {
 };
 
 var QSMContainer = function () {
+  var dispatch = useDispatch();
   var isMobile = useMediaQuery('(max-width: 768px)');
-  var mobileFilterType = useSelector(function (state) {
-    return state.qsm.mobileFilterType;
+  var qsmState = useSelector(function (state) {
+    return state.qsm;
   });
+  var mobileFilterType = qsmState.mobileFilterType,
+    fromDate = qsmState.fromDate,
+    toDate = qsmState.toDate;
   var _a = useContext(QSMConfigurationContext),
     searchFields = _a.searchFields,
     askTravelers = _a.askTravelers,
     submitIcon = _a.submitIcon,
     submitLabel = _a.submitLabel,
     onSubmit = _a.onSubmit;
-  // ... read props from QSMConfigurationContext as needed
+  useEffect(
+    function () {
+      if (fromDate || toDate) return;
+      var startDate = addMonths(new Date(), 1);
+      var endDate = addDays(startDate, 7);
+      dispatch(setFromDate(startDate.toISOString()));
+      dispatch(setToDate(endDate.toISOString()));
+    },
+    [fromDate, toDate, dispatch]
+  );
+  var dateRange = useMemo(
+    function () {
+      if (!fromDate || !toDate) return undefined;
+      return {
+        fromDate: new Date(fromDate),
+        toDate: new Date(toDate)
+      };
+    },
+    [fromDate, toDate]
+  );
+  var handleDateChange = function (value) {
+    var _a, _b;
+    dispatch(setFromDate((_a = value.fromDate) === null || _a === void 0 ? void 0 : _a.toISOString()));
+    dispatch(setToDate((_b = value.toDate) === null || _b === void 0 ? void 0 : _b.toISOString()));
+  };
+  var handleSubmit = function () {
+    if (!onSubmit) return;
+    var selectedOrigin = qsmState.selectedOrigin,
+      selectedDestination = qsmState.selectedDestination,
+      selectedAirport = qsmState.selectedAirport,
+      fromDate = qsmState.fromDate,
+      toDate = qsmState.toDate,
+      travelers = qsmState.travelers,
+      selectedTravelClass = qsmState.selectedTravelClass,
+      selectedTravelType = qsmState.selectedTravelType,
+      selectedNationality = qsmState.selectedNationality,
+      adults = qsmState.adults,
+      kids = qsmState.kids,
+      babies = qsmState.babies,
+      rooms = qsmState.rooms,
+      selectedFlexRange = qsmState.selectedFlexRange,
+      language = qsmState.language;
+    var payload = {
+      selectedOrigin: selectedOrigin,
+      selectedDestination: selectedDestination,
+      selectedAirport: selectedAirport,
+      fromDate: fromDate,
+      toDate: toDate,
+      travelers: travelers,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelType,
+      nationality: selectedNationality,
+      adults: adults,
+      kids: kids,
+      babies: babies,
+      rooms: rooms,
+      dateFlexibility: selectedFlexRange,
+      language: language
+    };
+    addSearchFieldsToPayload(payload, searchFields, qsmState);
+    onSubmit(payload);
+  };
+  var addSearchFieldsToPayload = function (payload, fields, state) {
+    fields.forEach(function (field) {
+      if (field.type === 'single') {
+        var key = field.fieldKey;
+        payload[key] = state[key];
+      }
+      if (field.type === 'double' && field.fields) {
+        // recursively add each nested field
+        field.fields.forEach(function (nestedField) {
+          var key = nestedField.fieldKey;
+          payload[key] = state[key];
+        });
+      }
+    });
+  };
   return React.createElement(
     'div',
     { className: 'qsm' },
@@ -25554,6 +25444,8 @@ var QSMContainer = function () {
                 // onBlur={formik.handleBlur}
                 value: '',
                 // checked={formik.values.mainBookerId === travelerValues.id}
+                checked: true,
+                readOnly: true,
                 className: 'radiobutton__input'
               }),
               React.createElement('span', null, 'One accommodation')
@@ -25572,7 +25464,8 @@ var QSMContainer = function () {
                 // onBlur={formik.handleBlur}
                 value: '',
                 // checked={formik.values.mainBookerId === travelerValues.id}
-                className: 'radiobutton__input'
+                className: 'radiobutton__input',
+                disabled: true
               }),
               React.createElement('span', null, 'Multiple accommodations')
             )
@@ -25595,11 +25488,11 @@ var QSMContainer = function () {
           }
           return React.createElement(SearchInputGroup, { key: idx, fieldKey: field.fieldKey });
         }),
-        React.createElement(DatePicker, null),
+        React.createElement(Dates, { value: dateRange, onChange: handleDateChange }),
         askTravelers && React.createElement(TravelInputGroup, null),
         React.createElement(
           'button',
-          { type: 'button', className: 'cta', onClick: onSubmit },
+          { type: 'button', className: 'cta', onClick: handleSubmit },
           submitIcon && submitIcon.toString().length > 0 && React.createElement('span', null, submitIcon),
           React.createElement('span', null, submitLabel)
         )

package/build/build-esm/qsm/store/qsm-slice.d.ts

@@ -7,7 +7,6 @@ export interface QSMState {
   fromDate?: string;
   toDate?: string;
   travelers: any[];
-  travelClass?: string;
   mobileFilterType: MobileFilterType;
   searchResults: TypeaheadOption[];
   activeSearchField: string | null;

package/build/build-esm/qsm/types.d.ts

@@ -44,6 +44,7 @@ export interface BaseFieldConfig {
   label: string;
   placeholder: string;
   options: TypeaheadOption[];
+  autoComplete?: boolean;
 }
 export interface TypeaheadOption {
   key: string;
@@ -97,6 +98,7 @@ export interface TravelType {
   icon?: ReactNode;
 }
 export interface TravelClass {
+  id: number;
   label: string;
   icon?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.27",
+  "version": "1.4.29",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

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

@@ -1,30 +1,111 @@
-import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { QSMRootState } from '../../store/qsm-store';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import MobileFilterModal from '../mobile-filter-modal';
 import SearchInputGroup from '../search-input-group';
 import DoubleSearchInputGroup from '../double-search-input-group';
-import DatePicker from '../date-picker';
+import Dates from '../../../booking-product/components/dates';
 import TravelInputGroup from '../travel-input-group';
 import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
 import TravelNationalityPicker from '../travel-nationality-picker';
+import { addDays, addMonths } from 'date-fns';
+import { DateRange } from '../../../booking-product/types';
+import { setFromDate, setToDate } from '../../store/qsm-slice';
 
 const QSMContainer: React.FC = () => {
+  const dispatch = useDispatch();
   const isMobile = useMediaQuery('(max-width: 768px)');
-  const mobileFilterType = useSelector((state: QSMRootState) => state.qsm.mobileFilterType);
+  const qsmState = useSelector((state: QSMRootState) => state.qsm);
+  const { mobileFilterType, fromDate, toDate } = qsmState;
+  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = useContext(QSMConfigurationContext);
 
-  const {
-    searchFields,
-    askTravelers,
-    submitIcon,
-    submitLabel,
-    onSubmit
-    // ... read props from QSMConfigurationContext as needed
-  } = useContext(QSMConfigurationContext);
+  useEffect(() => {
+    if (fromDate || toDate) return;
+
+    const startDate = addMonths(new Date(), 1);
+    const endDate = addDays(startDate, 7);
+
+    dispatch(setFromDate(startDate.toISOString()));
+    dispatch(setToDate(endDate.toISOString()));
+  }, [fromDate, toDate, dispatch]);
+
+  const dateRange = useMemo<DateRange | undefined>(() => {
+    if (!fromDate || !toDate) return undefined;
+
+    return {
+      fromDate: new Date(fromDate),
+      toDate: new Date(toDate)
+    };
+  }, [fromDate, toDate]);
+
+  const handleDateChange = (value: DateRange) => {
+    dispatch(setFromDate(value.fromDate?.toISOString()));
+    dispatch(setToDate(value.toDate?.toISOString()));
+  };
+
+  const handleSubmit = () => {
+    if (!onSubmit) return;
+
+    const {
+      selectedOrigin,
+      selectedDestination,
+      selectedAirport,
+      fromDate,
+      toDate,
+      travelers,
+      selectedTravelClass,
+      selectedTravelType,
+      selectedNationality,
+      adults,
+      kids,
+      babies,
+      rooms,
+      selectedFlexRange,
+      language
+    } = qsmState;
+
+    const payload = {
+      selectedOrigin,
+      selectedDestination,
+      selectedAirport,
+      fromDate,
+      toDate,
+      travelers,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelType,
+      nationality: selectedNationality,
+      adults,
+      kids,
+      babies,
+      rooms,
+      dateFlexibility: selectedFlexRange,
+      language
+    };
+
+    addSearchFieldsToPayload(payload, searchFields, qsmState);
+    onSubmit(payload);
+  };
+
+  const addSearchFieldsToPayload = (payload: any, fields: typeof searchFields, state: any) => {
+    fields.forEach((field) => {
+      if (field.type === 'single') {
+        const key = field.fieldKey;
+        payload[key] = state[key];
+      }
+
+      if (field.type === 'double' && field.fields) {
+        // recursively add each nested field
+        field.fields.forEach((nestedField) => {
+          const key = nestedField.fieldKey;
+          payload[key] = state[key];
+        });
+      }
+    });
+  };
 
   return (
     <div className="qsm">
@@ -98,6 +179,8 @@ const QSMContainer: React.FC = () => {
                   // onBlur={formik.handleBlur}
                   value=""
                   // checked={formik.values.mainBookerId === travelerValues.id}
+                  checked={true}
+                  readOnly
                   className="radiobutton__input"
                 />
                 <span>One accommodation</span>
@@ -113,6 +196,7 @@ const QSMContainer: React.FC = () => {
                   value=""
                   // checked={formik.values.mainBookerId === travelerValues.id}
                   className="radiobutton__input"
+                  disabled={true}
                 />
                 <span>Multiple accommodations</span>
               </label>
@@ -132,34 +216,11 @@ const QSMContainer: React.FC = () => {
             return <SearchInputGroup key={idx} fieldKey={field.fieldKey} />;
           })}
 
-          <DatePicker />
+          <Dates value={dateRange} onChange={handleDateChange} />
 
           {askTravelers && <TravelInputGroup />}
 
-          {/* <label className="qsm__single-input-wrapper">
-            <svg id="qsm-marker-icon" viewBox="0 0 12.974 15.967" className="qsm__input-icon" width={13} height={16}>
-              <path
-                id="location_on_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                d="M174.491-856.016a1.432,1.432,0,0,0,1.056-.441,1.454,1.454,0,0,0,.437-1.06,1.431,1.431,0,0,0-.441-1.056,1.453,1.453,0,0,0-1.06-.437,1.431,1.431,0,0,0-1.056.441,1.453,1.453,0,0,0-.437,1.06,1.431,1.431,0,0,0,.441,1.056A1.453,1.453,0,0,0,174.491-856.016Zm0,6.009a23.088,23.088,0,0,0,3.732-4.1,6.21,6.21,0,0,0,1.258-3.347,4.923,4.923,0,0,0-1.424-3.618,4.819,4.819,0,0,0-3.566-1.435,4.819,4.819,0,0,0-3.566,1.435,4.923,4.923,0,0,0-1.424,3.618,6.21,6.21,0,0,0,1.258,3.347A23.086,23.086,0,0,0,174.487-850.008Zm0,1.975a26.673,26.673,0,0,1-4.875-5.064A7.813,7.813,0,0,1,168-857.451a6.394,6.394,0,0,1,1.85-4.668A6.222,6.222,0,0,1,174.476-864a6.256,6.256,0,0,1,4.636,1.882,6.375,6.375,0,0,1,1.861,4.668,7.8,7.8,0,0,1-1.6,4.345A26.652,26.652,0,0,1,174.487-848.033ZM174.487-857.513Z"
-                transform="translate(-168 864)"
-                // fill="#707070"
-              />
-            </svg>
-
-            <span className="qsm__label">hotel</span>
-
-            <input
-              type="text"
-              // value= 1
-              // readOnly={small}
-              // onClick={click}
-              // onChange={(e) => !small && !readOnlyForced && change(e.target.value)}
-              className="qsm__input"
-              placeholder="bestemming of hotel"
-            />
-          </label> */}
-
-          <button type="button" className="cta" onClick={onSubmit}>
+          <button type="button" className="cta" onClick={handleSubmit}>
             {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
             <span>{submitLabel}</span>
           </button>

package/src/qsm/components/item-picker/index.tsx

@@ -15,9 +15,7 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   const dispatch = useDispatch();
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [openDirection, setOpenDirection] = useState<'down' | 'up'>('down');
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
   const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const handlePick = (picked: string) => {
@@ -38,16 +36,6 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
     };
   }, []);
 
-  useEffect(() => {
-    if (isDropdownOpen && toggleButtonRef.current) {
-      const buttonRect = toggleButtonRef.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - buttonRect.bottom;
-      const spaceAbove = buttonRect.top;
-      const dropdownHeight = dropdownMenuRef.current?.offsetHeight ?? 16;
-      setOpenDirection(spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down');
-    }
-  }, [isDropdownOpen]);
-
   return (
     <div className={'dropdown__input ' + classModifier}>
       <span className="dropdown__label">{label}</span>
@@ -60,7 +48,7 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
           <span className="arrow">&#9662;</span>
         </button>
         {isDropdownOpen && (
-          <ul className={`dropdown-menu dropdown-menu--${openDirection}`} ref={dropdownMenuRef}>
+          <ul className="dropdown-menu">
             {items.map(({ label, icon }) => (
               <li
                 key={label}

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

@@ -49,7 +49,7 @@ const SearchInputGroup: React.FC<Props> = ({
     return null;
   }
 
-  const { label, placeholder, options } = config;
+  const { label, placeholder, options, autoComplete } = config;
 
   const selector = useMemo(() => (state: QSMRootState) => ((state.qsm as any)[fieldKey] ?? '') as string, [fieldKey]);
   const value = useSelector(selector);
@@ -74,7 +74,7 @@ const SearchInputGroup: React.FC<Props> = ({
 
       if (small) return;
 
-      if (input.length === 3) {
+      if (input.length === 3 && autoComplete) {
         const exactIataMatch = findExactIataMatch(options, input);
 
         if (exactIataMatch) {

package/src/qsm/store/qsm-slice.ts

@@ -10,7 +10,6 @@ export interface QSMState {
   fromDate?: string;
   toDate?: string;
   travelers: any[];
-  travelClass?: string;
   mobileFilterType: MobileFilterType;
   searchResults: TypeaheadOption[];
   activeSearchField: string | null;

package/src/qsm/types.ts

@@ -63,6 +63,7 @@ export interface BaseFieldConfig {
   label: string;
   placeholder: string;
   options: TypeaheadOption[];
+  autoComplete?: boolean;
 }
 
 export interface TypeaheadOption {
@@ -131,6 +132,7 @@ export interface TravelType {
 }
 
 export interface TravelClass {
+  id: number;
   label: string;
   icon?: ReactNode;
 }