@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,512 +1,512 @@
-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, addYears, format } from 'date-fns';
-import { DateRange } from '../../../booking-product/types';
-import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
-import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import { DateAmountType, PortalQsmType } from '@qite/tide-client';
-import { first } from 'lodash';
-
-const QSMContainer: React.FC = () => {
-  const dispatch = useDispatch();
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const qsmState = useSelector((state: QSMRootState) => state.qsm);
-  const { qsmType, mobileFilterType, fromDate, toDate, tripType } = qsmState;
-  const {
-    askTravelers,
-    askRooms,
-    askNationality,
-    askTravelClass,
-    askTravelType,
-    submitIcon,
-    onSubmit,
-    travelTypes,
-    languageCode,
-    departureAirport,
-    destinationAirport,
-    returnAirport,
-    destination,
-    allowOneWay,
-    allowRoundtrip,
-    allowOpenJaw,
-    searchConfigurations
-  } = useContext(QSMConfigurationContext);
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  useEffect(() => {
-    const defaultQsmType = first(searchConfigurations)?.qsmType;
-    console.log('Available search configurations:', searchConfigurations);
-    if (!defaultQsmType) return;
-    console.log('set default qsmType:', defaultQsmType);
-    handleQsmTypeChange(defaultQsmType);
-  }, [searchConfigurations]);
-
-  useEffect(() => {
-    if (fromDate || toDate) return;
-
-    let startDate = addMonths(new Date(), 1);
-    let endDate = addDays(startDate, 7);
-
-    if (qsmType === PortalQsmType.GroupTour) {
-      startDate = new Date();
-      endDate = addYears(startDate, 1);
-    }
-
-    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 ? format(value.fromDate, 'yyyy-MM-dd') : undefined));
-    dispatch(setToDate(value.toDate ? format(value.toDate, 'yyyy-MM-dd') : undefined));
-  };
-
-  const handleTripTypeChange = (value: 'oneway' | 'roundtrip' | 'openjaw') => {
-    dispatch(setTripType(value));
-  };
-
-  const handleQsmTypeChange = (value: PortalQsmType) => {
-    dispatch(setSelectedQsmType(value));
-
-    const now = new Date();
-
-    // Default fallback
-    let startDate = addMonths(now, 1);
-    let endDate = addDays(startDate, 7);
-    if (value === PortalQsmType.GroupTour) {
-      startDate = now;
-      endDate = addYears(startDate, 1);
-    }
-
-    const searchConfig = searchConfigurations.find((config) => config.qsmType === value);
-
-    if (searchConfig) {
-      const applyAmount = (baseDate: Date, type: DateAmountType, amount?: number) => {
-        if (!amount || type == null) return baseDate;
-
-        switch (type) {
-          case DateAmountType.days:
-            return addDays(baseDate, amount);
-          case DateAmountType.months:
-            return addMonths(baseDate, amount);
-          default:
-            return baseDate;
-        }
-      };
-
-      if (searchConfig.fromDateAmount) {
-        startDate = applyAmount(now, searchConfig.fromDateAmountType, searchConfig.fromDateAmount);
-      }
-
-      if (searchConfig.toDateAmount) {
-        endDate = applyAmount(startDate, searchConfig.toDateAmountType, searchConfig.toDateAmount);
-      }
-    }
-
-    handleDateChange({
-      fromDate: startDate,
-      toDate: endDate
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!onSubmit) return;
-
-    const { qsmType, fromDate, toDate, selectedTravelClass, selectedTravelType, selectedNationality, rooms, tripType, adults, kids, babies } = qsmState;
-
-    const selectedTravelTypeValue = travelTypes?.find((t) => t.label === selectedTravelType);
-    const payload = {
-      qsmType,
-      fromDate,
-      toDate,
-      travelClass: selectedTravelClass,
-      travelType: selectedTravelTypeValue,
-      nationality: selectedNationality,
-      tripType
-    } as any;
-
-    if (askRooms && qsmType !== PortalQsmType.Flight) {
-      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);
-
-    if (destination) {
-      const option = destination.options.find((opt) => opt.value === qsmState[destination.fieldKey]);
-      if (option) {
-        payload.destinationType = option?.type;
-      }
-    }
-
-    onSubmit(payload);
-    console.log('Submitted QSM data:', payload);
-  };
-
-  const addSearchFieldsToPayload = (payload: any, fields: BaseFieldConfig[], state: QSMState) => {
-    fields.forEach((field) => {
-      const fieldKey = field.fieldKey;
-      const option = field.options.find((opt) => opt.value === state[fieldKey]);
-      payload[fieldKey] = option?.key ?? state[fieldKey];
-    });
-  };
-
-  const originDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
-    if (!fromDate || !toDate || !departureAirport || !destinationAirport) return undefined;
-
-    const departureField: BaseFieldConfig = {
-      ...departureAirport,
-      label: translations.QSM.DEPARTURE,
-      placeholder: translations.QSM.CHOOSE_DEPARTURE
-    };
-
-    const destinationField: BaseFieldConfig = {
-      ...destinationAirport,
-      label: translations.QSM.DESTINATION,
-      placeholder: translations.QSM.CHOOSE_DESTINATION
-    };
-
-    return {
-      type: 'double',
-      fieldKey: 'locationGroup',
-      showReverse: true,
-      fields: [departureField, destinationField]
-    };
-  }, [fromDate, toDate, departureAirport, destinationAirport, translations]);
-
-  const openJawReturnDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
-    if (!fromDate || !toDate || !allowOpenJaw || !departureAirport || !returnAirport) return undefined;
-
-    const mirroredDepartureField: BaseFieldConfig = {
-      ...departureAirport,
-      label: translations.QSM.DESTINATION,
-      placeholder: translations.QSM.CHOOSE_DESTINATION
-    };
-
-    return {
-      type: 'double',
-      fieldKey: 'openjawLocationGroup',
-      showReverse: false,
-      disableReturnField: true,
-      fields: [returnAirport, mirroredDepartureField]
-    };
-  }, [fromDate, toDate, departureAirport, returnAirport, allowOpenJaw]);
-
-  const qsmTypeMeta: Record<PortalQsmType, { icon: string | string[]; label: string }> = {
-    [PortalQsmType.Multidestination]: {
-      icon: 'ui-location',
-      label: translations.QSM.MULTIDESTINATION
-    },
-    [PortalQsmType.Package]: {
-      icon: 'ui-suitcase',
-      label: translations.QSM.PACKAGES
-    },
-    [PortalQsmType.AccommodationAndFlight]: {
-      icon: ['ui-backforward', 'ui-bed'],
-      label: translations.QSM.TRANSPORT_HOTEL
-    },
-    [PortalQsmType.Accommodation]: {
-      icon: 'ui-bed',
-      label: translations.QSM.ACCOMMODATION
-    },
-    [PortalQsmType.Flight]: {
-      icon: 'ui-flight',
-      label: translations.QSM.TRANSPORTS
-    },
-    [PortalQsmType.GroupTour]: {
-      icon: 'ui-group',
-      label: translations.QSM.GROUP_TOUR
-    },
-    [PortalQsmType.RoundTrip]: {
-      icon: 'ui-group',
-      label: translations.QSM.ROUNDTRIP
-    },
-    [PortalQsmType.Ticket]: {
-      icon: 'ui-ticket',
-      label: translations.QSM.TICKET_ONLY
-    },
-    [PortalQsmType.Car]: {
-      icon: 'ui-car',
-      label: translations.QSM.RENT_A_CAR
-    },
-    [PortalQsmType.Transfer]: {
-      icon: 'ui-backforward',
-      label: translations.QSM.TRANSFERS
-    },
-    [PortalQsmType.Cruise]: {
-      icon: 'ui-ship',
-      label: translations.QSM.CRUISES
-    }
-  };
-
-  return (
-    <div className="qsm">
-      <div className="qsm__content">
-        <div className="qsm__tabs">
-          {searchConfigurations.map((searchConfig, index) => {
-            const meta = qsmTypeMeta[searchConfig.qsmType];
-
-            if (!meta) return null; // safety guard
-
-            return (
-              <button
-                key={`qsm-type-${index}`}
-                type="button"
-                className={`qsm__tab ${qsmType === searchConfig.qsmType ? 'qsm__tab--active' : ''}`}
-                onClick={() => handleQsmTypeChange(searchConfig.qsmType)}>
-                <span className="qsm__tab__icons">
-                  {Array.isArray(meta.icon) ? meta.icon.map((icon, i) => <Icon key={i} name={icon} height={14} />) : <Icon name={meta.icon} height={16} />}
-                </span>
-
-                {meta.label}
-              </button>
-            );
-          })}
-          {/* 
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Multidestination ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Multidestination)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-location" height={16} />
-            </span>
-            {translations.QSM.MULTIDESTINATION}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Package ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Package)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-suitcase" height={16} />
-            </span>
-            {translations.QSM.PACKAGES}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.AccommodationAndFlight ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.AccommodationAndFlight)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={14} />
-              +
-              <Icon name="ui-bed" height={14} />
-            </span>
-            {translations.QSM.TRANSPORT_HOTEL}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Accommodation ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Accommodation)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-bed" height={16} />
-            </span>
-            {translations.QSM.ACCOMMODATION}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Flight ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Flight)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-flight" height={16} />
-            </span>
-            {translations.QSM.TRANSPORTS}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.GroupTour ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.GroupTour)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-group" height={16} />
-            </span>
-            {translations.QSM.GROUP_TOUR}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Ticket ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Ticket)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ticket" height={16} />
-            </span>
-            {translations.QSM.TICKET_ONLY}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Car ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.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 ${qsmType == PortalQsmType.Transfer ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Transfer)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-backforward" height={16} />
-            </span>
-            {translations.QSM.TRANSFERS}
-          </button>
-          <button
-            type="button"
-            className={`qsm__tab ${qsmType == PortalQsmType.Cruise ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange(PortalQsmType.Cruise)}>
-            <span className="qsm__tab__icons">
-              <Icon name="ui-ship" height={16} />
-            </span>
-            {translations.QSM.CRUISES}
-          </button> */}
-        </div>
-        <div className="qsm__filter">
-          {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
-            <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 === PortalQsmType.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>{translations.QSM.ONEWAY}</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>{translations.QSM.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>{translations.QSM.OPENJAW}</span>
-                  </label>
-                </div>
-              )}
-            </div>
-          )}
-          <div className="qsm__filter__classgroup">
-            {qsmType !== PortalQsmType.Accommodation &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Ticket &&
-              qsmType !== PortalQsmType.Cruise &&
-              qsmType !== PortalQsmType.Transfer &&
-              qsmType !== PortalQsmType.GroupTour &&
-              askTravelClass && <TravelClassPicker />}
-            {qsmType !== PortalQsmType.Multidestination &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Flight &&
-              qsmType !== PortalQsmType.Transfer &&
-              askTravelType && <TravelTypePicker />}
-            {askNationality && <TravelNationalityPicker />}
-          </div>
-        </div>
-        <div className="qsm__input-group">
-          {/* TODO, determine which fields to show for what type of QSM */}
-          {(qsmType == PortalQsmType.Flight || qsmType == PortalQsmType.AccommodationAndFlight) && originDestinationField && (
-            <DoubleSearchInputGroup fieldConfig={originDestinationField} showReverse={originDestinationField.showReverse} />
-          )}
-          {qsmType == PortalQsmType.Flight && tripType == 'openjaw' && openJawReturnDestinationField && (
-            <DoubleSearchInputGroup fieldConfig={openJawReturnDestinationField} showReverse={openJawReturnDestinationField.showReverse} />
-          )}
-          {(qsmType == PortalQsmType.Accommodation || qsmType == PortalQsmType.AccommodationAndFlight || qsmType == PortalQsmType.GroupTour) && destination && (
-            <SearchInputGroup fieldConfig={destination} />
-          )}
-
-          <Dates value={dateRange} onChange={handleDateChange} />
-
-          {askTravelers && <TravelInputGroup />}
-
-          <button type="button" className="cta" onClick={handleSubmit}>
-            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
-            <span>{translations.QSM.CONFIRM}</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, addYears, format } from 'date-fns';
+import { DateRange } from '../../../booking-product/types';
+import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
+import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import { DateAmountType, PortalQsmType } from '@qite/tide-client';
+import { first } from 'lodash';
+
+const QSMContainer: React.FC = () => {
+  const dispatch = useDispatch();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const qsmState = useSelector((state: QSMRootState) => state.qsm);
+  const { qsmType, mobileFilterType, fromDate, toDate, tripType } = qsmState;
+  const {
+    askTravelers,
+    askRooms,
+    askNationality,
+    askTravelClass,
+    askTravelType,
+    submitIcon,
+    onSubmit,
+    travelTypes,
+    languageCode,
+    departureAirport,
+    destinationAirport,
+    returnAirport,
+    destination,
+    allowOneWay,
+    allowRoundtrip,
+    allowOpenJaw,
+    searchConfigurations
+  } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  useEffect(() => {
+    const defaultQsmType = first(searchConfigurations)?.qsmType;
+    console.log('Available search configurations:', searchConfigurations);
+    if (!defaultQsmType) return;
+    console.log('set default qsmType:', defaultQsmType);
+    handleQsmTypeChange(defaultQsmType);
+  }, [searchConfigurations]);
+
+  useEffect(() => {
+    if (fromDate || toDate) return;
+
+    let startDate = addMonths(new Date(), 1);
+    let endDate = addDays(startDate, 7);
+
+    if (qsmType === PortalQsmType.GroupTour) {
+      startDate = new Date();
+      endDate = addYears(startDate, 1);
+    }
+
+    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 ? format(value.fromDate, 'yyyy-MM-dd') : undefined));
+    dispatch(setToDate(value.toDate ? format(value.toDate, 'yyyy-MM-dd') : undefined));
+  };
+
+  const handleTripTypeChange = (value: 'oneway' | 'roundtrip' | 'openjaw') => {
+    dispatch(setTripType(value));
+  };
+
+  const handleQsmTypeChange = (value: PortalQsmType) => {
+    dispatch(setSelectedQsmType(value));
+
+    const now = new Date();
+
+    // Default fallback
+    let startDate = addMonths(now, 1);
+    let endDate = addDays(startDate, 7);
+    if (value === PortalQsmType.GroupTour) {
+      startDate = now;
+      endDate = addYears(startDate, 1);
+    }
+
+    const searchConfig = searchConfigurations.find((config) => config.qsmType === value);
+
+    if (searchConfig) {
+      const applyAmount = (baseDate: Date, type: DateAmountType, amount?: number) => {
+        if (!amount || type == null) return baseDate;
+
+        switch (type) {
+          case DateAmountType.days:
+            return addDays(baseDate, amount);
+          case DateAmountType.months:
+            return addMonths(baseDate, amount);
+          default:
+            return baseDate;
+        }
+      };
+
+      if (searchConfig.fromDateAmount) {
+        startDate = applyAmount(now, searchConfig.fromDateAmountType, searchConfig.fromDateAmount);
+      }
+
+      if (searchConfig.toDateAmount) {
+        endDate = applyAmount(startDate, searchConfig.toDateAmountType, searchConfig.toDateAmount);
+      }
+    }
+
+    handleDateChange({
+      fromDate: startDate,
+      toDate: endDate
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!onSubmit) return;
+
+    const { qsmType, fromDate, toDate, selectedTravelClass, selectedTravelType, selectedNationality, rooms, tripType, adults, kids, babies } = qsmState;
+
+    const selectedTravelTypeValue = travelTypes?.find((t) => t.label === selectedTravelType);
+    const payload = {
+      qsmType,
+      fromDate,
+      toDate,
+      travelClass: selectedTravelClass,
+      travelType: selectedTravelTypeValue,
+      nationality: selectedNationality,
+      tripType
+    } as any;
+
+    if (askRooms && qsmType !== PortalQsmType.Flight) {
+      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);
+
+    if (destination) {
+      const option = destination.options.find((opt) => opt.value === qsmState[destination.fieldKey]);
+      if (option) {
+        payload.destinationType = option?.type;
+      }
+    }
+
+    onSubmit(payload);
+    console.log('Submitted QSM data:', payload);
+  };
+
+  const addSearchFieldsToPayload = (payload: any, fields: BaseFieldConfig[], state: QSMState) => {
+    fields.forEach((field) => {
+      const fieldKey = field.fieldKey;
+      const option = field.options.find((opt) => opt.value === state[fieldKey]);
+      payload[fieldKey] = option?.key ?? state[fieldKey];
+    });
+  };
+
+  const originDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
+    if (!fromDate || !toDate || !departureAirport || !destinationAirport) return undefined;
+
+    const departureField: BaseFieldConfig = {
+      ...departureAirport,
+      label: translations.QSM.DEPARTURE,
+      placeholder: translations.QSM.CHOOSE_DEPARTURE
+    };
+
+    const destinationField: BaseFieldConfig = {
+      ...destinationAirport,
+      label: translations.QSM.DESTINATION,
+      placeholder: translations.QSM.CHOOSE_DESTINATION
+    };
+
+    return {
+      type: 'double',
+      fieldKey: 'locationGroup',
+      showReverse: true,
+      fields: [departureField, destinationField]
+    };
+  }, [fromDate, toDate, departureAirport, destinationAirport, translations]);
+
+  const openJawReturnDestinationField = useMemo<DoubleFieldConfig | undefined>(() => {
+    if (!fromDate || !toDate || !allowOpenJaw || !departureAirport || !returnAirport) return undefined;
+
+    const mirroredDepartureField: BaseFieldConfig = {
+      ...departureAirport,
+      label: translations.QSM.DESTINATION,
+      placeholder: translations.QSM.CHOOSE_DESTINATION
+    };
+
+    return {
+      type: 'double',
+      fieldKey: 'openjawLocationGroup',
+      showReverse: false,
+      disableReturnField: true,
+      fields: [returnAirport, mirroredDepartureField]
+    };
+  }, [fromDate, toDate, departureAirport, returnAirport, allowOpenJaw]);
+
+  const qsmTypeMeta: Record<PortalQsmType, { icon: string | string[]; label: string }> = {
+    [PortalQsmType.Multidestination]: {
+      icon: 'ui-location',
+      label: translations.QSM.MULTIDESTINATION
+    },
+    [PortalQsmType.Package]: {
+      icon: 'ui-suitcase',
+      label: translations.QSM.PACKAGES
+    },
+    [PortalQsmType.AccommodationAndFlight]: {
+      icon: ['ui-backforward', 'ui-bed'],
+      label: translations.QSM.TRANSPORT_HOTEL
+    },
+    [PortalQsmType.Accommodation]: {
+      icon: 'ui-bed',
+      label: translations.QSM.ACCOMMODATION
+    },
+    [PortalQsmType.Flight]: {
+      icon: 'ui-flight',
+      label: translations.QSM.TRANSPORTS
+    },
+    [PortalQsmType.GroupTour]: {
+      icon: 'ui-group',
+      label: translations.QSM.GROUP_TOUR
+    },
+    [PortalQsmType.RoundTrip]: {
+      icon: 'ui-group',
+      label: translations.QSM.ROUNDTRIP
+    },
+    [PortalQsmType.Ticket]: {
+      icon: 'ui-ticket',
+      label: translations.QSM.TICKET_ONLY
+    },
+    [PortalQsmType.Car]: {
+      icon: 'ui-car',
+      label: translations.QSM.RENT_A_CAR
+    },
+    [PortalQsmType.Transfer]: {
+      icon: 'ui-backforward',
+      label: translations.QSM.TRANSFERS
+    },
+    [PortalQsmType.Cruise]: {
+      icon: 'ui-ship',
+      label: translations.QSM.CRUISES
+    }
+  };
+
+  return (
+    <div className="qsm">
+      <div className="qsm__content">
+        <div className="qsm__tabs">
+          {searchConfigurations.map((searchConfig, index) => {
+            const meta = qsmTypeMeta[searchConfig.qsmType];
+
+            if (!meta) return null; // safety guard
+
+            return (
+              <button
+                key={`qsm-type-${index}`}
+                type="button"
+                className={`qsm__tab ${qsmType === searchConfig.qsmType ? 'qsm__tab--active' : ''}`}
+                onClick={() => handleQsmTypeChange(searchConfig.qsmType)}>
+                <span className="qsm__tab__icons">
+                  {Array.isArray(meta.icon) ? meta.icon.map((icon, i) => <Icon key={i} name={icon} height={14} />) : <Icon name={meta.icon} height={16} />}
+                </span>
+
+                {meta.label}
+              </button>
+            );
+          })}
+          {/* 
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Multidestination ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Multidestination)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-location" height={16} />
+            </span>
+            {translations.QSM.MULTIDESTINATION}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Package ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Package)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-suitcase" height={16} />
+            </span>
+            {translations.QSM.PACKAGES}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.AccommodationAndFlight ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.AccommodationAndFlight)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={14} />
+              +
+              <Icon name="ui-bed" height={14} />
+            </span>
+            {translations.QSM.TRANSPORT_HOTEL}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Accommodation ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Accommodation)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-bed" height={16} />
+            </span>
+            {translations.QSM.ACCOMMODATION}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Flight ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Flight)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-flight" height={16} />
+            </span>
+            {translations.QSM.TRANSPORTS}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.GroupTour ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.GroupTour)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-group" height={16} />
+            </span>
+            {translations.QSM.GROUP_TOUR}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Ticket ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Ticket)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ticket" height={16} />
+            </span>
+            {translations.QSM.TICKET_ONLY}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Car ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.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 ${qsmType == PortalQsmType.Transfer ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Transfer)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-backforward" height={16} />
+            </span>
+            {translations.QSM.TRANSFERS}
+          </button>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Cruise ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Cruise)}>
+            <span className="qsm__tab__icons">
+              <Icon name="ui-ship" height={16} />
+            </span>
+            {translations.QSM.CRUISES}
+          </button> */}
+        </div>
+        <div className="qsm__filter">
+          {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
+            <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 === PortalQsmType.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>{translations.QSM.ONEWAY}</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>{translations.QSM.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>{translations.QSM.OPENJAW}</span>
+                  </label>
+                </div>
+              )}
+            </div>
+          )}
+          <div className="qsm__filter__classgroup">
+            {qsmType !== PortalQsmType.Accommodation &&
+              qsmType !== PortalQsmType.Car &&
+              qsmType !== PortalQsmType.Ticket &&
+              qsmType !== PortalQsmType.Cruise &&
+              qsmType !== PortalQsmType.Transfer &&
+              qsmType !== PortalQsmType.GroupTour &&
+              askTravelClass && <TravelClassPicker />}
+            {qsmType !== PortalQsmType.Multidestination &&
+              qsmType !== PortalQsmType.Car &&
+              qsmType !== PortalQsmType.Flight &&
+              qsmType !== PortalQsmType.Transfer &&
+              askTravelType && <TravelTypePicker />}
+            {askNationality && <TravelNationalityPicker />}
+          </div>
+        </div>
+        <div className="qsm__input-group">
+          {/* TODO, determine which fields to show for what type of QSM */}
+          {(qsmType == PortalQsmType.Flight || qsmType == PortalQsmType.AccommodationAndFlight) && originDestinationField && (
+            <DoubleSearchInputGroup fieldConfig={originDestinationField} showReverse={originDestinationField.showReverse} />
+          )}
+          {qsmType == PortalQsmType.Flight && tripType == 'openjaw' && openJawReturnDestinationField && (
+            <DoubleSearchInputGroup fieldConfig={openJawReturnDestinationField} showReverse={openJawReturnDestinationField.showReverse} />
+          )}
+          {(qsmType == PortalQsmType.Accommodation || qsmType == PortalQsmType.AccommodationAndFlight || qsmType == PortalQsmType.GroupTour) && destination && (
+            <SearchInputGroup fieldConfig={destination} />
+          )}
+
+          <Dates value={dateRange} onChange={handleDateChange} />
+
+          {askTravelers && <TravelInputGroup />}
+
+          <button type="button" className="cta" onClick={handleSubmit}>
+            {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
+            <span>{translations.QSM.CONFIRM}</span>
+          </button>
+        </div>
+      </div>
+      {isMobile && mobileFilterType && <MobileFilterModal />}
+    </div>
+  );
+};
+
+export default QSMContainer;