@qite/tide-booking-component 1.4.32 → 1.4.33

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

@@ -1,234 +1,218 @@
-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 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 qsmState = useSelector((state: QSMRootState) => state.qsm);
-  const { mobileFilterType, fromDate, toDate } = qsmState;
-  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = 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">
-      <div className="qsm__content">
-        <div className="qsm__tabs">
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-location" height={16} />
-            </span>
-            Multidestination
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-suitcase" height={16} />
-            </span>
-            Packages
-          </button>
-          <button type="button" className="qsm__tab qsm__tab--active">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={14} />
-              +
-              <Icon name="ui-bed" height={14} />
-            </span>
-            Transport + hotel
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-bed" height={16} />
-            </span>
-            Accommodation
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-flight" height={16} />
-            </span>
-            Transports
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ticket" height={16} />
-            </span>
-            Ticket Only
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-car" height={16} />
-            </span>
-            Rent a car
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={16} />
-            </span>
-            Transfers
-          </button>
-          <button type="button" className="qsm__tab">
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ship" height={16} />
-            </span>
-            Cruises
-          </button>
-        </div>
-        <div className="qsm__filter">
-          <div className="radiobutton-group qsm__filter__inputgroup">
-            <div className="radiobutton">
-              <label className="radiobutton__label">
-                <input
-                  type="radio"
-                  name="mainBookerId"
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value=""
-                  // checked={formik.values.mainBookerId === travelerValues.id}
-                  checked={true}
-                  readOnly
-                  className="radiobutton__input"
-                />
-                <span>One accommodation</span>
-              </label>
-            </div>
-            <div className="radiobutton">
-              <label className="radiobutton__label">
-                <input
-                  type="radio"
-                  name="mainBookerId"
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value=""
-                  // checked={formik.values.mainBookerId === travelerValues.id}
-                  className="radiobutton__input"
-                  disabled={true}
-                />
-                <span>Multiple accommodations</span>
-              </label>
-            </div>
-          </div>
-          <div className="qsm__filter__classgroup">
-            <TravelClassPicker />
-            <TravelTypePicker />
-            <TravelNationalityPicker />
-          </div>
-        </div>
-        <div className="qsm__input-group">
-          {searchFields.map((field, idx) => {
-            if (field.type === 'double') {
-              return <DoubleSearchInputGroup key={idx} fieldKey={field.fieldKey} showReverse={field.showReverse} />;
-            }
-            return <SearchInputGroup key={idx} fieldKey={field.fieldKey} />;
-          })}
-
-          <Dates value={dateRange} onChange={handleDateChange} />
-
-          {askTravelers && <TravelInputGroup />}
-
-          <button type="button" className="cta" onClick={handleSubmit}>
-            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
-            <span>{submitLabel}</span>
-          </button>
-        </div>
-      </div>
-      {isMobile && mobileFilterType && <MobileFilterModal />}
-    </div>
-  );
-};
-
-export default QSMContainer;
+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 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 { QSMState, setFromDate, setToDate } from '../../store/qsm-slice';
+import { FieldConfig } from '../../types';
+
+const QSMContainer: React.FC = () => {
+  const dispatch = useDispatch();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const qsmState = useSelector((state: QSMRootState) => state.qsm);
+  const { mobileFilterType, fromDate, toDate } = qsmState;
+  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = 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 { fromDate, toDate, travelers, selectedTravelClass, selectedTravelType, selectedNationality, adults, kids, babies, rooms, selectedFlexRange } =
+      qsmState;
+
+    const payload = {
+      fromDate,
+      toDate,
+      travelers,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelType,
+      nationality: selectedNationality,
+      adults,
+      kids,
+      babies,
+      rooms,
+      dateFlexibility: selectedFlexRange
+    };
+
+    addSearchFieldsToPayload(payload, searchFields, qsmState);
+    onSubmit(payload);
+  };
+
+  const addSearchFieldsToPayload = (payload: any, fields: FieldConfig[], state: QSMState) => {
+    fields.forEach((field) => {
+      if (field.type === 'single') {
+        const key = field.fieldKey;
+        const option = field.options.find((opt) => opt.value === state[key]);
+        payload[key] = option ?? state[key];
+      }
+
+      if (field.type === 'double' && field.fields) {
+        // recursively add each nested field
+        field.fields.forEach((nestedField) => {
+          const key = nestedField.fieldKey;
+          const option = nestedField.options.find((opt) => opt.value === state[key]);
+          payload[key] = option ?? state[key];
+        });
+      }
+    });
+  };
+
+  return (
+    <div className="qsm">
+      <div className="qsm__content">
+        <div className="qsm__tabs">
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-location" height={16} />
+            </span>
+            Multidestination
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-suitcase" height={16} />
+            </span>
+            Packages
+          </button>
+          <button type="button" className="qsm__tab qsm__tab--active">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={14} />
+              +
+              <Icon name="ui-bed" height={14} />
+            </span>
+            Transport + hotel
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-bed" height={16} />
+            </span>
+            Accommodation
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-flight" height={16} />
+            </span>
+            Transports
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ticket" height={16} />
+            </span>
+            Ticket Only
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-car" height={16} />
+            </span>
+            Rent a car
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={16} />
+            </span>
+            Transfers
+          </button>
+          <button type="button" className="qsm__tab">
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ship" height={16} />
+            </span>
+            Cruises
+          </button>
+        </div>
+        <div className="qsm__filter">
+          <div className="radiobutton-group qsm__filter__inputgroup">
+            <div className="radiobutton">
+              <label className="radiobutton__label">
+                <input
+                  type="radio"
+                  name="mainBookerId"
+                  // onChange={handleMainBookerChange}
+                  // onBlur={formik.handleBlur}
+                  value=""
+                  // checked={formik.values.mainBookerId === travelerValues.id}
+                  checked={true}
+                  readOnly
+                  className="radiobutton__input"
+                />
+                <span>One accommodation</span>
+              </label>
+            </div>
+            <div className="radiobutton">
+              <label className="radiobutton__label">
+                <input
+                  type="radio"
+                  name="mainBookerId"
+                  // onChange={handleMainBookerChange}
+                  // onBlur={formik.handleBlur}
+                  value=""
+                  // checked={formik.values.mainBookerId === travelerValues.id}
+                  className="radiobutton__input"
+                  disabled={true}
+                />
+                <span>Multiple accommodations</span>
+              </label>
+            </div>
+          </div>
+          <div className="qsm__filter__classgroup">
+            <TravelClassPicker />
+            <TravelTypePicker />
+            <TravelNationalityPicker />
+          </div>
+        </div>
+        <div className="qsm__input-group">
+          {searchFields.map((field, idx) => {
+            if (field.type === 'double') {
+              return <DoubleSearchInputGroup key={idx} fieldKey={field.fieldKey} showReverse={field.showReverse} />;
+            }
+            return <SearchInputGroup key={idx} fieldKey={field.fieldKey} />;
+          })}
+
+          <Dates value={dateRange} onChange={handleDateChange} />
+
+          {askTravelers && <TravelInputGroup />}
+
+          <button type="button" className="cta" onClick={handleSubmit}>
+            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
+            <span>{submitLabel}</span>
+          </button>
+        </div>
+      </div>
+      {isMobile && mobileFilterType && <MobileFilterModal />}
+    </div>
+  );
+};
+
+export default QSMContainer;