@qite/tide-booking-component 1.4.124 → 1.4.125

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

@@ -1,671 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef } 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 '../../../shared/components/icon';
-import TravelNationalityPicker from '../travel-nationality-picker';
-import { addDays, addMonths, addYears, format } from 'date-fns';
-import { DateRange } from '../../../booking-product/types';
-import { hydrateQsmState, 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(() => {
-    if (!hasHydratedFromSession.current) return;
-
-    const stored = sessionStorage.getItem(QSM_SESSION_STORAGE_KEY);
-    const storedQsmType = stored ? JSON.parse(stored).qsmType : undefined;
-
-    if (storedQsmType) return;
-
-    const defaultQsmType = first(searchConfigurations)?.qsmType;
-    if (!defaultQsmType) return;
-
-    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 QSM_SESSION_STORAGE_KEY = 'qsm-state';
-
-  const hasHydratedFromSession = useRef(false);
-
-  useEffect(() => {
-    try {
-      const stored = sessionStorage.getItem(QSM_SESSION_STORAGE_KEY);
-
-      if (stored) {
-        dispatch(hydrateQsmState(JSON.parse(stored)));
-      }
-    } catch {
-      sessionStorage.removeItem(QSM_SESSION_STORAGE_KEY);
-    } finally {
-      hasHydratedFromSession.current = true;
-    }
-  }, [dispatch]);
-
-  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
-    }
-  };
-
-  useEffect(() => {
-    if (!hasHydratedFromSession.current) return;
-
-    const searchFields = [departureAirport, destinationAirport, returnAirport, destination].filter((field): field is BaseFieldConfig => field !== undefined);
-
-    const dynamicFields = searchFields.reduce<Record<string, any>>((result, field) => {
-      result[field.fieldKey] = qsmState[field.fieldKey];
-      return result;
-    }, {});
-
-    const stateToPersist: Partial<QSMState> = {
-      qsmType,
-      fromDate,
-      toDate,
-      tripType,
-      selectedTravelClass: qsmState.selectedTravelClass,
-      selectedTravelType: qsmState.selectedTravelType,
-      selectedNationality: qsmState.selectedNationality,
-      adults: qsmState.adults,
-      kids: qsmState.kids,
-      babies: qsmState.babies,
-      rooms: qsmState.rooms,
-      travelers: qsmState.travelers,
-      ...dynamicFields
-    };
-
-    sessionStorage.setItem(QSM_SESSION_STORAGE_KEY, JSON.stringify(stateToPersist));
-  }, [qsmState, qsmType, fromDate, toDate, tripType, departureAirport, destinationAirport, returnAirport, destination]);
-
-  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>
-        {!isMobile && (
-          <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 />}
-
-          {isMobile && (
-            <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>
-          )}
-
-          <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;