@qite/tide-booking-component 1.4.124 → 1.4.126

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

@@ -1,282 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-import { MobileFilterType, Room, TravelerType, TypeaheadOption } from '../types';
-import { ReactNode } from 'react';
-import { PickerItem } from '../../shared/types';
-import { PortalQsmType } from '@qite/tide-client';
-
-export interface QSMState {
-  qsmType?: PortalQsmType;
-  selectedOrigin?: string;
-  selectedDestination?: string;
-  selectedAirport?: string;
-  fromDate?: string;
-  toDate?: string;
-  travelers: any[];
-  mobileFilterType: MobileFilterType;
-  searchResults: TypeaheadOption[];
-  activeSearchField: string | null;
-  activeSearchFieldProps: {
-    fieldKey: string;
-    label: string;
-    placeholder: string;
-    value: string;
-    options: TypeaheadOption[];
-  } | null;
-  mobileDatePickerMode: 'range' | 'single';
-  minDate?: string;
-  maxDate?: string;
-  dateFlexibility?: {
-    name: string;
-    before: number;
-    after: number;
-  }[];
-  datesIcon?: ReactNode;
-  selectedFlexRange?: { before: number; after: number };
-  travelTypes: PickerItem[];
-  tripType: 'oneway' | 'roundtrip' | 'openjaw';
-  selectedTravelType?: string;
-  travelClasses: PickerItem[];
-  selectedTravelClass?: string;
-  selectedNationality?: string;
-  defaultTravelers: number;
-  maxTravelers: number;
-  maxChildAge: number;
-  maxInfantAge: number;
-  adults: number;
-  kids: number;
-  babies: number;
-  rooms: Room[];
-  [key: string]: any;
-}
-
-const initialState: QSMState = {
-  qsmType: PortalQsmType.AccommodationAndFlight,
-  selectedOrigin: undefined,
-  selectedDestination: undefined,
-  selectedAirport: undefined,
-  fromDate: undefined,
-  toDate: undefined,
-  travelers: [
-    {
-      adults: 2,
-      children: 0,
-      childrensAges: []
-    }
-  ],
-  mobileFilterType: null,
-  activeSearchField: null,
-  activeSearchFieldProps: null,
-  searchResults: [],
-  mobileDatePickerMode: 'range',
-  minDate: undefined,
-  maxDate: undefined,
-  dateFlexibility: [],
-  datesIcon: undefined,
-  selectedFlexRange: undefined,
-  travelTypes: [],
-  selectedTravelType: undefined,
-  travelClasses: [],
-  tripType: 'roundtrip',
-  selectedTravelClass: undefined,
-  selectedNationality: undefined,
-  defaultTravelers: 2,
-  maxTravelers: 9,
-  maxChildAge: 12,
-  maxInfantAge: 2,
-  adults: 2,
-  kids: 0,
-  babies: 0,
-  rooms: [{ adults: 2, kids: 0, babies: 0 }]
-};
-
-const qsmSlice = createSlice({
-  name: 'qsm',
-  initialState,
-  reducers: {
-    setSelectedQsmType: (state, action: PayloadAction<PortalQsmType>) => {
-      state.qsmType = action.payload;
-    },
-    setOrigin: (state, action: PayloadAction<string>) => {
-      state.selectedOrigin = action.payload;
-    },
-    setDestination: (state, action: PayloadAction<string>) => {
-      state.selectedDestination = action.payload;
-    },
-    setAirport: (state, action: PayloadAction<string>) => {
-      state.selectedAirport = action.payload;
-    },
-    setFromDate: (state, action: PayloadAction<string | undefined>) => {
-      state.fromDate = action.payload;
-    },
-    setFieldValue: (
-      state,
-      action: PayloadAction<{
-        fieldKey: string;
-        value: any;
-      }>
-    ) => {
-      const { fieldKey, value } = action.payload;
-      (state as any)[fieldKey] = value;
-    },
-    setToDate: (state, action: PayloadAction<string | undefined>) => {
-      state.toDate = action.payload;
-    },
-    setTravelers: (state, action: PayloadAction<any[]>) => {
-      state.travelers = action.payload;
-    },
-    setMobileFilterType: (state, action: PayloadAction<MobileFilterType>) => {
-      state.mobileFilterType = action.payload;
-    },
-    closeMobileFilter: (state) => {
-      state.mobileFilterType = null;
-    },
-    setActiveSearchField: (state, action: PayloadAction<string | null>) => {
-      state.activeSearchField = action.payload;
-    },
-    setActiveSearchFieldProps: (
-      state,
-      action: PayloadAction<{
-        fieldKey: string;
-        label: string;
-        placeholder: string;
-        value: string;
-        options: TypeaheadOption[];
-      }>
-    ) => {
-      state.activeSearchFieldProps = action.payload;
-    },
-    setSearchResults: (state, action: PayloadAction<TypeaheadOption[]>) => {
-      state.searchResults = action.payload;
-    },
-    setMobileDatePickerMode: (state, action: PayloadAction<'range' | 'single'>) => {
-      state.mobileDatePickerMode = action.payload;
-    },
-    setMinDate: (state, action: PayloadAction<string | undefined>) => {
-      state.minDate = action.payload;
-    },
-    setMaxDate: (state, action: PayloadAction<string | undefined>) => {
-      state.maxDate = action.payload;
-    },
-    setDatesIcon: (state, action: PayloadAction<ReactNode | undefined>) => {
-      state.datesIcon = action.payload;
-    },
-    setDateFlexibility: (state, action: PayloadAction<QSMState['dateFlexibility']>) => {
-      state.dateFlexibility = action.payload;
-    },
-    setSelectedFlexRange: (state, action: PayloadAction<{ before: number; after: number } | undefined>) => {
-      state.selectedFlexRange = action.payload;
-    },
-    setTravelTypes: (state, action: PayloadAction<PickerItem[]>) => {
-      state.travelTypes = action.payload;
-    },
-    setTripType: (state, action: PayloadAction<'oneway' | 'roundtrip' | 'openjaw'>) => {
-      state.tripType = action.payload;
-    },
-    setSelectedTravelType: (state, action) => {
-      state.selectedTravelType = action.payload;
-    },
-    setTravelClasses: (state, action: PayloadAction<PickerItem[]>) => {
-      state.travelClasses = action.payload;
-    },
-    setSelectedTravelClass: (state, action) => {
-      state.selectedTravelClass = action.payload;
-    },
-    setSelectedNationality: (state, action) => {
-      state.selectedNationality = action.payload;
-    },
-    setDefaultTravelers: (state, action: PayloadAction<number>) => {
-      state.defaultTravelers = action.payload;
-    },
-    setMaxTravelers: (state, action: PayloadAction<number>) => {
-      state.maxTravelers = action.payload;
-    },
-    setMaxChildAge: (state, action: PayloadAction<number>) => {
-      state.maxChildAge = action.payload;
-    },
-    setMaxInfantAge: (state, action: PayloadAction<number>) => {
-      state.maxInfantAge = action.payload;
-    },
-    setAdults: (state, action) => {
-      state.adults = action.payload;
-    },
-    setKids: (state, action) => {
-      state.kids = action.payload;
-    },
-    setBabies: (state, action) => {
-      state.babies = action.payload;
-    },
-    setRooms: (state, action) => {
-      state.rooms = action.payload;
-    },
-    addRoom: (state) => {
-      if (state.rooms.length < 4) {
-        state.rooms.push({ adults: 2, kids: 0, babies: 0 });
-      }
-    },
-    removeRoom: (state, action) => {
-      const index = action.payload;
-      state.rooms.splice(index, 1);
-    },
-    updateRoomTraveler: (
-      state,
-      action: PayloadAction<{
-        roomIndex: number;
-        type: TravelerType;
-        value: number;
-      }>
-    ) => {
-      const { roomIndex, type, value } = action.payload;
-      state.rooms[roomIndex][type] = value;
-    },
-    hydrateQsmState: (state, action: PayloadAction<Partial<QSMState>>) => {
-      Object.assign(state, action.payload);
-
-      state.searchResults = [];
-      state.activeSearchField = null;
-      state.activeSearchFieldProps = null;
-      state.mobileFilterType = null;
-    }
-  }
-});
-
-export const {
-  setSelectedQsmType,
-  setOrigin,
-  setDestination,
-  setAirport,
-  setFromDate,
-  setToDate,
-  setTravelers,
-  setMobileFilterType,
-  closeMobileFilter,
-  setActiveSearchField,
-  setActiveSearchFieldProps,
-  setSearchResults,
-  setMobileDatePickerMode,
-  setMinDate,
-  setMaxDate,
-  setDateFlexibility,
-  setSelectedFlexRange,
-  setTripType,
-  setTravelTypes,
-  setSelectedTravelType,
-  setTravelClasses,
-  setSelectedTravelClass,
-  setSelectedNationality,
-  setDefaultTravelers,
-  setMaxTravelers,
-  setMaxChildAge,
-  setAdults,
-  setKids,
-  setBabies,
-  setRooms,
-  addRoom,
-  removeRoom,
-  updateRoomTraveler,
-  setMaxInfantAge,
-  setDatesIcon,
-  setFieldValue,
-  hydrateQsmState
-} = qsmSlice.actions;
-export default qsmSlice.reducer;

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

