@qite/tide-booking-component 1.2.4 → 1.2.5

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

@@ -1,177 +1,196 @@
-import React, { useContext, useEffect, useState } from "react";
-
-import { BookingPackageFlight } from "@qite/tide-client/build/types";
-import { navigate } from "@reach/router";
-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 { ROOM_OPTIONS_FORM_STEP } from "../booking/constants";
-import {
-  selectBookingQueryString,
-  selectIsFetchingProductOptions,
-  selectPackageDetails,
-  selectPackageFlights,
-  selectTranslations
-} 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";
-
-interface FlightOptionsFormProps { }
-
-const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
-  const settings = useContext(SettingsContext);
-
-  const translations = useSelector(selectTranslations);
-  const dispatch = useAppDispatch();
-  const packageDetails = useSelector(selectPackageDetails);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const isLoading = useSelector(selectIsFetchingProductOptions);
-  const flights = useSelector(selectPackageFlights);
-
-  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
-  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    if (settings.skipRouter) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-    } else {
-      if (settings.roomOptions.isHidden) {
-        navigate(`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`);
-      } else {
-        navigate(`${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;
-
-  return (
-    <>
-      <FlightOptionModal />
-      <form
-        className="form"
-        name="booking--flights"
-        id="booking--flights"
-        noValidate
-        onSubmit={handleSubmit}
-      >
-        {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 className="booking__navigator">
-          <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 { navigate } from "@reach/router";
+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 { ROOM_OPTIONS_FORM_STEP } from "../booking/constants";
+import {
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageDetails,
+  selectPackageFlights,
+  selectTranslations,
+} 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";
+
+interface FlightOptionsFormProps {}
+
+const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
+  const settings = useContext(SettingsContext);
+
+  const translations = useSelector(selectTranslations);
+  const dispatch = useAppDispatch();
+  const packageDetails = useSelector(selectPackageDetails);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const isLoading = useSelector(selectIsFetchingProductOptions);
+  const flights = useSelector(selectPackageFlights);
+
+  const [filterOptions, setFilterOptions] = useState<
+    FlightFilterOptions | undefined
+  >();
+  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    if (settings.skipRouter) {
+      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+    } else {
+      if (settings.roomOptions.isHidden) {
+        navigate(
+          `${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`
+        );
+      } else {
+        navigate(
+          `${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;
+
+  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">
+          <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,24 +1,24 @@
-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;