@qite/tide-booking-component 1.4.38 → 1.4.40

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

@@ -1,55 +1,39 @@
-import React, { useContext, useEffect, useRef, useMemo, useCallback } from 'react';
+import React, { useEffect, useRef, useMemo, useCallback } 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 QSMConfigurationContext from '../../qsm-configuration-context';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import SearchInput from '../search-input';
 import Icon from '../icon';
-import { FieldConfig, BaseFieldConfig, DoubleFieldConfig, TypeaheadOption, OptionType } from '../../types';
-
-const findConfig = (all: FieldConfig[], key: string): BaseFieldConfig | undefined => {
-  for (const config of all) {
-    if (config.type === 'single' && config.fieldKey === key) {
-      return config;
-    }
-    if (config.type === 'double') {
-      const field = (config as DoubleFieldConfig).fields.find((x) => x.fieldKey === key);
-      if (field) {
-        return field;
-      }
-    }
-  }
-  return undefined;
-};
+import { BaseFieldConfig, TypeaheadOption, OptionType } from '../../types';
 
 interface Props {
-  fieldKey: string;
+  fieldConfig: BaseFieldConfig;
   enableMobileFilter?: boolean;
   highlightTarget?: string;
   isSecondInput?: boolean;
   isDoubleInput?: boolean;
   readOnlyForced?: boolean;
+  isDisabled?: boolean;
 }
 
 const SearchInputGroup: React.FC<Props> = ({
-  fieldKey,
+  fieldConfig,
   enableMobileFilter = true,
   highlightTarget = '',
   isSecondInput = false,
   isDoubleInput = false,
-  readOnlyForced = false
+  readOnlyForced = false,
+  isDisabled = false
 }) => {
   const dispatch = useDispatch();
   const ref = useRef<HTMLLabelElement>(null);
   const small = useMediaQuery('(max-width: 768px)');
-  const { searchFields } = useContext(QSMConfigurationContext);
-  const config = findConfig(searchFields, fieldKey);
-  if (!config) {
+  if (!fieldConfig) {
     return null;
   }
 
-  const { label, placeholder, options, autoComplete } = config;
+  const { fieldKey, label, placeholder, options, autoComplete } = fieldConfig;
 
   const selector = useMemo(() => (state: QSMRootState) => ((state.qsm as any)[fieldKey] ?? '') as string, [fieldKey]);
   const value = useSelector(selector);
@@ -80,22 +64,22 @@ const SearchInputGroup: React.FC<Props> = ({
       dispatch(setActiveSearchField(fieldKey));
 
       // if field has custom onChange (API search)
-      if (config.onChange) {
-        config.onChange(input);
+      if (fieldConfig.onChange) {
+        fieldConfig.onChange(input);
         return;
       }
 
       // fallback to local filtering
       dispatch(setSearchResults(match(input)));
     },
-    [dispatch, fieldKey, small, match, config]
+    [dispatch, fieldKey, small, match, fieldConfig]
   );
 
   useEffect(() => {
     if (!value || activeSearchField !== fieldKey) return;
 
     dispatch(setSearchResults(match(value)));
-  }, [options, value, activeSearchField, config, fieldKey]);
+  }, [options, value, activeSearchField, fieldConfig, fieldKey]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -127,6 +111,8 @@ const SearchInputGroup: React.FC<Props> = ({
   );
 
   const click = () => {
+    if (isDisabled) return;
+
     dispatch(setActiveSearchField(fieldKey));
     dispatch(setSearchResults([]));
     if (small && enableMobileFilter) {
@@ -177,11 +163,12 @@ const SearchInputGroup: React.FC<Props> = ({
         id={fieldKey}
         name={fieldKey}
         value={value}
-        readOnly={small}
+        disabled={isDisabled}
+        readOnly={small || readOnlyForced || isDisabled}
         onFocus={click}
         onClick={(e) => e.stopPropagation()}
         onKeyDown={handleKeyDown}
-        onChange={(e) => !small && !readOnlyForced && handleInputChange(e.target.value)}
+        onChange={(e) => !small && !readOnlyForced && !isDisabled && handleInputChange(e.target.value)}
         className={`qsm__input${isSecondInput ? ' qsm__input--splittable' : ' u-ps-2'}`}
         placeholder={placeholder}
       />
@@ -195,6 +182,7 @@ const SearchInputGroup: React.FC<Props> = ({
           label={label}
           isSecondInput={isSecondInput}
           isDoubleInput={isDoubleInput}
+          isDisabled={isDisabled}
         />
       )}
     </label>

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

@@ -8,6 +8,7 @@ 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);
 

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

@@ -9,12 +9,12 @@ import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
 
 const TravelInput: React.FC = () => {
-  const { type, askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
+  const dispatch = useDispatch();
+  const { askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
     useContext(QSMConfigurationContext);
-  const areTravelersInRooms = type !== 'flight' && askRooms;
+  const { adults, kids, babies, rooms, qsmType } = useSelector((state: QSMRootState) => state.qsm);
+  const areTravelersInRooms = qsmType !== 'flight' && askRooms;
 
-  const dispatch = useDispatch();
-  const { adults, kids, babies, rooms } = useSelector((state: QSMRootState) => state.qsm);
   const translations = getTranslations(languageCode ?? 'en-GB');
 
   const getTravelerButtonClass = (disabled: boolean) => `button button--increment ${disabled ? 'button--disabled' : ''}`;

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

@@ -30,12 +30,13 @@ const TravelInputGroup: React.FC = () => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const [isOpen, setIsOpen] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { type, askRooms, defaultTravelers, maxTravelers, languageCode } = useContext(QSMConfigurationContext);
+  const { askRooms, defaultTravelers, maxTravelers, languageCode } = useContext(QSMConfigurationContext);
+  const { adults, rooms, qsmType } = useSelector((s: QSMRootState) => s.qsm);
+
   const translations = getTranslations(languageCode ?? 'en-GB');
 
-  const areTravelersInRooms = type !== 'flight' && askRooms;
+  const areTravelersInRooms = qsmType !== 'flight' && askRooms;
 
-  const { adults, rooms } = useSelector((s: QSMRootState) => s.qsm);
   const initDone = useRef(false);
 
   const travelerSummary = useSelector((state: QSMRootState) => selectTravelerSummary(state, areTravelersInRooms));

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

@@ -8,6 +8,7 @@ import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelNationalityPicker: React.FC = () => {
   const { nationalities, languageCode } = useContext(QSMConfigurationContext);
+  if (!nationalities || nationalities.length === 0) return null;
   const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedNationality } = useSelector((state: QSMRootState) => state.qsm);
 

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

@@ -8,6 +8,7 @@ import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelTypePicker: React.FC = () => {
   const { travelTypes, languageCode } = useContext(QSMConfigurationContext);
+  if (!travelTypes || travelTypes.length === 0) return null;
   const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedTravelType } = useSelector((state: QSMRootState) => state.qsm);
 

package/src/qsm/qsm-configuration-context.ts

@@ -4,23 +4,10 @@ import { QSMConfiguration } from './types';
 const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   type: 'hotel',
   askTravelers: false,
-  askRooms: false,
+  askNationality: false,
+  askTravelClass: false,
   askTravelType: false,
-
-  searchFields: [],
-
-  origins: [],
-  originTypeAhead: false,
-  onOriginChange: () => {},
-  destinations: [],
-  destinationTypeAhead: false,
-  destinationIcon: '',
-  onDestinationChange: () => {},
-
-  airports: [],
-  airportTypeAhead: false,
-  airportIcon: '',
-  onAirportChange: () => {},
+  askRooms: false,
 
   travelTypes: [],
   travelTypeIcon: '',
@@ -29,12 +16,14 @@ const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   travelClassIcon: '',
 
   nationalities: [],
+  dateFlexibility: [],
 
   showReturnDate: false,
   datesIcon: '',
 
   onSubmit: () => {},
-  submitIcon: ''
+  submitIcon: '',
+  languageCode: ''
 });
 
 export default QSMConfigurationContext;

package/src/qsm/store/qsm-slice.ts

@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { MobileFilterType, Room, TravelerType, TravelType, TravelClass, TypeaheadOption } from '../types';
+import { MobileFilterType, Room, TravelerType, TravelType, TravelClass, TypeaheadOption, QsmType } from '../types';
 import { ReactNode } from 'react';
 
 export interface QSMState {
+  qsmType?: QsmType;
   selectedOrigin?: string;
   selectedDestination?: string;
   selectedAirport?: string;
@@ -31,6 +32,7 @@ export interface QSMState {
   datesIcon?: ReactNode;
   selectedFlexRange?: { before: number; after: number };
   travelTypes: TravelType[];
+  tripType: 'oneway' | 'roundtrip' | 'openjaw';
   selectedTravelType?: string;
   travelClasses: TravelClass[];
   selectedTravelClass?: string;
@@ -47,6 +49,7 @@ export interface QSMState {
 }
 
 const initialState: QSMState = {
+  qsmType: 'hotel-flight',
   selectedOrigin: undefined,
   selectedDestination: undefined,
   selectedAirport: undefined,
@@ -72,6 +75,7 @@ const initialState: QSMState = {
   travelTypes: [],
   selectedTravelType: undefined,
   travelClasses: [],
+  tripType: 'roundtrip',
   selectedTravelClass: undefined,
   selectedNationality: undefined,
   defaultTravelers: 2,
@@ -88,6 +92,9 @@ const qsmSlice = createSlice({
   name: 'qsm',
   initialState,
   reducers: {
+    setSelectedQsmType: (state, action: PayloadAction<QsmType>) => {
+      state.qsmType = action.payload;
+    },
     setOrigin: (state, action: PayloadAction<string>) => {
       state.selectedOrigin = action.payload;
     },
@@ -161,6 +168,9 @@ const qsmSlice = createSlice({
     setTravelTypes: (state, action: PayloadAction<TravelType[]>) => {
       state.travelTypes = action.payload;
     },
+    setTripType: (state, action: PayloadAction<'oneway' | 'roundtrip' | 'openjaw'>) => {
+      state.tripType = action.payload;
+    },
     setSelectedTravelType: (state, action) => {
       state.selectedTravelType = action.payload;
     },
@@ -223,6 +233,7 @@ const qsmSlice = createSlice({
 });
 
 export const {
+  setSelectedQsmType,
   setOrigin,
   setDestination,
   setAirport,
@@ -239,6 +250,7 @@ export const {
   setMaxDate,
   setDateFlexibility,
   setSelectedFlexRange,
+  setTripType,
   setTravelTypes,
   setSelectedTravelType,
   setTravelClasses,

package/src/qsm/types.ts

@@ -1,49 +1,40 @@
 import { ReactNode } from 'react';
 
 export interface QSMConfiguration {
+  type?: QsmType;
   // Type specification and dedicated parameters
-  type: 'hotel' | 'roundTrip' | 'flight';
   askRooms?: boolean; // hotel || roundTrip
   askTravelType?: boolean; // hotel || roundTrip
+  allowOneWay?: boolean; // flight
+  allowRoundtrip?: boolean; // flight
   allowOpenJaw?: boolean; // flight
   allowMultiCity?: boolean; // flight
   askTravelClass?: boolean; // flight
-  allowOneWay?: boolean; // flight
   additionalFilters?: AdditionalFilters; // flight
   askTravelers: boolean;
-
-  // Fields (form)
-  searchFields: FieldConfig[];
+  askNationality?: boolean;
 
   // Origins and destinations
-  origins: Origin[];
-  originTypeAhead: boolean;
-  onOriginChange: (origin: string) => void;
-  destinations: Destination[];
-  destinationTypeAhead: boolean;
-  destinationIcon: ReactNode;
-  onDestinationChange: (destination: string) => void;
-
-  // Airports
-  airports: Airport[];
-  airportTypeAhead: boolean;
-  airportIcon: ReactNode;
-  onAirportChange: (airport: string) => void;
+  departureAirport?: BaseFieldConfig;
+  destinationAirport?: BaseFieldConfig;
+  returnAirport?: BaseFieldConfig;
+
+  destination?: BaseFieldConfig;
 
   // Travel types
-  travelTypes: TravelType[];
-  travelTypeIcon: ReactNode;
+  travelTypes?: TravelType[];
+  travelTypeIcon?: ReactNode;
 
   // Travel classes
-  travelClasses: TravelClass[];
-  travelClassIcon: ReactNode;
+  travelClasses?: TravelClass[];
+  travelClassIcon?: ReactNode;
 
   // Date flexibility
   dateFlexibility?: DateFlexibility[];
   minDate?: Date;
   maxDate?: Date;
-  showReturnDate: boolean;
-  datesIcon: ReactNode;
+  showReturnDate?: boolean;
+  datesIcon?: ReactNode;
 
   // Travelers
   defaultTravelers?: number;
@@ -58,10 +49,13 @@ export interface QSMConfiguration {
   languageCode?: string;
 }
 
+export type QsmType = 'multidestination' | 'hotel' | 'roundTrip' | 'flight' | 'hotel-flight' | 'package' | 'ticket' | 'car' | 'transfers' | 'cruises';
+
 export interface BaseFieldConfig {
   fieldKey: string;
   label: string;
   placeholder: string;
+  icon: ReactNode;
   options: TypeaheadOption[];
   autoComplete?: boolean;
   onChange?: (data: any) => void;
@@ -85,6 +79,7 @@ export interface DoubleFieldConfig {
   type: 'double';
   fieldKey: string;
   showReverse?: boolean;
+  disableReturnField?: boolean;
   fields: BaseFieldConfig[];
 }
 
@@ -95,21 +90,6 @@ export interface AdditionalFilters {
   includeLuggage: boolean;
 }
 
-export interface Origin {
-  key: string;
-  value: string;
-}
-
-export interface Destination {
-  key: string;
-  value: string;
-}
-
-export interface Airport {
-  key: string;
-  value: string;
-}
-
 export interface DateFlexibility {
   name: string;
   before: number;