@@ -1,13 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import qsmReducer from './qsm-slice';
-
-export const createQSMStore = () =>
-  configureStore({
-    reducer: {
-      qsm: qsmReducer
-    }
-  });
-
-export type QSMStore = ReturnType<typeof createQSMStore>;
-export type QSMRootState = ReturnType<QSMStore['getState']>;
-export type QSMDispatch = QSMStore['dispatch'];

package/src/qsm/types.ts

@@ -1,110 +0,0 @@
-import { ReactNode } from 'react';
-// import { TravelClass, TravelType } from '../shared/types';
-import { WebsiteConfigurationSearchConfiguration, PortalQsmType } from '@qite/tide-client';
-import { PickerItem } from '../shared/types';
-
-export interface QSMConfiguration {
-  type?: PortalQsmType;
-
-  searchConfigurations: WebsiteConfigurationSearchConfiguration[];
-
-  askRooms?: boolean; // hotel || roundTrip
-  askTravelType?: boolean; // hotel || roundTrip
-  allowOneWay?: boolean; // flight
-  allowRoundtrip?: boolean; // flight
-  allowOpenJaw?: boolean; // flight
-  allowMultiCity?: boolean; // flight
-  askTravelClass?: boolean; // flight
-  additionalFilters?: AdditionalFilters; // flight
-  askTravelers: boolean;
-  askNationality?: boolean;
-
-  // Origins and destinations
-  departureAirport?: BaseFieldConfig;
-  destinationAirport?: BaseFieldConfig;
-  returnAirport?: BaseFieldConfig;
-
-  destination?: BaseFieldConfig;
-
-  // Travel types
-  travelTypes?: PickerItem[];
-  travelTypeIcon?: ReactNode;
-
-  // Travel classes
-  travelClasses?: PickerItem[];
-  travelClassIcon?: ReactNode;
-
-  // Date flexibility
-  dateFlexibility?: DateFlexibility[];
-  minDate?: Date;
-  maxDate?: Date;
-  showReturnDate?: boolean;
-  datesIcon?: ReactNode;
-
-  // Travelers
-  defaultTravelers?: number;
-  maxTravelers?: number;
-  maxChildAge?: number;
-  maxInfantAge?: number;
-
-  onSubmit: (data: any) => void;
-  submitIcon: ReactNode;
-
-  nationalities: PickerItem[];
-  languageCode?: string;
-}
-
-export interface BaseFieldConfig {
-  fieldKey: string;
-  label: string;
-  placeholder: string;
-  icon: ReactNode;
-  options: TypeaheadOption[];
-  autoComplete?: boolean;
-  onChange?: (data: any) => void;
-}
-
-export interface TypeaheadOption {
-  key: string;
-  value: string;
-  iataCode?: string;
-  country?: string;
-  type: OptionType;
-}
-
-export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
-
-export interface SingleFieldConfig extends BaseFieldConfig {
-  type: 'single';
-}
-
-export interface DoubleFieldConfig {
-  type: 'double';
-  fieldKey: string;
-  showReverse?: boolean;
-  disableReturnField?: boolean;
-  fields: BaseFieldConfig[];
-}
-
-export type FieldConfig = SingleFieldConfig | DoubleFieldConfig;
-
-export interface AdditionalFilters {
-  showDirectFlights: boolean;
-  includeLuggage: boolean;
-}
-
-export interface DateFlexibility {
-  name: string;
-  before: number;
-  after: number;
-}
-
-export type MobileFilterType = 'search' | 'date' | 'traveler' | null;
-
-export type TravelerType = 'adults' | 'kids' | 'babies';
-
-export interface Room {
-  adults: number;
-  kids: number;
-  babies: number;
-}

