@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/booking-wizard/features/flight-options/index.tsx

@@ -1,170 +1,170 @@
-import React, { useContext, useEffect, useState } from 'react';
-
-import { BookingPackageFlight } from '@qite/tide-client/build/types';
-import { isEmpty } from 'lodash';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import SettingsContext from '../../settings-context';
-import { useAppDispatch } from '../../store';
-import { FlightFilterOptions, GroupedFlights } from '../../types';
-import { setCurrentStep, setFlights, setPackage } from '../booking/booking-slice';
-import { OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
-import {
-  selectBookingQueryString,
-  selectIsFetchingProductOptions,
-  selectPackageDetails,
-  selectPackageFlights,
-  selectTranslations,
-  selectTravelersFirstStep
-} from '../booking/selectors';
-import { fetchPriceDetails } from '../price-details/price-details-slice';
-import FlightFilter from './flight-filter';
-import FlightOption from './flight-option';
-import FlightOptionModal from './flight-option-modal';
-import { buildFilterOptions, buildGroupedFlights, filterGroupedFlights } from './flight-utils';
-import { Link, useNavigate } from 'react-router-dom';
-
-interface FlightOptionsFormProps {}
-
-const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-
-  const translations = useSelector(selectTranslations);
-  const dispatch = useAppDispatch();
-  const packageDetails = useSelector(selectPackageDetails);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const isLoading = useSelector(selectIsFetchingProductOptions);
-  const flights = useSelector(selectPackageFlights);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-
-  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
-  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    if (settings.skipRouter) {
-      if (settings.roomOptions.isHidden) {
-        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-      } else {
-        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-      }
-    } else {
-      if (settings.roomOptions.isHidden) {
-        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
-      } else {
-        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.roomOptions.pathSuffix}?${bookingQueryString}`);
-      }
-    }
-
-    e.preventDefault();
-  };
-
-  const currentFlightPrice = (flights.outward?.find((x) => x.isSelected)?.price || 0) + (flights.return?.find((x) => x.isSelected)?.price || 0);
-
-  useEffect(() => {
-    if (packageDetails && settings.roomOptions.isHidden) {
-      const params = new URLSearchParams(location.search);
-
-      const outwardFlight = params.get('outwardflight') ?? undefined;
-      const returnFlight = params.get('returnflight') ?? undefined;
-      if (outwardFlight && returnFlight) {
-        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
-        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
-        if (desiredOutwardFlight && desiredReturnFlight) {
-          dispatch(
-            setPackage({
-              ...packageDetails,
-              outwardFlights: packageDetails.outwardFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              }),
-              returnFlights: packageDetails.returnFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              })
-            })
-          );
-        }
-      }
-    }
-    dispatch(fetchPriceDetails());
-
-    const filters = buildFilterOptions(flights.outward, flights.return, translations);
-    setFilterOptions(filters);
-  }, []);
-
-  useEffect(() => {
-    const groups = buildGroupedFlights(flights.outward, flights.return);
-    setFlightGroups(groups);
-  }, [flights]);
-
-  const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
-  const resultCount = filteredGroups.length;
-
-  const goPrevious = () => {
-    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
-  };
-
-  return (
-    <>
-      <FlightOptionModal />
-      <form className="form" name="booking--flights" id="booking--flights" noValidate onSubmit={handleSubmit}>
-        <div className="form__booking--flight">
-          {isLoading && settings.loaderComponent}
-          {!isLoading && (
-            <div className="form__group">
-              <div className="booking-card">
-                <div className="booking-card__body">
-                  {filterOptions && <FlightFilter filterOptions={filterOptions} resultCount={resultCount} applyFilter={setFilterOptions} />}
-
-                  <div className="booking-card__group">
-                    <div className="flight outward__flights">
-                      {isEmpty(filteredGroups) && <p>{translations.FLIGHTS_FORM.NO_FLIGHTS_FOUND}</p>}
-
-                      {!isEmpty(filteredGroups) &&
-                        filteredGroups.map((flight, index) => (
-                          <FlightOption
-                            key={index}
-                            item={flight}
-                            isSelected={flight.isSelected}
-                            currentPrice={currentFlightPrice}
-                            onChange={(item) => {
-                              dispatch(setFlights(item));
-                              dispatch(fetchPriceDetails());
-                            }}
-                          />
-                        ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="booking__navigator">
-          {travelersFirstStep && settings.skipRouter ? (
-            <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
-              {translations.STEPS.PREVIOUS}
-            </button>
-          ) : travelersFirstStep ? (
-            <Link
-              to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`}
-              title={translations.STEPS.PREVIOUS}
-              className="cta cta--secondary">
-              {translations.STEPS.PREVIOUS}
-            </Link>
-          ) : null}
-          <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
-            {translations.STEPS.NEXT}
-          </button>
-        </div>
-      </form>
-    </>
-  );
-};
-
-export default FlightOptionsForm;
+import React, { useContext, useEffect, useState } from 'react';
+
+import { BookingPackageFlight } from '@qite/tide-client/build/types';
+import { isEmpty } from 'lodash';
+import { useSelector } from 'react-redux';
+import { buildClassName } from '../../../shared/utils/class-util';
+import SettingsContext from '../../settings-context';
+import { useAppDispatch } from '../../store';
+import { FlightFilterOptions, GroupedFlights } from '../../types';
+import { setCurrentStep, setFlights, setPackage } from '../booking/booking-slice';
+import { OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
+import {
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageDetails,
+  selectPackageFlights,
+  selectTranslations,
+  selectTravelersFirstStep
+} from '../booking/selectors';
+import { fetchPriceDetails } from '../price-details/price-details-slice';
+import FlightFilter from './flight-filter';
+import FlightOption from './flight-option';
+import FlightOptionModal from './flight-option-modal';
+import { buildFilterOptions, buildGroupedFlights, filterGroupedFlights } from './flight-utils';
+import { Link, useNavigate } from 'react-router-dom';
+
+interface FlightOptionsFormProps {}
+
+const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
+  const translations = useSelector(selectTranslations);
+  const dispatch = useAppDispatch();
+  const packageDetails = useSelector(selectPackageDetails);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const isLoading = useSelector(selectIsFetchingProductOptions);
+  const flights = useSelector(selectPackageFlights);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+
+  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
+  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    if (settings.skipRouter) {
+      if (settings.roomOptions.isHidden) {
+        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      } else {
+        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      }
+    } else {
+      if (settings.roomOptions.isHidden) {
+        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
+      } else {
+        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.roomOptions.pathSuffix}?${bookingQueryString}`);
+      }
+    }
+
+    e.preventDefault();
+  };
+
+  const currentFlightPrice = (flights.outward?.find((x) => x.isSelected)?.price || 0) + (flights.return?.find((x) => x.isSelected)?.price || 0);
+
+  useEffect(() => {
+    if (packageDetails && settings.roomOptions.isHidden) {
+      const params = new URLSearchParams(location.search);
+
+      const outwardFlight = params.get('outwardflight') ?? undefined;
+      const returnFlight = params.get('returnflight') ?? undefined;
+      if (outwardFlight && returnFlight) {
+        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
+        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
+        if (desiredOutwardFlight && desiredReturnFlight) {
+          dispatch(
+            setPackage({
+              ...packageDetails,
+              outwardFlights: packageDetails.outwardFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              }),
+              returnFlights: packageDetails.returnFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              })
+            })
+          );
+        }
+      }
+    }
+    dispatch(fetchPriceDetails());
+
+    const filters = buildFilterOptions(flights.outward, flights.return, translations);
+    setFilterOptions(filters);
+  }, []);
+
+  useEffect(() => {
+    const groups = buildGroupedFlights(flights.outward, flights.return);
+    setFlightGroups(groups);
+  }, [flights]);
+
+  const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
+  const resultCount = filteredGroups.length;
+
+  const goPrevious = () => {
+    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+  };
+
+  return (
+    <>
+      <FlightOptionModal />
+      <form className="form" name="booking--flights" id="booking--flights" noValidate onSubmit={handleSubmit}>
+        <div className="form__booking--flight">
+          {isLoading && settings.loaderComponent}
+          {!isLoading && (
+            <div className="form__group">
+              <div className="booking-card">
+                <div className="booking-card__body">
+                  {filterOptions && <FlightFilter filterOptions={filterOptions} resultCount={resultCount} applyFilter={setFilterOptions} />}
+
+                  <div className="booking-card__group">
+                    <div className="flight outward__flights">
+                      {isEmpty(filteredGroups) && <p>{translations.FLIGHTS_FORM.NO_FLIGHTS_FOUND}</p>}
+
+                      {!isEmpty(filteredGroups) &&
+                        filteredGroups.map((flight, index) => (
+                          <FlightOption
+                            key={index}
+                            item={flight}
+                            isSelected={flight.isSelected}
+                            currentPrice={currentFlightPrice}
+                            onChange={(item) => {
+                              dispatch(setFlights(item));
+                              dispatch(fetchPriceDetails());
+                            }}
+                          />
+                        ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="booking__navigator">
+          {travelersFirstStep && settings.skipRouter ? (
+            <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </button>
+          ) : travelersFirstStep ? (
+            <Link
+              to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`}
+              title={translations.STEPS.PREVIOUS}
+              className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </Link>
+          ) : null}
+          <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
+            {translations.STEPS.NEXT}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default FlightOptionsForm;

