@qite/tide-booking-component 1.4.38 → 1.4.40

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

@@ -14,16 +14,33 @@ 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';
+import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
+import { BaseFieldConfig, DoubleFieldConfig, QsmType } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
 
 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, onSubmit, travelTypes, languageCode } = useContext(QSMConfigurationContext);
+  const { qsmType, mobileFilterType, fromDate, toDate, tripType } = qsmState;
+  const {
+    askTravelers,
+    askRooms,
+    askNationality,
+    askTravelClass,
+    askTravelType,
+    submitIcon,
+    onSubmit,
+    travelTypes,
+    languageCode,
+    departureAirport,
+    destinationAirport,
+    returnAirport,
+    destination,
+    allowOneWay,
+    allowRoundtrip,
+    allowOpenJaw
+  } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
 
   useEffect(() => {
@@ -50,63 +67,112 @@ const QSMContainer: React.FC = () => {
     dispatch(setToDate(value.toDate?.toISOString()));
   };
 
+  const handleTripTypeChange = (value: 'oneway' | 'roundtrip' | 'openjaw') => {
+    dispatch(setTripType(value));
+  };
+
+  const handleQsmTypeChange = (value: QsmType) => {
+    dispatch(setSelectedQsmType(value));
+  };
+
   const handleSubmit = () => {
     if (!onSubmit) return;
 
-    const { fromDate, toDate, travelers, selectedTravelClass, selectedTravelType, selectedNationality, adults, kids, babies, rooms, selectedFlexRange } =
-      qsmState;
-
-    const selectedTravelTypeValue = travelTypes.find((t) => t.label === selectedTravelType);
+    const { fromDate, toDate, selectedTravelClass, selectedTravelType, selectedNationality, rooms, tripType, adults, kids, babies } = qsmState;
 
+    const selectedTravelTypeValue = travelTypes?.find((t) => t.label === selectedTravelType);
     const payload = {
       fromDate,
       toDate,
       travelClass: selectedTravelClass,
       travelType: selectedTravelTypeValue,
       nationality: selectedNationality,
-      rooms
-    };
+      tripType
+    } as any;
+
+    if (askRooms) {
+      payload.rooms = rooms;
+    } else {
+      payload.travelers = { adults, kids, babies };
+    }
+
+    // Filter out undefined fields before passing to addSearchFieldsToPayload
+    const searchFields = [departureAirport, destinationAirport, returnAirport, destination].filter((field): field is BaseFieldConfig => field !== undefined);
 
     addSearchFieldsToPayload(payload, searchFields, qsmState);
     onSubmit(payload);
+    console.log('Submitted QSM data:', payload);
   };
 
-  const addSearchFieldsToPayload = (payload: any, fields: FieldConfig[], state: QSMState) => {
+  const addSearchFieldsToPayload = (payload: any, fields: BaseFieldConfig[], 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];
-        });
-      }
+      const fieldKey = field.fieldKey;
+      const option = field.options.find((opt) => opt.value === state[fieldKey]);
+      payload[fieldKey] = option?.key ?? state[fieldKey];
+
+      // 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];
+      //   });
+      // }
     });
   };
 
