@qite/tide-booking-component 1.4.25 → 1.4.26

package/build/build-cjs/index.js

@@ -23564,11 +23564,11 @@ var SearchInput = function (_a) {
   _a.label;
   var isSecondInput = _a.isSecondInput,
     isDoubleInput = _a.isDoubleInput;
-  var highlightMatch = function (text, highlight) {
+  var highlightMatch = function (option, highlight) {
     if (!highlight) {
-      return text;
+      return option.value;
     }
-    var parts = text.split(new RegExp('('.concat(highlight, ')'), 'gi'));
+    var parts = option.value.split(new RegExp('('.concat(highlight, ')'), 'gi'));
     return React__default['default'].createElement(
       'span',
       null,
@@ -23589,14 +23589,18 @@ var SearchInput = function (_a) {
         .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
         .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
     },
-    searchResults.map(function (result, index) {
+    searchResults.map(function (option, index) {
       return React__default['default'].createElement(
         'div',
         {
           key: index,
           className: 'qsm__double-input-option',
-          onClick: function () {
-            return onOptionSelect(result);
+          onMouseDown: function (e) {
+            return e.preventDefault();
+          },
+          onClick: function (e) {
+            e.stopPropagation();
+            onOptionSelect(option);
           },
           role: 'option',
           'aria-selected': false
@@ -23604,15 +23608,16 @@ var SearchInput = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'qsm__double-input-option-content' },
-          React__default['default'].createElement(Icon$1, { name: 'ui-location', height: 16 }),
+          React__default['default'].createElement(Icon$1, { name: option.type == 'hotel' ? 'ui-hotel' : 'ui-location', height: 16 }),
           React__default['default'].createElement(
             'div',
             { className: 'qsm__double-input-option-content-text' },
-            highlightMatch(result, highlightTarget),
-            React__default['default'].createElement('span', { className: 'qsm__double-input-option-content-country' }, 'Belgi\u00EB')
+            highlightMatch(option, highlightTarget),
+            option.country && React__default['default'].createElement('span', { className: 'qsm__double-input-option-content-country' }, option.country)
           )
         ),
-        React__default['default'].createElement('span', { className: 'qsm__double-input-option-content-airport-label' }, '[BRU]')
+        option.iataCode &&
+          React__default['default'].createElement('span', { className: 'qsm__double-input-option-content-airport-label' }, '[', option.iataCode, ']')
       );
     })
   );
@@ -24609,26 +24614,41 @@ var MobileFilterModal = function () {
     hasTypedRef.current = false;
     dispatch(closeMobileFilter());
   };
+  // const handleLocationChange = (val: string) => {
+  //   setInputValue(val);
+  //   hasTypedRef.current = true;
+  //   if (val.trim() !== '' && activeSearchFieldProps) {
+  //     const filtered = activeSearchFieldProps.options.filter((loc) => loc.value.toLowerCase().includes(val.toLowerCase())).map((loc) => loc.value);
+  //     setSearchResultsLocal(filtered);
+  //   } else {
+  //     setSearchResultsLocal([]);
+  //   }
+  // };
   var handleLocationChange = function (val) {
     setInputValue(val);
     hasTypedRef.current = true;
     if (val.trim() !== '' && activeSearchFieldProps) {
-      var filtered = activeSearchFieldProps.options
-        .filter(function (loc) {
-          return loc.value.toLowerCase().includes(val.toLowerCase());
-        })
-        .map(function (loc) {
-          return loc.value;
-        });
+      var filtered = activeSearchFieldProps.options.filter(function (option) {
+        return option.value.toLowerCase().includes(val.toLowerCase());
+      });
       setSearchResultsLocal(filtered);
     } else {
       setSearchResultsLocal([]);
     }
   };
-  var handleLocationSelect = function (val) {
+  // const handleLocationSelect = (val: string) => {
+  //   if (activeSearchFieldProps) {
+  //     const { fieldKey } = activeSearchFieldProps;
+  //     dispatch(setFieldValue({ fieldKey, value: val }));
+  //     dispatch(setSearchResultsAction([]));
+  //     dispatch(setActiveSearchField(null));
+  //   }
+  //   dispatch(closeMobileFilter());
+  // };
+  var handleLocationSelect = function (option) {
     if (activeSearchFieldProps) {
       var fieldKey = activeSearchFieldProps.fieldKey;
-      dispatch(setFieldValue({ fieldKey: fieldKey, value: val }));
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: option.value }));
       dispatch(setSearchResults([]));
       dispatch(setActiveSearchField(null));
     }
@@ -24818,7 +24838,6 @@ var MobileFilterModal = function () {
   }
 };
 
-// SearchInputGroup.tsx
 var findConfig = function (all, key) {
   for (var _i = 0, all_1 = all; _i < all_1.length; _i++) {
     var config = all_1[_i];
@@ -24859,17 +24878,6 @@ var SearchInputGroup = function (_a) {
   var label = config.label,
     placeholder = config.placeholder,
     options = config.options;
-  var lowerOptions = React.useMemo(
-    function () {
-      return options.map(function (x) {
-        return {
-          value: x.value,
-          lower: x.value.toLowerCase()
-        };
-      });
-    },
-    [options]
-  );
   var selector = React.useMemo(
     function () {
       return function (state) {
@@ -24886,30 +24894,44 @@ var SearchInputGroup = function (_a) {
     searchResults = _g.searchResults,
     activeSearchField = _g.activeSearchField;
   var match = React.useCallback(
-    function (option) {
-      if (!option) {
+    function (input) {
+      if (!input) {
         return [];
       }
-      var lowered = option.toLowerCase();
-      return lowerOptions
-        .filter(function (x) {
-          return x.lower.includes(lowered);
-        })
-        .map(function (x) {
-          return x.value;
-        });
+      var lowered = input.toLowerCase();
+      return options.filter(function (option) {
+        return option.value.toLowerCase().includes(lowered);
+      });
     },
-    [lowerOptions]
+    [options]
   );
-  var change = React.useCallback(
-    function (val) {
-      dispatch(setFieldValue({ fieldKey: fieldKey, value: val }));
+  var handleInputChange = React.useCallback(
+    function (input) {
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: input }));
       dispatch(setSearchResults([]));
-      if (!small) {
-        dispatch(setSearchResults(match(val)));
+      if (small) return;
+      if (input.length === 3) {
+        var exactIataMatch = findExactIataMatch(options, input);
+        if (exactIataMatch) {
+          dispatch(setFieldValue({ fieldKey: fieldKey, value: exactIataMatch.value }));
+          dispatch(setSearchResults([]));
+          dispatch(setActiveSearchField(null));
+          return;
+        }
       }
+      // Normal typeahead behavior
+      dispatch(setActiveSearchField(fieldKey));
+      dispatch(setSearchResults(match(input)));
     },
-    [dispatch, fieldKey, small, match]
+    [dispatch, fieldKey, small, match, options]
+  );
+  var handleOptionSelect = React.useCallback(
+    function (option) {
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: option.value }));
+      dispatch(setSearchResults([]));
+      dispatch(setActiveSearchField(null));
+    },
+    [dispatch, fieldKey]
   );
   var click = function () {
     dispatch(setActiveSearchField(fieldKey));
@@ -24929,6 +24951,11 @@ var SearchInputGroup = function (_a) {
       dispatch(setSearchResults(match(value)));
     }
   };
+  var findExactIataMatch = function (options, input) {
+    return options.find(function (option) {
+      return option.iataCode && option.iataCode.toLowerCase() === input.toLowerCase();
+    });
+  };
   React.useEffect(
     function () {
       var outside = function (e) {
@@ -24965,9 +24992,12 @@ var SearchInputGroup = function (_a) {
       name: fieldKey,
       value: value,
       readOnly: small,
-      onClick: click,
+      onFocus: click,
+      onClick: function (e) {
+        return e.stopPropagation();
+      },
       onChange: function (e) {
-        return !small && !readOnlyForced && change(e.target.value);
+        return !small && !readOnlyForced && handleInputChange(e.target.value);
       },
       className: 'qsm__input'.concat(isSecondInput ? ' qsm__input--splittable' : ' u-ps-2'),
       placeholder: placeholder
@@ -24975,12 +25005,9 @@ var SearchInputGroup = function (_a) {
     !small &&
       activeSearchField === fieldKey &&
       React__default['default'].createElement(SearchInput, {
-        onChange: change,
+        onChange: handleInputChange,
         searchResults: searchResults,
-        onOptionSelect: function (val) {
-          change(val);
-          dispatch(setActiveSearchField(null));
-        },
+        onOptionSelect: handleOptionSelect,
         highlightTarget: highlightTarget,
         label: label,
         isSecondInput: isSecondInput,
@@ -25148,7 +25175,7 @@ var DoubleSearchInputGroup = function (_a) {
           { className: 'qsm__reverse-wrapper' },
           React__default['default'].createElement(
             'button',
-            { type: 'button', onClick: reverse, className: 'qsm__input-line--reverse-button' },
+            { type: 'button', onClick: reverse, className: 'qsm__input-line--reverse-button', tabIndex: -1 },
             React__default['default'].createElement(
               'svg',
               { id: 'qsm-planes-icon', viewBox: '0 0 18 18', width: 18, height: 18 },
@@ -25394,17 +25421,22 @@ var TravelInputGroup = function () {
       });
     }
   };
-  React.useEffect(function () {
-    var handleClickOutside = function (event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setIsOpen(false);
+  React.useEffect(
+    function () {
+      var handleClickOutside = function (event) {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClickOutside);
       }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    },
+    [isOpen]
+  );
   React.useEffect(
     function () {
       if (initDone.current) {
@@ -25432,8 +25464,8 @@ var TravelInputGroup = function () {
     [defaultTravelers, maxTravelers]
   );
   return React__default['default'].createElement(
-    'label',
-    { className: 'qsm__single-input-wrapper qsm__single-input-wrapper--travel' },
+    'div',
+    { ref: wrapperRef, className: 'qsm__single-input-wrapper qsm__single-input-wrapper--travel' },
     React__default['default'].createElement(Icon$1, { name: 'ui-user', height: 16 }),
     React__default['default'].createElement('span', { className: 'qsm__label' }, 'Met wie ga je?'),
     React__default['default'].createElement('input', {

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { TypeaheadOption } from '../../types';
 interface SearchInputProps {
   onChange: (input: string) => void;
-  searchResults: string[];
-  onOptionSelect: (val: string) => void;
+  searchResults: TypeaheadOption[];
+  onOptionSelect: (val: TypeaheadOption) => void;
   highlightTarget: string;
   label: string;
   isSecondInput?: boolean;

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

@@ -1,4 +1,4 @@
-import { MobileFilterType, Room, TravelerType, TravelType, TravelClass } from '../types';
+import { MobileFilterType, Room, TravelerType, TravelType, TravelClass, TypeaheadOption } from '../types';
 import { ReactNode } from 'react';
 export interface QSMState {
   selectedOrigin?: string;
@@ -9,16 +9,14 @@ export interface QSMState {
   travelers: any[];
   travelClass?: string;
   mobileFilterType: MobileFilterType;
-  searchResults: string[];
+  searchResults: TypeaheadOption[];
   activeSearchField: string | null;
   activeSearchFieldProps: {
     fieldKey: string;
     label: string;
     placeholder: string;
     value: string;
-    options: {
-      value: string;
-    }[];
+    options: TypeaheadOption[];
   } | null;
   language: 'nl' | 'fr' | 'en';
   mobileDatePickerMode: 'range' | 'single';
@@ -63,13 +61,11 @@ export declare const setOrigin: import('@reduxjs/toolkit').ActionCreatorWithPayl
       label: string;
       placeholder: string;
       value: string;
-      options: {
-        value: string;
-      }[];
+      options: TypeaheadOption[];
     },
     'qsm/setActiveSearchFieldProps'
   >,
-  setSearchResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<string[], 'qsm/setSearchResults'>,
+  setSearchResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<TypeaheadOption[], 'qsm/setSearchResults'>,
   setLanguage: import('@reduxjs/toolkit').ActionCreatorWithPayload<'nl' | 'fr' | 'en', 'qsm/setLanguage'>,
   setMobileDatePickerMode: import('@reduxjs/toolkit').ActionCreatorWithPayload<'range' | 'single', 'qsm/setMobileDatePickerMode'>,
   setMinDate: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<string | undefined, 'qsm/setMinDate'>,

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

@@ -47,6 +47,8 @@ export interface BaseFieldConfig {
 export interface TypeaheadOption {
   key: string;
   value: string;
+  iataCode?: string;
+  country?: string;
   type: OptionType;
 }
 export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
@@ -89,6 +91,7 @@ export interface Room {
   babies: number;
 }
 export interface TravelType {
+  id: number;
   label: string;
   icon?: ReactNode;
 }

package/build/build-esm/index.js

@@ -23422,11 +23422,11 @@ var SearchInput = function (_a) {
   _a.label;
   var isSecondInput = _a.isSecondInput,
     isDoubleInput = _a.isDoubleInput;
-  var highlightMatch = function (text, highlight) {
+  var highlightMatch = function (option, highlight) {
     if (!highlight) {
-      return text;
+      return option.value;
     }
-    var parts = text.split(new RegExp('('.concat(highlight, ')'), 'gi'));
+    var parts = option.value.split(new RegExp('('.concat(highlight, ')'), 'gi'));
     return React.createElement(
       'span',
       null,
@@ -23447,14 +23447,18 @@ var SearchInput = function (_a) {
         .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
         .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
     },
-    searchResults.map(function (result, index) {
+    searchResults.map(function (option, index) {
       return React.createElement(
         'div',
         {
           key: index,
           className: 'qsm__double-input-option',
-          onClick: function () {
-            return onOptionSelect(result);
+          onMouseDown: function (e) {
+            return e.preventDefault();
+          },
+          onClick: function (e) {
+            e.stopPropagation();
+            onOptionSelect(option);
           },
           role: 'option',
           'aria-selected': false
@@ -23462,15 +23466,15 @@ var SearchInput = function (_a) {
         React.createElement(
           'div',
           { className: 'qsm__double-input-option-content' },
-          React.createElement(Icon$1, { name: 'ui-location', height: 16 }),
+          React.createElement(Icon$1, { name: option.type == 'hotel' ? 'ui-hotel' : 'ui-location', height: 16 }),
           React.createElement(
             'div',
             { className: 'qsm__double-input-option-content-text' },
-            highlightMatch(result, highlightTarget),
-            React.createElement('span', { className: 'qsm__double-input-option-content-country' }, 'Belgi\u00EB')
+            highlightMatch(option, highlightTarget),
+            option.country && React.createElement('span', { className: 'qsm__double-input-option-content-country' }, option.country)
           )
         ),
-        React.createElement('span', { className: 'qsm__double-input-option-content-airport-label' }, '[BRU]')
+        option.iataCode && React.createElement('span', { className: 'qsm__double-input-option-content-airport-label' }, '[', option.iataCode, ']')
       );
     })
   );
@@ -24452,26 +24456,41 @@ var MobileFilterModal = function () {
     hasTypedRef.current = false;
     dispatch(closeMobileFilter());
   };
+  // const handleLocationChange = (val: string) => {
+  //   setInputValue(val);
+  //   hasTypedRef.current = true;
+  //   if (val.trim() !== '' && activeSearchFieldProps) {
+  //     const filtered = activeSearchFieldProps.options.filter((loc) => loc.value.toLowerCase().includes(val.toLowerCase())).map((loc) => loc.value);
+  //     setSearchResultsLocal(filtered);
+  //   } else {
+  //     setSearchResultsLocal([]);
+  //   }
+  // };
   var handleLocationChange = function (val) {
     setInputValue(val);
     hasTypedRef.current = true;
     if (val.trim() !== '' && activeSearchFieldProps) {
-      var filtered = activeSearchFieldProps.options
-        .filter(function (loc) {
-          return loc.value.toLowerCase().includes(val.toLowerCase());
-        })
-        .map(function (loc) {
-          return loc.value;
-        });
+      var filtered = activeSearchFieldProps.options.filter(function (option) {
+        return option.value.toLowerCase().includes(val.toLowerCase());
+      });
       setSearchResultsLocal(filtered);
     } else {
       setSearchResultsLocal([]);
     }
   };
-  var handleLocationSelect = function (val) {
+  // const handleLocationSelect = (val: string) => {
+  //   if (activeSearchFieldProps) {
+  //     const { fieldKey } = activeSearchFieldProps;
+  //     dispatch(setFieldValue({ fieldKey, value: val }));
+  //     dispatch(setSearchResultsAction([]));
+  //     dispatch(setActiveSearchField(null));
+  //   }
+  //   dispatch(closeMobileFilter());
+  // };
+  var handleLocationSelect = function (option) {
     if (activeSearchFieldProps) {
       var fieldKey = activeSearchFieldProps.fieldKey;
-      dispatch(setFieldValue({ fieldKey: fieldKey, value: val }));
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: option.value }));
       dispatch(setSearchResults([]));
       dispatch(setActiveSearchField(null));
     }
@@ -24657,7 +24676,6 @@ var MobileFilterModal = function () {
   }
 };
 
-// SearchInputGroup.tsx
 var findConfig = function (all, key) {
   for (var _i = 0, all_1 = all; _i < all_1.length; _i++) {
     var config = all_1[_i];
@@ -24698,17 +24716,6 @@ var SearchInputGroup = function (_a) {
   var label = config.label,
     placeholder = config.placeholder,
     options = config.options;
-  var lowerOptions = useMemo(
-    function () {
-      return options.map(function (x) {
-        return {
-          value: x.value,
-          lower: x.value.toLowerCase()
-        };
-      });
-    },
-    [options]
-  );
   var selector = useMemo(
     function () {
       return function (state) {
@@ -24725,30 +24732,44 @@ var SearchInputGroup = function (_a) {
     searchResults = _g.searchResults,
     activeSearchField = _g.activeSearchField;
   var match = useCallback(
-    function (option) {
-      if (!option) {
+    function (input) {
+      if (!input) {
         return [];
       }
-      var lowered = option.toLowerCase();
-      return lowerOptions
-        .filter(function (x) {
-          return x.lower.includes(lowered);
-        })
-        .map(function (x) {
-          return x.value;
-        });
+      var lowered = input.toLowerCase();
+      return options.filter(function (option) {
+        return option.value.toLowerCase().includes(lowered);
+      });
     },
-    [lowerOptions]
+    [options]
   );
-  var change = useCallback(
-    function (val) {
-      dispatch(setFieldValue({ fieldKey: fieldKey, value: val }));
+  var handleInputChange = useCallback(
+    function (input) {
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: input }));
       dispatch(setSearchResults([]));
-      if (!small) {
-        dispatch(setSearchResults(match(val)));
+      if (small) return;
+      if (input.length === 3) {
+        var exactIataMatch = findExactIataMatch(options, input);
+        if (exactIataMatch) {
+          dispatch(setFieldValue({ fieldKey: fieldKey, value: exactIataMatch.value }));
+          dispatch(setSearchResults([]));
+          dispatch(setActiveSearchField(null));
+          return;
+        }
       }
+      // Normal typeahead behavior
+      dispatch(setActiveSearchField(fieldKey));
+      dispatch(setSearchResults(match(input)));
     },
-    [dispatch, fieldKey, small, match]
+    [dispatch, fieldKey, small, match, options]
+  );
+  var handleOptionSelect = useCallback(
+    function (option) {
+      dispatch(setFieldValue({ fieldKey: fieldKey, value: option.value }));
+      dispatch(setSearchResults([]));
+      dispatch(setActiveSearchField(null));
+    },
+    [dispatch, fieldKey]
   );
   var click = function () {
     dispatch(setActiveSearchField(fieldKey));
@@ -24768,6 +24789,11 @@ var SearchInputGroup = function (_a) {
       dispatch(setSearchResults(match(value)));
     }
   };
+  var findExactIataMatch = function (options, input) {
+    return options.find(function (option) {
+      return option.iataCode && option.iataCode.toLowerCase() === input.toLowerCase();
+    });
+  };
   useEffect(
     function () {
       var outside = function (e) {
@@ -24800,9 +24826,12 @@ var SearchInputGroup = function (_a) {
       name: fieldKey,
       value: value,
       readOnly: small,
-      onClick: click,
+      onFocus: click,
+      onClick: function (e) {
+        return e.stopPropagation();
+      },
       onChange: function (e) {
-        return !small && !readOnlyForced && change(e.target.value);
+        return !small && !readOnlyForced && handleInputChange(e.target.value);
       },
       className: 'qsm__input'.concat(isSecondInput ? ' qsm__input--splittable' : ' u-ps-2'),
       placeholder: placeholder
@@ -24810,12 +24839,9 @@ var SearchInputGroup = function (_a) {
     !small &&
       activeSearchField === fieldKey &&
       React.createElement(SearchInput, {
-        onChange: change,
+        onChange: handleInputChange,
         searchResults: searchResults,
-        onOptionSelect: function (val) {
-          change(val);
-          dispatch(setActiveSearchField(null));
-        },
+        onOptionSelect: handleOptionSelect,
         highlightTarget: highlightTarget,
         label: label,
         isSecondInput: isSecondInput,
@@ -24978,7 +25004,7 @@ var DoubleSearchInputGroup = function (_a) {
           { className: 'qsm__reverse-wrapper' },
           React.createElement(
             'button',
-            { type: 'button', onClick: reverse, className: 'qsm__input-line--reverse-button' },
+            { type: 'button', onClick: reverse, className: 'qsm__input-line--reverse-button', tabIndex: -1 },
             React.createElement(
               'svg',
               { id: 'qsm-planes-icon', viewBox: '0 0 18 18', width: 18, height: 18 },
@@ -25224,17 +25250,22 @@ var TravelInputGroup = function () {
       });
     }
   };
-  useEffect(function () {
-    var handleClickOutside = function (event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setIsOpen(false);
+  useEffect(
+    function () {
+      var handleClickOutside = function (event) {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClickOutside);
       }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    },
+    [isOpen]
+  );
   useEffect(
     function () {
       if (initDone.current) {
@@ -25262,8 +25293,8 @@ var TravelInputGroup = function () {
     [defaultTravelers, maxTravelers]
   );
   return React.createElement(
-    'label',
-    { className: 'qsm__single-input-wrapper qsm__single-input-wrapper--travel' },
+    'div',
+    { ref: wrapperRef, className: 'qsm__single-input-wrapper qsm__single-input-wrapper--travel' },
     React.createElement(Icon$1, { name: 'ui-user', height: 16 }),
     React.createElement('span', { className: 'qsm__label' }, 'Met wie ga je?'),
     React.createElement('input', {

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { TypeaheadOption } from '../../types';
 interface SearchInputProps {
   onChange: (input: string) => void;
-  searchResults: string[];
-  onOptionSelect: (val: string) => void;
+  searchResults: TypeaheadOption[];
+  onOptionSelect: (val: TypeaheadOption) => void;
   highlightTarget: string;
   label: string;
   isSecondInput?: boolean;

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

@@ -1,4 +1,4 @@
-import { MobileFilterType, Room, TravelerType, TravelType, TravelClass } from '../types';
+import { MobileFilterType, Room, TravelerType, TravelType, TravelClass, TypeaheadOption } from '../types';
 import { ReactNode } from 'react';
 export interface QSMState {
   selectedOrigin?: string;
@@ -9,16 +9,14 @@ export interface QSMState {
   travelers: any[];
   travelClass?: string;
   mobileFilterType: MobileFilterType;
-  searchResults: string[];
+  searchResults: TypeaheadOption[];
   activeSearchField: string | null;
   activeSearchFieldProps: {
     fieldKey: string;
     label: string;
     placeholder: string;
     value: string;
-    options: {
-      value: string;
-    }[];
+    options: TypeaheadOption[];
   } | null;
   language: 'nl' | 'fr' | 'en';
   mobileDatePickerMode: 'range' | 'single';
@@ -63,13 +61,11 @@ export declare const setOrigin: import('@reduxjs/toolkit').ActionCreatorWithPayl
       label: string;
       placeholder: string;
       value: string;
-      options: {
-        value: string;
-      }[];
+      options: TypeaheadOption[];
     },
     'qsm/setActiveSearchFieldProps'
   >,
-  setSearchResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<string[], 'qsm/setSearchResults'>,
+  setSearchResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<TypeaheadOption[], 'qsm/setSearchResults'>,
   setLanguage: import('@reduxjs/toolkit').ActionCreatorWithPayload<'nl' | 'fr' | 'en', 'qsm/setLanguage'>,
   setMobileDatePickerMode: import('@reduxjs/toolkit').ActionCreatorWithPayload<'range' | 'single', 'qsm/setMobileDatePickerMode'>,
   setMinDate: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<string | undefined, 'qsm/setMinDate'>,

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

@@ -47,6 +47,8 @@ export interface BaseFieldConfig {
 export interface TypeaheadOption {
   key: string;
   value: string;
+  iataCode?: string;
+  country?: string;
   type: OptionType;
 }
 export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
@@ -89,6 +91,7 @@ export interface Room {
   babies: number;
 }
 export interface TravelType {
+  id: number;
   label: string;
   icon?: ReactNode;
 }

package/package.json

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

package/src/content/features/content-page/content-page-self-contained.tsx

@@ -4,7 +4,7 @@ import { TideLogo, language, languages, topLinks, navItems } from '../../../../s
 import Icon from '../../components/icon';
 import ContactForm from '../../components/contact';
 import Slider from '../../components/slider';
-import { QSMConfiguration, TypeaheadOption } from '../../../qsm/types';
+import { Nationality, QSMConfiguration, TypeaheadOption } from '../../../qsm/types';
 import QSM from '../../../qsm';
 
 interface ContentPageSelfContainedProps {
@@ -38,6 +38,15 @@ const destinations: TypeaheadOption[] = [
   { key: 'SIN', value: 'Singapore Changi', type: 'location' }
 ];
 
+const nationalities: Nationality[] = [
+  { id: 1, label: 'Nederland' },
+  { id: 2, label: 'België' },
+  { id: 3, label: 'Duitsland' },
+  { id: 4, label: 'Frankrijk' },
+  { id: 5, label: 'Verenigd Koninkrijk' },
+  { id: 6, label: 'Spanje' }
+];
+
 const configuration: QSMConfiguration = {
   type: 'hotel',
   askTravelers: true,
@@ -135,6 +144,8 @@ const configuration: QSMConfiguration = {
   travelClasses: [],
   travelClassIcon: '',
 
+  nationalities: nationalities,
+
   dateFlexibility: [
     {
       name: '1 dag voor en na',

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

@@ -11,6 +11,7 @@ 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';
 
 const QSMContainer: React.FC = () => {
   const isMobile = useMediaQuery('(max-width: 768px)');
@@ -120,6 +121,7 @@ const QSMContainer: React.FC = () => {
           <div className="qsm__filter__classgroup">
             <TravelClassPicker />
             <TravelTypePicker />
+            <TravelNationalityPicker />
           </div>
         </div>
         <div className="qsm__input-group">

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { TravelClass, TravelType } from '../../types';
+import { Nationality, TravelClass, TravelType } from '../../types';
 
 interface ItemPickerProps {
-  items: TravelType[] | TravelClass[];
+  items: TravelType[] | TravelClass[] | Nationality[];
   selection: string | undefined;
   label: string;
   placeholder: string;
@@ -21,8 +21,8 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const handlePick = (picked: string) => {
-    dispatch(onPick(picked));
     setIsDropdownOpen(false);
+    dispatch(onPick(picked));
   };
 
   useEffect(() => {
@@ -49,7 +49,7 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   }, [isDropdownOpen]);
 
   return (
-    <label className={'dropdown__input ' + classModifier}>
+    <div className={'dropdown__input ' + classModifier}>
       <span className="dropdown__label">{label}</span>
       <div className="dropdown">
         <button
@@ -62,7 +62,13 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
         {isDropdownOpen && (
           <ul className={`dropdown-menu dropdown-menu--${openDirection}`} ref={dropdownMenuRef}>
             {items.map(({ label, icon }) => (
-              <li key={label} onClick={() => handlePick(label)} className={`dropdown-menu__item${selection === label ? ' dropdown-menu__item--selected' : ''}`}>
+              <li
+                key={label}
+                onClick={(e) => {
+                  handlePick(label);
+                  e.stopPropagation();
+                }}
+                className={`dropdown-menu__item${selection === label ? ' dropdown-menu__item--selected' : ''}`}>
                 {icon && <span className="travel-class-icon">{icon}</span>}
                 {label}
               </li>
@@ -70,7 +76,7 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
           </ul>
         )}
       </div>
-    </label>
+    </div>
   );
 };
 

package/src/qsm/components/travel-nationality-picker/index.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { QSMRootState } from '../../store/qsm-store';
+import { setSelectedNationality } from '../../store/qsm-slice';
+import QSMConfigurationContext from '../../qsm-configuration-context';
+import ItemPicker from '../item-picker';
+
+const TravelNationalityPicker: React.FC = () => {
+  const { nationalities } = useContext(QSMConfigurationContext);
+  const { selectedNationality } = useSelector((state: QSMRootState) => state.qsm);
+
+  return (
+    <ItemPicker
+      items={nationalities}
+      selection={selectedNationality}
+      label="Nationaliteit"
+      placeholder="Selecteer nationaliteit"
+      classModifier="travel-class-picker__items"
+      onPick={setSelectedNationality}
+    />
+  );
+};
+
+export default TravelNationalityPicker;

package/src/qsm/qsm-configuration-context.ts

@@ -28,6 +28,8 @@ const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   travelClasses: [],
   travelClassIcon: '',
 
+  nationalities: [],
+
   showReturnDate: false,
   datesIcon: '',
 

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

@@ -36,6 +36,7 @@ export interface QSMState {
   selectedTravelType?: string;
   travelClasses: TravelClass[];
   selectedTravelClass?: string;
+  selectedNationality?: string;
   defaultTravelers: number;
   maxTravelers: number;
   maxChildAge: number;
@@ -75,6 +76,7 @@ const initialState: QSMState = {
   selectedTravelType: undefined,
   travelClasses: [],
   selectedTravelClass: undefined,
+  selectedNationality: undefined,
   defaultTravelers: 2,
   maxTravelers: 9,
   maxChildAge: 12,
@@ -174,6 +176,9 @@ const qsmSlice = createSlice({
     setSelectedTravelClass: (state, action) => {
       state.selectedTravelClass = action.payload;
     },
+    setSelectedNationality: (state, action) => {
+      state.selectedNationality = action.payload;
+    },
     setDefaultTravelers: (state, action: PayloadAction<number>) => {
       state.defaultTravelers = action.payload;
     },
@@ -245,6 +250,7 @@ export const {
   setSelectedTravelType,
   setTravelClasses,
   setSelectedTravelClass,
+  setSelectedNationality,
   setDefaultTravelers,
   setMaxTravelers,
   setMaxChildAge,

package/src/qsm/types.ts

@@ -54,6 +54,8 @@ export interface QSMConfiguration {
   onSubmit: (data: any) => void;
   submitLabel: string;
   submitIcon: ReactNode;
+
+  nationalities: Nationality[];
 }
 
 export interface BaseFieldConfig {
@@ -132,3 +134,9 @@ export interface TravelClass {
   label: string;
   icon?: ReactNode;
 }
+
+export interface Nationality {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}