package/src/booking-wizard/features/price-details/price-details-api.ts

@@ -1,20 +1,20 @@
-import { priceDetails } from '@qite/tide-client';
-import { BookingPackageBookRequest, BookingPackageRequest, BookingPriceDetails } from '@qite/tide-client/build/types';
-import { ApiSettingsState } from '../../../shared/types';
-import { buildTideClientConfig } from '../../../shared/utils/tide-api-utils';
-
-const fetchPriceDetails = async (
-  apiSettings: ApiSettingsState,
-  request: BookingPackageRequest<BookingPackageBookRequest>,
-  signal: AbortSignal,
-  languageCode?: string
-): Promise<BookingPriceDetails> => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await priceDetails(tideClientConfig, request, signal, languageCode);
-};
-
-const priceDetailsApi = {
-  fetchPriceDetails
-};
-
-export default priceDetailsApi;
+import { priceDetails } from '@qite/tide-client';
+import { BookingPackageBookRequest, BookingPackageRequest, BookingPriceDetails } from '@qite/tide-client/build/types';
+import { ApiSettingsState } from '../../../shared/types';
+import { buildTideClientConfig } from '../../../shared/utils/tide-api-utils';
+
+const fetchPriceDetails = async (
+  apiSettings: ApiSettingsState,
+  request: BookingPackageRequest<BookingPackageBookRequest>,
+  signal: AbortSignal,
+  languageCode?: string
+): Promise<BookingPriceDetails> => {
+  const tideClientConfig = buildTideClientConfig(apiSettings);
+  return await priceDetails(tideClientConfig, request, signal, languageCode);
+};
+
+const priceDetailsApi = {
+  fetchPriceDetails
+};
+
+export default priceDetailsApi;