+  const originDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
+    if (!fromDate || !toDate) return undefined;
+    const searchFields = [departureAirport, destinationAirport].filter((field): field is BaseFieldConfig => field !== undefined);
+    return {
+      type: 'double',
+      fieldKey: 'locationGroup',
+      showReverse: true,
+      fields: searchFields
+    };
+  }, [fromDate, toDate, departureAirport, destinationAirport]);
+
+  const openJawReturnDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
+    if (!fromDate || !toDate || !allowOpenJaw || !departureAirport || !returnAirport) return undefined;
+
+    const mirroredDepartureField: BaseFieldConfig = {
+      ...departureAirport,
+      label: 'Bestemming',
+      placeholder: 'Kies bestemming'
+    };
+
+    return {
+      type: 'double',
+      fieldKey: 'openjawLocationGroup',
+      showReverse: false,
+      disableReturnField: true,
+      fields: [returnAirport, mirroredDepartureField]
+    };
+  }, [fromDate, toDate, departureAirport, returnAirport, allowOpenJaw]);
+
   return (
     <div className="qsm">
       <div className="qsm__content">
         <div className="qsm__tabs">
-          <button type="button" className="qsm__tab">
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == 'multidestination' ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange('multidestination')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-location" height={16} />
             </span>
             {translations.QSM.MULTIDESTINATION}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'package' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('package')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-suitcase" height={16} />
             </span>
             {translations.QSM.PACKAGES}
           </button>
-          <button type="button" className="qsm__tab qsm__tab--active">
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == 'hotel-flight' ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange('hotel-flight')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-backforward" height={14} />
               +
@@ -114,37 +180,37 @@ const QSMContainer: React.FC = () => {
             </span>
             {translations.QSM.TRANSPORT_HOTEL}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'hotel' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('hotel')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-bed" height={16} />
             </span>
             {translations.QSM.ACCOMMODATION}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'flight' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('flight')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-flight" height={16} />
             </span>
             {translations.QSM.TRANSPORTS}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'ticket' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('ticket')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-ticket" height={16} />
             </span>
             {translations.QSM.TICKET_ONLY}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'car' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('car')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-car" height={16} />
             </span>
             {translations.QSM.RENT_A_CAR}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'transfers' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('transfers')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-backforward" height={16} />
             </span>
             {translations.QSM.TRANSFERS}
           </button>
-          <button type="button" className="qsm__tab">
+          <button type="button" className={`qsm__tab ${qsmType == 'cruises' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('cruises')}>
             <span className="qsm__tab__icons">
               <Icon name="ui-ship" height={16} />
             </span>
@@ -152,52 +218,108 @@ const QSMContainer: React.FC = () => {
           </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>{translations.QSM.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>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
-              </label>
+          {qsmType === 'hotel' ||
+            (qsmType == 'hotel-flight' && (
+              <div className="radiobutton-group qsm__filter__inputgroup">
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
+                      checked={true}
+                      readOnly
+                      className="radiobutton__input"
+                    />
+                    <span>{translations.QSM.ONE_ACCOMMODATION}</span>
+                  </label>
+                </div>
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
+                      className="radiobutton__input"
+                      disabled={true}
+                    />
+                    <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
+                  </label>
+                </div>
+              </div>
+            ))}
+          {qsmType === 'flight' && (
+            <div className="radiobutton-group qsm__filter__inputgroup">
+              {allowOneWay && (
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      name="tripType"
+                      value="oneway"
+                      checked={tripType === 'oneway'}
+                      onChange={() => handleTripTypeChange('oneway')}
+                      className="radiobutton__input"
+                    />
+                    <span>One way</span>
+                  </label>
+                </div>
+              )}
+
+              {allowRoundtrip && (
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      name="tripType"
+                      value="roundtrip"
+                      checked={tripType === 'roundtrip'}
+                      onChange={() => handleTripTypeChange('roundtrip')}
+                      className="radiobutton__input"
+                    />
+                    <span>Roundtrip</span>
+                  </label>
+                </div>
+              )}
+
+              {allowOpenJaw && (
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      name="tripType"
+                      value="openjaw"
+                      checked={tripType === 'openjaw'}
+                      onChange={() => handleTripTypeChange('openjaw')}
+                      className="radiobutton__input"
+                    />
+                    <span>Open Jaw</span>
+                  </label>
+                </div>
+              )}
             </div>
-          </div>
+          )}
           <div className="qsm__filter__classgroup">
-            <TravelClassPicker />
-            <TravelTypePicker />
-            <TravelNationalityPicker />
+            {qsmType !== 'hotel' && qsmType !== 'car' && qsmType !== 'ticket' && qsmType !== 'cruises' && qsmType !== 'transfers' && askTravelClass && (
+              <TravelClassPicker />
+            )}
+            {qsmType !== 'multidestination' && qsmType !== 'car' && qsmType !== 'flight' && qsmType !== 'transfers' && askTravelType && <TravelTypePicker />}
+            {askNationality && <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} />;
-          })}
+          {/* TODO, determine which fields to show for what type of QSM */}
+          {(qsmType == 'flight' || qsmType == 'hotel-flight') && originDestinationField && (
+            <DoubleSearchInputGroup fieldConfig={originDestinationField} showReverse={originDestinationField.showReverse} />
+          )}
+          {qsmType == 'flight' && tripType == 'openjaw' && openJawReturnDestinationField && (
+            <DoubleSearchInputGroup fieldConfig={openJawReturnDestinationField} showReverse={openJawReturnDestinationField.showReverse} />
+          )}
+          {qsmType == 'hotel' && destination && <SearchInputGroup fieldConfig={destination} />}
 
           <Dates value={dateRange} onChange={handleDateChange} />
 

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

@@ -1,92 +1,25 @@
-import React, { useContext, useMemo, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { QSMRootState } from '../../store/qsm-store';
 import { setFieldValue } from '../../store/qsm-slice';
-import QSMConfigurationContext from '../../qsm-configuration-context';
 import SearchInputGroup from '../search-input-group';
 import { FieldConfig, DoubleFieldConfig } from '../../types';
 
 const isDouble = (f: FieldConfig): f is DoubleFieldConfig => f.type === 'double';
 
 interface Props {
-  fieldKey: string;
+  fieldConfig: DoubleFieldConfig;
   showReverse?: boolean;
 }
 
-const DoubleSearchInputGroup: React.FC<Props> = ({ fieldKey, showReverse = false }) => {
-  const { searchFields, allowOpenJaw = false } = useContext(QSMConfigurationContext);
+const DoubleSearchInputGroup: React.FC<Props> = ({ fieldConfig, showReverse = false }) => {
   const dispatch = useDispatch();
-  const cfg = searchFields.find((f) => f.fieldKey === fieldKey);
-  if (!cfg || !isDouble(cfg)) {
-    return null;
-  }
-
-  const maybeFields = cfg.fields as unknown as any[];
-  const isOpenJaw = allowOpenJaw && maybeFields.length === 4;
-
-  if (isOpenJaw) {
-    const [from1Cfg, to1Cfg, from2Cfg, to2Cfg] = maybeFields;
-
-    const from1Val = useSelector((s: QSMRootState) => (s.qsm as any)[from1Cfg.fieldKey] ?? '');
-    const to2Val = useSelector((s: QSMRootState) => (s.qsm as any)[to2Cfg.fieldKey] ?? '');
-
-    // keep last "to" in sync with first "from"
-    useEffect(() => {
-      if (from1Val && from1Val !== to2Val) {
-        dispatch(
-          setFieldValue({
-            fieldKey: to2Cfg.fieldKey,
-            value: from1Val
-          })
-        );
-      }
-      if (!from1Val && to2Val) {
-        dispatch(
-          setFieldValue({
-            fieldKey: to2Cfg.fieldKey,
-            value: ''
-          })
-        );
-      }
-    }, [from1Val, to2Val, dispatch, to2Cfg.fieldKey]);
 
-    return (
-      <>
-        {/* Row 1 : A ➜ B */}
-        <div className="qsm__double-input qsm__double-input--splittable">
-          <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-            <SearchInputGroup fieldKey={from1Cfg.fieldKey} isDoubleInput />
-          </div>
-          <div className="qsm__reverse-wrapper">
-            <div className="qsm__input-line qsm__input-line--splittable" />
-          </div>
-          <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-            <SearchInputGroup fieldKey={to1Cfg.fieldKey} isSecondInput isDoubleInput />
-          </div>
-        </div>
-
-        {/* Row 2 : C ➜ A (A is readonly) */}
-        <div className="qsm__double-input qsm__double-input--splittable u-mt-2">
-          <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-            <SearchInputGroup fieldKey={from2Cfg.fieldKey} isDoubleInput />
-          </div>
-          <div className="qsm__reverse-wrapper">
-            <div className="qsm__input-line qsm__input-line--splittable" />
-          </div>
-          <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-            <SearchInputGroup fieldKey={to2Cfg.fieldKey} isSecondInput isDoubleInput readOnlyForced={Boolean(from1Val)} />
-          </div>
-        </div>
-      </>
-    );
+  if (!fieldConfig || !isDouble(fieldConfig)) {
+    return null;
   }
 
-  /*
-   * ──────────────────────────────────────────────────────────────
-   * CLASSIC PATH  (2 sub‑fields, original behaviour)
-   * ──────────────────────────────────────────────────────────────
-   */
-  const [firstCfg, secondCfg] = cfg.fields;
+  const [firstCfg, secondCfg] = fieldConfig.fields;
 
   const firstSelector = useMemo(() => (s: QSMRootState) => (s.qsm as any)[firstCfg.fieldKey] ?? '', [firstCfg.fieldKey]);
   const secondSelector = useMemo(() => (s: QSMRootState) => (s.qsm as any)[secondCfg.fieldKey] ?? '', [secondCfg.fieldKey]);
@@ -111,7 +44,7 @@ const DoubleSearchInputGroup: React.FC<Props> = ({ fieldKey, showReverse = false
   return (
     <div className="qsm__double-input qsm__double-input--splittable">
       <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-        <SearchInputGroup fieldKey={firstCfg.fieldKey} isDoubleInput />
+        <SearchInputGroup fieldConfig={firstCfg} isDoubleInput />
       </div>
 
       {showReverse ? (
@@ -130,7 +63,13 @@ const DoubleSearchInputGroup: React.FC<Props> = ({ fieldKey, showReverse = false
       )}
 
       <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-        <SearchInputGroup fieldKey={secondCfg.fieldKey} isSecondInput isDoubleInput />
+        <SearchInputGroup
+          fieldConfig={secondCfg}
+          isSecondInput
+          isDoubleInput
+          isDisabled={fieldConfig.disableReturnField}
+          readOnlyForced={fieldConfig.disableReturnField}
+        />
       </div>
     </div>
   );

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -15,14 +15,25 @@ import DateRangePicker from '../date-range-picker';
 import TravelInput from '../travel-input';
 import { format } from 'date-fns';
 import QSMConfigurationContext from '../../qsm-configuration-context';
-import { BaseFieldConfig, FieldConfig, TypeaheadOption } from '../../types';
+import { BaseFieldConfig, TypeaheadOption } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
 
 const MobileFilterModal: React.FC = () => {
-  const { datesIcon, languageCode, searchFields } = useContext(QSMConfigurationContext);
+  const { datesIcon, languageCode } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
   const dispatch = useDispatch();
-  const { mobileFilterType, mobileDatePickerMode, activeSearchFieldProps, fromDate, toDate, searchResults } = useSelector((state: QSMRootState) => state.qsm);
+  const {
+    mobileFilterType,
+    mobileDatePickerMode,
+    activeSearchFieldProps,
+    fromDate,
+    toDate,
+    searchResults,
+    departureAirport,
+    destinationAirport,
+    returnAirport,
+    destination
+  } = useSelector((state: QSMRootState) => state.qsm);
 
   const [inputValue, setInputValue] = useState('');
 
@@ -45,24 +56,20 @@ const MobileFilterModal: React.FC = () => {
     dispatch(closeMobileFilter());
   };
 
-  const findConfig = (all: FieldConfig[], key: string): BaseFieldConfig | undefined => {
+  const findConfig = (all: BaseFieldConfig[], key: string): BaseFieldConfig | undefined => {
     for (const config of all) {
-      if (config.type === 'single' && config.fieldKey === key) {
+      if (config.fieldKey === key) {
         return config;
       }
-      if (config.type === 'double') {
-        const field = config.fields.find((x) => x.fieldKey === key);
-        if (field) return field;
-      }
     }
     return undefined;
   };
 
   const config = useMemo<BaseFieldConfig | undefined>(() => {
     if (!activeSearchFieldProps) return undefined;
-
+    const searchFields = [departureAirport, destinationAirport, returnAirport, destination].filter((field): field is BaseFieldConfig => field !== undefined);
     return findConfig(searchFields, activeSearchFieldProps.fieldKey);
-  }, [searchFields, activeSearchFieldProps]);
+  }, [departureAirport, destinationAirport, returnAirport, destination, activeSearchFieldProps]);
 
   const match = useCallback(
     (input: string) => {

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

@@ -10,9 +10,13 @@ interface SearchInputProps {
   label: string;
   isSecondInput?: boolean;
   isDoubleInput?: boolean;
+  isDisabled?: boolean;
 }
 
-const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect, highlightTarget, label, isSecondInput, isDoubleInput }) => {
+const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect, highlightTarget, label, isSecondInput, isDoubleInput, isDisabled }) => {
+  if (isDisabled) {
+    return null;
+  }
   const highlightMatch = (option: TypeaheadOption, highlight: string) => {
     if (!highlight) {
       return option.value;
@@ -47,7 +51,10 @@ const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect
         <div
           key={index}
           className="qsm__double-input-option"
-          onMouseDown={(e) => e.preventDefault()}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
           onClick={(e) => {
             e.stopPropagation();
             onOptionSelect(option);