@qite/tide-booking-component 1.4.91 → 1.4.93

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

@@ -1,91 +1,91 @@
-import React from 'react';
-import Icon from '../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;
+import React from 'react';
+import Icon from '../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,199 +1,199 @@
-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 '../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));
-    },
-    [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(() => {
-    console.log('options updated, resetting loading state');
-    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;
+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 '../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));
+    },
+    [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(() => {
+    console.log('options updated, resetting loading state');
+    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 +1,28 @@
-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;
+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;