package/src/booking-wizard/features/price-details/price-details-slice.ts

@@ -1,79 +1,79 @@
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { RootState } from '../../store';
-import { BookingPriceDetail, BookingPriceDetails, BookingProductNotification } from '@qite/tide-client/build/types';
-import { setPackage } from '../booking/booking-slice';
-import { selectBookingPackageBookRequest, selectLanguageCode, selectPackageDetails } from '../booking/selectors';
-import priceDetailsApi from './price-details-api';
-import { updatePackageDetails } from './util';
-
-export interface PriceDetailsState {
-  priceDetails: BookingPriceDetail[];
-  notifications: BookingProductNotification[];
-  deposit?: number;
-  commission?: number;
-  isBusy: boolean;
-}
-
-export const fetchPriceDetails = createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
-  dispatch(setFetchingPriceDetails(true));
-  dispatch(resetPriceDetails());
-
-  const state = getState() as RootState;
-  const languageCode = selectLanguageCode(state);
-
-  const request = selectBookingPackageBookRequest(state);
-
-  if (!request) {
-    throw Error('Product not available.');
-  }
-
-  const priceDetails: BookingPriceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
-
-  dispatch(setFetchingPriceDetails(false));
-
-  const packageDetails = selectPackageDetails(state);
-  if (packageDetails) {
-    const updatedPackageDetails = updatePackageDetails(packageDetails, priceDetails.changedLines);
-    dispatch(setPackage(updatedPackageDetails));
-  }
-
-  return priceDetails;
-});
-
-const priceDetailsSlice = createSlice({
-  name: 'priceDetails',
-  initialState: <PriceDetailsState>{
-    priceDetails: [],
-    notifications: [],
-    isBusy: false
-  },
-  reducers: {
-    setFetchingPriceDetails(state, action: PayloadAction<boolean>) {
-      state.isBusy = action.payload;
-    },
-    setNotifications(state, action: PayloadAction<BookingProductNotification[]>) {
-      state.notifications = action.payload;
-    },
-    resetPriceDetails(state, _: PayloadAction<void>) {
-      state.priceDetails = [];
-    }
-  },
-  extraReducers: (builder) => {
-    builder.addCase(fetchPriceDetails.fulfilled, (state, action) => {
-      if (action.payload) {
-        state.deposit = action.payload.deposit;
-        state.commission = action.payload.commission;
-        state.priceDetails = action.payload.details;
-        state.notifications = action.payload.notifications;
-      }
-    });
-  }
-});
-
-const { setFetchingPriceDetails } = priceDetailsSlice.actions;
-
-export const { resetPriceDetails, setNotifications } = priceDetailsSlice.actions;
-
-export const selectNotifications = (state: RootState) => state.priceDetails.notifications;
-
-export default priceDetailsSlice.reducer;
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '../../store';
+import { BookingPriceDetail, BookingPriceDetails, BookingProductNotification } from '@qite/tide-client/build/types';
+import { setPackage } from '../booking/booking-slice';
+import { selectBookingPackageBookRequest, selectLanguageCode, selectPackageDetails } from '../booking/selectors';
+import priceDetailsApi from './price-details-api';
+import { updatePackageDetails } from './util';
+
+export interface PriceDetailsState {
+  priceDetails: BookingPriceDetail[];
+  notifications: BookingProductNotification[];
+  deposit?: number;
+  commission?: number;
+  isBusy: boolean;
+}
+
+export const fetchPriceDetails = createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
+  dispatch(setFetchingPriceDetails(true));
+  dispatch(resetPriceDetails());
+
+  const state = getState() as RootState;
+  const languageCode = selectLanguageCode(state);
+
+  const request = selectBookingPackageBookRequest(state);
+
+  if (!request) {
+    throw Error('Product not available.');
+  }
+
+  const priceDetails: BookingPriceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
+
+  dispatch(setFetchingPriceDetails(false));
+
+  const packageDetails = selectPackageDetails(state);
+  if (packageDetails) {
+    const updatedPackageDetails = updatePackageDetails(packageDetails, priceDetails.changedLines);
+    dispatch(setPackage(updatedPackageDetails));
+  }
+
+  return priceDetails;
+});
+
+const priceDetailsSlice = createSlice({
+  name: 'priceDetails',
+  initialState: <PriceDetailsState>{
+    priceDetails: [],
+    notifications: [],
+    isBusy: false
+  },
+  reducers: {
+    setFetchingPriceDetails(state, action: PayloadAction<boolean>) {
+      state.isBusy = action.payload;
+    },
+    setNotifications(state, action: PayloadAction<BookingProductNotification[]>) {
+      state.notifications = action.payload;
+    },
+    resetPriceDetails(state, _: PayloadAction<void>) {
+      state.priceDetails = [];
+    }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPriceDetails.fulfilled, (state, action) => {
+      if (action.payload) {
+        state.deposit = action.payload.deposit;
+        state.commission = action.payload.commission;
+        state.priceDetails = action.payload.details;
+        state.notifications = action.payload.notifications;
+      }
+    });
+  }
+});
+
+const { setFetchingPriceDetails } = priceDetailsSlice.actions;
+
+export const { resetPriceDetails, setNotifications } = priceDetailsSlice.actions;
+
+export const selectNotifications = (state: RootState) => state.priceDetails.notifications;
+
+export default priceDetailsSlice.reducer;