@qite/tide-booking-component 1.4.28 → 1.4.29

package/build/build-cjs/index.js

@@ -25325,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);
@@ -25346,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 },
@@ -25383,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;
@@ -25454,18 +25437,18 @@ var TravelNationalityPicker = function () {
 var QSMContainer = function () {
   var dispatch = reactRedux.useDispatch();
   var isMobile = useMediaQuery('(max-width: 768px)');
-  var _a = reactRedux.useSelector(function (state) {
-      return state.qsm;
-    }),
-    mobileFilterType = _a.mobileFilterType,
-    fromDate = _a.fromDate,
-    toDate = _a.toDate;
-  var _b = React.useContext(QSMConfigurationContext),
-    searchFields = _b.searchFields,
-    askTravelers = _b.askTravelers,
-    submitIcon = _b.submitIcon,
-    submitLabel = _b.submitLabel,
-    onSubmit = _b.onSubmit;
+  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;
   React.useEffect(
     function () {
       if (fromDate || toDate) return;
@@ -25491,6 +25474,58 @@ var QSMContainer = function () {
     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' },
@@ -25660,7 +25695,7 @@ var QSMContainer = function () {
         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-esm/index.js

@@ -25154,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);
@@ -25175,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 },
@@ -25212,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;
@@ -25283,18 +25266,18 @@ var TravelNationalityPicker = function () {
 var QSMContainer = function () {
   var dispatch = useDispatch();
   var isMobile = useMediaQuery('(max-width: 768px)');
-  var _a = useSelector(function (state) {
-      return state.qsm;
-    }),
-    mobileFilterType = _a.mobileFilterType,
-    fromDate = _a.fromDate,
-    toDate = _a.toDate;
-  var _b = useContext(QSMConfigurationContext),
-    searchFields = _b.searchFields,
-    askTravelers = _b.askTravelers,
-    submitIcon = _b.submitIcon,
-    submitLabel = _b.submitLabel,
-    onSubmit = _b.onSubmit;
+  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;
   useEffect(
     function () {
       if (fromDate || toDate) return;
@@ -25320,6 +25303,58 @@ var QSMContainer = function () {
     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' },
@@ -25457,7 +25492,7 @@ var QSMContainer = function () {
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.28",
+  "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

@@ -19,7 +19,8 @@ import { setFromDate, setToDate } from '../../store/qsm-slice';
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
   const isMobile = useMediaQuery('(max-width: 768px)');
-  const { mobileFilterType, fromDate, toDate } = useSelector((state: QSMRootState) => state.qsm);
+  const qsmState = useSelector((state: QSMRootState) => state.qsm);
+  const { mobileFilterType, fromDate, toDate } = qsmState;
   const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = useContext(QSMConfigurationContext);
 
   useEffect(() => {
@@ -46,6 +47,66 @@ const QSMContainer: React.FC = () => {
     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">
       <div className="qsm__content">
@@ -159,7 +220,7 @@ const QSMContainer: React.FC = () => {
 
           {askTravelers && <TravelInputGroup />}
 
-          <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/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;