package/src/search-results/components/book-packaging-entry/index.tsx

@@ -1,266 +0,0 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useDispatch, useSelector } from 'react-redux';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import BookingPanel from '../../../shared/booking/booking-panel';
-import StepIndicators from '../../../shared/booking/step-indicators';
-import WLSidebar from './wl-sidebar';
-import { SearchSeed } from '../../types';
-import SharedTravelersForm, {
-  applyTravelersFormValuesToEditablePackagingEntry,
-  createInitialValuesFromEditablePackagingEntry,
-  SharedTravelersSettings
-} from '../../../shared/booking/travelers-form';
-import { useFormik } from 'formik';
-import { TravelersFormValues } from '../../../booking-wizard/types';
-import { setBookingNumber, setCurrentStep, setEditablePackagingEntry } from '../../store/search-results-slice';
-import validateForm from '../../../booking-wizard/features/travelers-form/validate-form';
-import {
-  bookPackagingEntry,
-  CountryItem,
-  getCountries,
-  PackagingAccommodationResponse,
-  PackagingEntry,
-  PackagingRequestBase,
-  TideClientConfig
-} from '@qite/tide-client';
-import SharedSummary from '../../../shared/booking/summary';
-import { renderEditablePackagingEntrySummaryOptions } from '../../../shared/utils/booking-summary';
-import SharedConfirmation from '../../../shared/booking/shared-confirmation';
-import Spinner from '../spinner/spinner';
-
-interface BookPackagingEntryProps {
-  activeSearchSeed: SearchSeed | null;
-  isLoading: boolean;
-  isConfirmationPage?: boolean;
-}
-
-const travelerFormFields = [{ type: 'gender' }, { type: 'firstName' }, { type: 'lastName' }, { type: 'birthDate' }];
-
-const mainBookerFormFields = [
-  { type: 'street' },
-  { type: 'houseNumber' },
-  { type: 'box' },
-  { type: 'zipCode' },
-  { type: 'place' },
-  { type: 'country' },
-  { type: 'phone' },
-  { type: 'email' }
-];
-
-const travellersSettings: SharedTravelersSettings = {
-  countries: [
-    { iso2: 'BE', name: 'Belgium', phonePrefix: '+32' },
-    { iso2: 'NL', name: 'Netherlands', phonePrefix: '+31' },
-    { iso2: 'FR', name: 'France', phonePrefix: '+33' }
-  ],
-  formFields: travelerFormFields,
-  mainBookerFormFields
-};
-
-const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isLoading, isConfirmationPage }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const dispatch = useDispatch();
-
-  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber, selectedPackagingAccoResultCode, packagingAccoResults } = useSelector(
-    (state: SearchResultsRootState) => state.searchResults
-  );
-
-  const [countries, setCountries] = useState<CountryItem[]>([]);
-  const [userValidated, setUserValidated] = useState(true);
-  const [remarks, setRemarks] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [selectedPackagingAccoResult, setSelectedPackagingAccoResult] = useState<PackagingAccommodationResponse | null>(null);
-
-  const translations = useMemo(() => getTranslations(context?.languageCode ?? 'en-GB'), [context?.languageCode]);
-
-  const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
-
-  const config: TideClientConfig | null = useMemo(() => {
-    if (!context) return null;
-
-    return {
-      host: context.tideConnection.host,
-      apiKey: context.tideConnection.apiKey
-    };
-  }, [context]);
-
-  const initialValues = useMemo(() => {
-    if (!editablePackagingEntry) {
-      return {} as TravelersFormValues;
-    }
-
-    return createInitialValuesFromEditablePackagingEntry(editablePackagingEntry);
-  }, [editablePackagingEntry?.transactionId]);
-
-  const formik = useFormik<TravelersFormValues>({
-    initialValues,
-    enableReinitialize: true,
-    validate: (values) => validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
-    onSubmit: (values) => {
-      if (!editablePackagingEntry) return;
-
-      dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
-
-      dispatch(setCurrentStep(1));
-    }
-  });
-
-  useEffect(() => {
-    if (!context || !config) return;
-
-    const controller = new AbortController();
-
-    (async () => {
-      try {
-        const result = await getCountries(config, controller.signal);
-        setCountries(result.items);
-      } catch {
-        // optionally handle error
-      }
-    })();
-
-    return () => controller.abort();
-  }, [context, config]);
-
-  useEffect(() => {
-    if (isConfirmationPage) {
-      dispatch(setCurrentStep(2));
-    }
-  }, [isConfirmationPage, dispatch]);
-
-  useEffect(() => {
-    const selectedPackagingAccoResult = packagingAccoResults?.find((result) => result.code === selectedPackagingAccoResultCode);
-    if (selectedPackagingAccoResult) {
-      setSelectedPackagingAccoResult(selectedPackagingAccoResult);
-    }
-  }, [selectedPackagingAccoResultCode, packagingAccoResults]);
-
-  if (!context || !editablePackagingEntry || !priceDetails || !config) return <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />;
-
-  const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-
-    setIsSubmitting(true);
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    let updatedEditablePackagingEntry: PackagingEntry = {
-      ...editablePackagingEntry,
-      remarks
-    };
-
-    if (context.generatePaymentUrl && typeof window !== 'undefined') {
-      const redirectUrl = new URL(window.location.href);
-
-      redirectUrl.searchParams.set('bookingConfirmation', 'true');
-      redirectUrl.searchParams.set('link', '');
-
-      updatedEditablePackagingEntry = {
-        ...updatedEditablePackagingEntry,
-        redirectUrl: redirectUrl.toString(),
-        returnPaymentUrl: true
-      };
-    }
-
-    dispatch(setEditablePackagingEntry(updatedEditablePackagingEntry));
-
-    try {
-      const request = {
-        language: context.languageCode ?? 'en-GB',
-        officeId: context.tideConnection.officeId,
-        catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
-        agentId: context.agentId,
-        payload: updatedEditablePackagingEntry
-      } as PackagingRequestBase<PackagingEntry>;
-
-      const bookingResponse = await bookPackagingEntry(config, request);
-
-      dispatch(setBookingNumber(bookingResponse.number));
-
-      if (bookingResponse.paymentUrl) {
-        window.location.href = bookingResponse.paymentUrl;
-      } else {
-        dispatch(setCurrentStep(2));
-        setIsSubmitting(false);
-      }
-    } catch (error) {
-      dispatch(setCurrentStep(3));
-    }
-  };
-
-  return (
-    <div className="booking">
-      <div className="booking__content">
-        <div className="booking__panel">
-          <BookingPanel
-            currentStep={currentStep}
-            stepLabels={stepLabels}
-            StepIndicatorsComponent={StepIndicators}
-            renderTitle={(step) => (
-              <>
-                {step + 1}.&nbsp;{stepLabels[step]}
-              </>
-            )}>
-            {isConfirmationPage && isLoading && <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />}
-            {currentStep === 0 && (
-              <SharedTravelersForm
-                formik={formik}
-                translations={translations}
-                travellersSettings={travellersSettings}
-                countries={countries}
-                travelersFirstStep={false}
-                isUnavailable={false}
-                useCompactForm={false}
-                showAgentSelection={false}
-              />
-            )}
-
-            {currentStep === 1 && (
-              <SharedSummary
-                translations={translations}
-                travelerFormValues={formik.values}
-                isSubmitting={isSubmitting}
-                skipPayment={!context.generatePaymentUrl}
-                userValidated={userValidated}
-                remarks={remarks}
-                enableVoucher={false}
-                allowOption={false}
-                isOffer={false}
-                onUserValidatedChange={setUserValidated}
-                onRemarksChange={setRemarks}
-                onSubmit={handleSummarySubmit}
-                renderOptions={() => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails, translations)}
-                renderPreviousButton={() => (
-                  <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => dispatch(setCurrentStep(0))} className="cta cta--secondary">
-                    {translations.STEPS.PREVIOUS}
-                  </button>
-                )}
-              />
-            )}
-
-            {currentStep === 2 && (
-              <SharedConfirmation
-                bookingNumber={bookingNumber ?? editablePackagingEntry?.dossierNumber ?? ''}
-                isOption={false}
-                isOffer={false}
-                translations={translations.CONFIRMATION}
-              />
-            )}
-
-            {currentStep === 3 && <div>{/* error */}</div>}
-          </BookingPanel>
-        </div>
-
-        <div className="backdrop" id="backdrop"></div>
-
-        <WLSidebar activeSearchSeed={activeSearchSeed} packagingAccoResult={selectedPackagingAccoResult} />
-      </div>
-    </div>
-  );
-};
-
-export default BookPackagingEntry;