@qite/tide-booking-component 1.4.124 → 1.4.125

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

@@ -1,321 +0,0 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  closeMobileFilter,
-  setActiveSearchField,
-  setFieldValue,
-  setFromDate,
-  setToDate,
-  setSearchResults as setSearchResultsAction,
-  setSearchResults
-} from '../../store/qsm-slice';
-import { QSMRootState } from '../../store/qsm-store';
-import SearchInput from '../search-input';
-import DateRangePicker from '../date-range-picker';
-import TravelInput from '../travel-input';
-import { format } from 'date-fns';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import { BaseFieldConfig, TypeaheadOption } from '../../types';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-const MobileFilterModal: React.FC = () => {
-  const { datesIcon, languageCode } = useContext(QSMConfigurationContext);
-  const translations = getTranslations(languageCode ?? 'en-GB');
-  const dispatch = useDispatch();
-  const {
-    mobileFilterType,
-    mobileDatePickerMode,
-    activeSearchFieldProps,
-    fromDate,
-    toDate,
-    searchResults,
-    departureAirport,
-    destinationAirport,
-    returnAirport,
-    destination
-  } = useSelector((state: QSMRootState) => state.qsm);
-
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  const [inputValue, setInputValue] = useState('');
-
-  /* ---------------------------------------------------------------- */
-  /* Sync local state when a new field is opened                       */
-  /* ---------------------------------------------------------------- */
-  useEffect(() => {
-    if (activeSearchFieldProps) {
-      setInputValue(activeSearchFieldProps.value || '');
-      // setSearchResultsLocal([]);
-      // hasTypedRef.current = false;
-    }
-  }, [activeSearchFieldProps]);
-
-  useEffect(() => {
-    if (mobileFilterType !== 'search') return;
-
-    requestAnimationFrame(() => {
-      const input = searchInputRef.current;
-      if (!input) return;
-
-      input.focus();
-      input.setSelectionRange(input.value.length, input.value.length);
-    });
-  }, [mobileFilterType, activeSearchFieldProps?.fieldKey]);
-
-  /* ---------------------------------------------------------------- */
-  /* Helpers                                                          */
-  /* ---------------------------------------------------------------- */
-  const closeModal = () => {
-    // hasTypedRef.current = false;
-    dispatch(closeMobileFilter());
-  };
-
-  const findConfig = (all: BaseFieldConfig[], key: string): BaseFieldConfig | undefined => {
-    for (const config of all) {
-      if (config.fieldKey === key) {
-        return config;
-      }
-    }
-    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);
-  }, [departureAirport, destinationAirport, returnAirport, destination, activeSearchFieldProps]);
-
-  const match = useCallback(
-    (input: string) => {
-      if (!input) {
-        return [];
-      }
-
-      const lowered = input.toLowerCase();
-      return activeSearchFieldProps?.options.filter(
-        (option) => option.value.toLowerCase().includes(lowered) || option.iataCode?.toLowerCase().includes(lowered)
-      );
-    },
-    [activeSearchFieldProps?.options]
-  );
-
-  const handleInputChange = useCallback(
-    (input: string) => {
-      setInputValue(input);
-      if (!activeSearchFieldProps) return;
-
-      dispatch(setFieldValue({ fieldKey: activeSearchFieldProps.fieldKey, value: input }));
-      dispatch(setSearchResults([]));
-      dispatch(setActiveSearchField(activeSearchFieldProps.fieldKey));
-
-      if (config?.onChange) {
-        config.onChange(input);
-        return;
-      }
-
-      const filtered = match(input) ?? [];
-      dispatch(setSearchResults(filtered));
-    },
-    [dispatch, activeSearchFieldProps, match]
-  );
-
-  useEffect(() => {
-    if (!activeSearchFieldProps) return;
-    if (!inputValue) return;
-
-    dispatch(setSearchResults(match(inputValue) ?? []));
-  }, [activeSearchFieldProps?.options]);
-
-  const handleLocationSelect = (option: TypeaheadOption) => {
-    if (activeSearchFieldProps) {
-      const { fieldKey } = activeSearchFieldProps;
-
-      dispatch(setFieldValue({ fieldKey, value: option.value }));
-      dispatch(setSearchResultsAction([]));
-      dispatch(setActiveSearchField(null));
-    }
-
-    dispatch(closeMobileFilter());
-  };
-
-  /* ---------------------------------------------------------------- */
-  /* Render helpers                                                   */
-  /* ---------------------------------------------------------------- */
-  const renderDatePickerModal = () => {
-    const hasValidDates = mobileDatePickerMode === 'single' ? Boolean(fromDate) : Boolean(fromDate && toDate);
-
-    return (
-      <div className="mobile-qsm-filter__modal">
-        {/* header */}
-        <div className="mobile-qsm-filter__modal-header">
-          <div className="mobile-qsm-filter__modal-header-row">
-            <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.CHOOSE_DATES}</span>
-            <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
-          </div>
-        </div>
-
-        {/* date inputs + picker */}
-        <div className="qsm__double-input qsm__double-input--date-modal">
-          {/* Departure */}
-          <div className="qsm__double-input__wrapper">
-            <label className="qsm__input-wrapper">
-              {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-              <span className="qsm__label">{translations.QSM.DEPARTURE_DATE}</span>
-              <input
-                type="text"
-                id="vertrek"
-                className="qsm__input u-ps-2"
-                placeholder={translations.QSM.DEPARTURE_DATE}
-                readOnly
-                value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''}
-              />
-              {mobileDatePickerMode === 'range' && <div className="qsm__input-line qsm__input-line--datepicker" />}
-            </label>
-
-            {/* Return (range mode) */}
-            {mobileDatePickerMode === 'range' && (
-              <label className="qsm__input-wrapper">
-                {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-                <span className="qsm__label qsm__label--second-input-label">{translations.QSM.RETURN_DATE}</span>
-                <input
-                  type="text"
-                  id="retour"
-                  className="qsm__input"
-                  placeholder={translations.QSM.RETURN_DATE}
-                  readOnly
-                  value={toDate ? format(new Date(toDate), 'dd/MM/yyyy') : ''}
-                />
-              </label>
-            )}
-          </div>
-
-          <DateRangePicker
-            fromDate={fromDate ? new Date(fromDate) : undefined}
-            toDate={mobileDatePickerMode === 'range' && toDate ? new Date(toDate) : undefined}
-            isSingleDate={mobileDatePickerMode === 'single'}
-            onSelectionChange={(from, to) => {
-              if (from) {
-                dispatch(setFromDate(from.toISOString()));
-              }
-
-              if (mobileDatePickerMode === 'range' && to) {
-                dispatch(setToDate(to.toISOString()));
-              } else {
-                dispatch(setToDate(undefined));
-              }
-            }}
-          />
-        </div>
-
-        {/* footer */}
-        <div className="mobile-qsm-filter__modal-footer">
-          <button
-            className={`cta ${hasValidDates ? '' : 'cta--disabled'}`}
-            disabled={!hasValidDates}
-            onClick={() => {
-              if (hasValidDates) {
-                closeModal();
-              }
-            }}>
-            {translations.QSM.CONFIRM}
-          </button>
-        </div>
-      </div>
-    );
-  };
-
-  const renderSearchInputModal = () => {
-    if (!activeSearchFieldProps) {
-      return null;
-    }
-
-    return (
-      <div className="mobile-qsm-filter__modal">
-        {/* header */}
-        <div className="mobile-qsm-filter__modal-header">
-          <div className="mobile-qsm-filter__modal-header-row">
-            <span className="mobile-qsm-filter__modal-header-title">{activeSearchFieldProps.label}</span>
-            <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
-          </div>
-        </div>
-        {/* <div className="mobile-qsm-filter__modal-wrapper"> */}
-        {/* input + dropdown */}
-        <div className="qsm__double-input qsm__double-input--search-modal">
-          <label className="qsm__input-wrapper">
-            <input
-              ref={searchInputRef}
-              type="text"
-              id="search"
-              value={inputValue}
-              onClick={(e) => e.stopPropagation()}
-              onChange={(e) => handleInputChange(e.target.value)}
-              className="qsm__input qsm__input--modal qsm__from-to u-ps-2"
-              placeholder={activeSearchFieldProps.placeholder}
-            />
-            <SearchInput
-              onChange={handleInputChange}
-              searchResults={searchResults}
-              onOptionSelect={handleLocationSelect}
-              highlightTarget={inputValue}
-              label={activeSearchFieldProps.label}
-            />
-          </label>
-        </div>
-        <div className="mobile-qsm-filter__modal-footer">
-          <button className="cta" onClick={closeModal}>
-            {translations.QSM.CONFIRM}
-          </button>
-        </div>
-        {/* </div> */}
-
-        {/* empty state */}
-        {/* {searchResultsLocal.length === 0 && (
-          <div className="mobile-qsm-filter__background-content">
-            <span className="mobile-qsm-filter__background-title">Geen resultaten</span>
-            <span className="mobile-qsm-filter__background-subtitle">Typ een plaatsnaam om te zoeken</span>
-          </div>
-        )} */}
-      </div>
-    );
-  };
-
-  const renderTravelerModal = () => (
-    <div className="mobile-qsm-filter__modal">
-      {/* header */}
-      <div className="mobile-qsm-filter__modal-header">
-        <div className="mobile-qsm-filter__modal-header-row">
-          <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.TRAVELERS}</span>
-          <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
-        </div>
-      </div>
-
-      <div className="qsm__double-input qsm__double-input--travel-modal">
-        <div className="qsm__input-wrapper qsm__input-wrapper--rooms">
-          <TravelInput />
-        </div>
-      </div>
-
-      <div className="mobile-qsm-filter__modal-footer">
-        <button className="cta" onClick={closeModal}>
-          {translations.QSM.CONFIRM}
-        </button>
-      </div>
-    </div>
-  );
-
-  /* ---------------------------------------------------------------- */
-  /* Switch modal type                                                */
-  /* ---------------------------------------------------------------- */
-  switch (mobileFilterType) {
-    case 'search':
-      return renderSearchInputModal();
-    case 'date':
-      return renderDatePickerModal();
-    case 'traveler':
-      return renderTravelerModal();
-    default:
-      return null;
-  }
-};
-
-export default MobileFilterModal;

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import Icon from '../../../shared/components/icon';
-import { TypeaheadOption } from '../../types';
-import Spinner from '../../../search-results/components/spinner/spinner';
-
-interface SearchInputProps {
-  onChange: (input: string) => void;
-  searchResults: TypeaheadOption[];
-  onOptionSelect: (val: TypeaheadOption) => void;
-  highlightTarget: string;
-  label: string;
-  isSecondInput?: boolean;
-  isDoubleInput?: boolean;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-}
-
-const SearchInput: React.FC<SearchInputProps> = ({
-  searchResults,
-  onOptionSelect,
-  highlightTarget,
-  label,
-  isSecondInput,
-  isDoubleInput,
-  isDisabled,
-  isLoading
-}) => {
-  if (isDisabled) {
-    return null;
-  }
-  const highlightMatch = (option: TypeaheadOption, highlight: string) => {
-    if (!highlight) {
-      return option.value;
-    }
-
-    const parts = option.value.split(new RegExp(`(${highlight})`, 'gi'));
-    return (
-      <span>
-        {parts.map((part, index) =>
-          part.toLowerCase() === highlight.toLowerCase() ? (
-            <span key={index} className="qsm__double-input-option-content--airport">
-              {part}
-            </span>
-          ) : (
-            part
-          )
-        )}
-      </span>
-    );
-  };
-
-  // if (searchResults.length === 0) {
-  //   return null;
-  // }
-
-  return (
-    <div
-      className={`qsm__double-input-options${isSecondInput ? ' qsm__double-input-options--second-input' : ''}${
-        isDoubleInput ? ' qsm__double-input-options--splittable' : ''
-      }`}>
-      {isLoading && <Spinner />}
-      {searchResults.map((option, index) => (
-        <div
-          key={index}
-          className="qsm__double-input-option"
-          onMouseDown={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onOptionSelect(option);
-          }}
-          role="option"
-          aria-selected={false}>
-          <div className="qsm__double-input-option-content">
-            <Icon name={option.type === 'hotel' ? 'ui-hotel' : option.type === 'airport' ? 'ui-flight' : 'ui-location'} height={16} />
-
-            <div className="qsm__double-input-option-content-text">
-              {highlightMatch(option, highlightTarget)}
-              {option.country && <span className="qsm__double-input-option-content-country">{option.country}</span>}
-            </div>
-          </div>
-          {option.iataCode && <span className="qsm__double-input-option-content-airport-label">[{option.iataCode}]</span>}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default SearchInput;

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

@@ -1,209 +0,0 @@
-import React, { useEffect, useRef, useMemo, useCallback, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setFieldValue, setSearchResults, setActiveSearchField, setMobileFilterType, setActiveSearchFieldProps } from '../../store/qsm-slice';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import SearchInput from '../search-input';
-import Icon from '../../../shared/components/icon';
-import { BaseFieldConfig, TypeaheadOption, OptionType } from '../../types';
-
-interface Props {
-  fieldConfig: BaseFieldConfig;
-  enableMobileFilter?: boolean;
-  highlightTarget?: string;
-  isSecondInput?: boolean;
-  isDoubleInput?: boolean;
-  readOnlyForced?: boolean;
-  isDisabled?: boolean;
-}
-
-const SearchInputGroup: React.FC<Props> = ({
-  fieldConfig,
-  enableMobileFilter = true,
-  highlightTarget = '',
-  isSecondInput = false,
-  isDoubleInput = false,
-  readOnlyForced = false,
-  isDisabled = false
-}) => {
-  const dispatch = useDispatch();
-  const ref = useRef<HTMLLabelElement>(null);
-  const small = useMediaQuery('(max-width: 768px)');
-  if (!fieldConfig) {
-    return null;
-  }
-  const { fieldKey, label, placeholder, options, autoComplete } = fieldConfig;
-  const [isLoading, setIsLoading] = useState(false);
-
-  const selector = useMemo(() => (state: QSMRootState) => ((state.qsm as any)[fieldKey] ?? '') as string, [fieldKey]);
-  const value = useSelector(selector);
-  const { searchResults, activeSearchField } = useSelector((state: QSMRootState) => state.qsm);
-
-  const selectedOption = options.find((option) => option.value === value);
-  const typeOfSelectedOption: OptionType = selectedOption?.type ?? 'other';
-
-  const match = useCallback(
-    (input: string) => {
-      if (!input) {
-        return [];
-      }
-
-      const lowered = input.toLowerCase();
-
-      return options
-        .filter((option) => option.value.toLowerCase().includes(lowered) || option.iataCode?.toLowerCase().includes(lowered))
-        .sort((a, b) => {
-          const aExactIata = a.iataCode?.toLowerCase() === lowered;
-          const bExactIata = b.iataCode?.toLowerCase() === lowered;
-
-          if (aExactIata && !bExactIata) return -1;
-          if (!aExactIata && bExactIata) return 1;
-
-          return 0;
-        });
-    },
-    [options]
-  );
-
-  const handleInputChange = useCallback(
-    (input: string) => {
-      dispatch(setFieldValue({ fieldKey, value: input }));
-      dispatch(setSearchResults([]));
-
-      if (small) return;
-
-      dispatch(setActiveSearchField(fieldKey));
-
-      // if field has custom onChange (API search)
-      if (fieldConfig.onChange) {
-        fieldConfig.onChange(input);
-        setIsLoading(true);
-        return;
-      }
-
-      // fallback to local filtering
-      dispatch(setSearchResults(match(input)));
-    },
-    [dispatch, fieldKey, small, match, fieldConfig]
-  );
-
-  useEffect(() => {
-    setIsLoading(false);
-  }, [options]);
-
-  useEffect(() => {
-    if (!value || activeSearchField !== fieldKey) return;
-
-    dispatch(setSearchResults(match(value)));
-  }, [options, value, activeSearchField, fieldConfig, fieldKey]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (!['Tab', 'Enter'].includes(e.key)) return;
-
-      if (value.length === 3 && autoComplete) {
-        const exactIataMatch = findExactIataMatch(options, value);
-
-        if (exactIataMatch) {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-          }
-          dispatch(setFieldValue({ fieldKey, value: exactIataMatch.value }));
-          dispatch(setSearchResults([]));
-          dispatch(setActiveSearchField(null));
-        }
-      }
-    },
-    [value, autoComplete, options, dispatch, fieldKey]
-  );
-
-  const handleOptionSelect = useCallback(
-    (option: TypeaheadOption) => {
-      dispatch(setFieldValue({ fieldKey, value: option.value }));
-      dispatch(setSearchResults([]));
-      dispatch(setActiveSearchField(null));
-    },
-    [dispatch, fieldKey]
-  );
-
-  const click = () => {
-    if (isDisabled) return;
-
-    dispatch(setActiveSearchField(fieldKey));
-    dispatch(setSearchResults([]));
-    if (small && enableMobileFilter) {
-      dispatch(
-        setActiveSearchFieldProps({
-          fieldKey,
-          label,
-          placeholder,
-          value,
-          options
-        })
-      );
-      dispatch(setMobileFilterType('search'));
-    } else if (value.trim()) {
-      dispatch(setSearchResults(match(value)));
-    }
-  };
-
-  const findExactIataMatch = (options: TypeaheadOption[], input: string): TypeaheadOption | undefined =>
-    options.find((option) => option.iataCode && option.iataCode.toLowerCase() === input.toLowerCase());
-
-  useEffect(() => {
-    const outside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        dispatch(setActiveSearchField(null));
-      }
-    };
-    const esc = (e: KeyboardEvent) => e.key === 'Escape' && dispatch(setActiveSearchField(null));
-
-    if (!small && activeSearchField === fieldKey) {
-      document.addEventListener('mousedown', outside);
-      document.addEventListener('keydown', esc);
-    }
-    return () => {
-      document.removeEventListener('mousedown', outside);
-      document.removeEventListener('keydown', esc);
-    };
-  }, [dispatch, small, activeSearchField, fieldKey]);
-
-  return (
-    <label className="qsm__single-input-wrapper" ref={ref}>
-      <Icon name={typeOfSelectedOption === 'hotel' ? 'ui-hotel' : typeOfSelectedOption === 'airport' ? 'ui-flight' : 'ui-location'} height={16} />
-
-      <span className={`qsm__label${isSecondInput ? ' qsm__label--second-input-label qsm__label--splittable' : ''}`}>{label}</span>
-
-      <input
-        type="text"
-        id={fieldKey}
-        name={fieldKey}
-        value={value}
-        disabled={isDisabled}
-        readOnly={small || readOnlyForced || isDisabled}
-        onFocus={click}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-        onChange={(e) => !small && !readOnlyForced && !isDisabled && handleInputChange(e.target.value)}
-        className={`qsm__input${isSecondInput ? ' qsm__input--splittable' : ' u-ps-2'}`}
-        placeholder={placeholder}
-      />
-
-      {!small && activeSearchField === fieldKey && (
-        <SearchInput
-          onChange={handleInputChange}
-          searchResults={searchResults}
-          onOptionSelect={handleOptionSelect}
-          highlightTarget={highlightTarget}
-          label={label}
-          isSecondInput={isSecondInput}
-          isDoubleInput={isDoubleInput}
-          isDisabled={isDisabled}
-          isLoading={isLoading}
-        />
-      )}
-    </label>
-  );
-};
-
-export default SearchInputGroup;

package/src/qsm/components/travel-class-picker/index.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setSelectedTravelClass } from '../../store/qsm-slice';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import ItemPicker from '../item-picker';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-const TravelClassPicker: React.FC = () => {
-  const { travelClasses, languageCode } = useContext(QSMConfigurationContext);
-  if (!travelClasses || travelClasses.length === 0) return null;
-  const translations = getTranslations(languageCode ?? 'en-GB');
-  const { selectedTravelClass } = useSelector((state: QSMRootState) => state.qsm);
-  const dispatch = useDispatch();
-
-  return (
-    <ItemPicker
-      items={travelClasses}
-      selection={selectedTravelClass}
-      label={translations.QSM.TRAVEL_CLASS_LABEL}
-      placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
-      classModifier="travel-class-picker__items"
-      onPick={(picked) => dispatch(setSelectedTravelClass(picked))}
-    />
-  );
-};
-
-export default TravelClassPicker;