@qite/tide-booking-component 1.3.2 → 1.3.3

package/src/booking-wizard/features/booking/booking.tsx

@@ -1,361 +1,361 @@
-import { navigate, Router, useLocation } from "@reach/router";
-import React, { useContext } from "react";
-import { useSelector } from "react-redux";
-import {
-  getDateFromParams,
-  getFlightsFromParams,
-  getNumberFromParams,
-  getNumbersFromParams,
-  getRoomsFromParams,
-  getStringFromParams,
-} from "../../../shared/utils/query-string-util";
-import {
-  fetchPackage,
-  setAccommodationViewId,
-  setAgentAdressId,
-  setBookingAttributes,
-  setBookingNumber,
-  setBookingOptions,
-  setBookingType,
-  setCalculateDeposit,
-  setGeneratePaymentUrl,
-  setIsRetry,
-  setLanguageCode,
-  setOfficeId,
-  setProductAttributes,
-  setSkipPayment,
-  setTagIds,
-  setTranslations,
-} from "./booking-slice";
-
-import { isNil } from "lodash";
-import { useEffect } from "react";
-import StepRoute from "../../components/step-route";
-import SettingsContext from "../../settings-context";
-import { useAppDispatch } from "../../store";
-import Confirmation from "../confirmation/confirmation";
-import Error from "../error/error";
-import FlightOptionsForm from "../flight-options";
-import OptionsForm from "../product-options/options-form";
-import RoomOptionsForm from "../room-options";
-import Sidebar from "../sidebar";
-import Summary from "../summary/summary";
-import TravelersForm from "../travelers-form/travelers-form";
-import {
-  selectBookingAttributes,
-  selectBookingNumber,
-  selectBookingRooms,
-  selectIsRetry,
-  selectIsUnavailable,
-  selectPackageDetails,
-  selectProductAttributes,
-  selectTranslations,
-} from "./selectors";
-
-interface BookingProps {
-  productCode: string;
-  productName: string;
-  thumbnailUrl?: string;
-}
-
-const Booking: React.FC<BookingProps> = ({
-  productCode,
-  productName,
-  thumbnailUrl,
-}) => {
-  const {
-    officeId,
-    bookingOptions,
-    basePath,
-    roomOptions,
-    flightOptions,
-    options,
-    travellers,
-    summary,
-    confirmation,
-    error,
-    showSidebarDeposit,
-    includeFlights,
-    loaderComponent,
-    skipPaymentWithAgent,
-    generatePaymentUrl,
-    tagIds,
-    agentAdressId,
-    language,
-    translationFiles,
-    accommodationViewId,
-    isOffer,
-  } = useContext(SettingsContext);
-
-  const dispatch = useAppDispatch();
-  const location = useLocation();
-
-  const productAttributes = useSelector(selectProductAttributes);
-  const bookingAttributes = useSelector(selectBookingAttributes);
-  const rooms = useSelector(selectBookingRooms);
-  const bookingNumber = useSelector(selectBookingNumber);
-  const isRetry = useSelector(selectIsRetry);
-  const packageDetails = useSelector(selectPackageDetails);
-  const isUnvailable = useSelector(selectIsUnavailable);
-  const translations = useSelector(selectTranslations);
-
-  useEffect(() => {
-    dispatch(setSkipPayment(skipPaymentWithAgent ?? false));
-    dispatch(setGeneratePaymentUrl(generatePaymentUrl ?? false));
-  }, [skipPaymentWithAgent, generatePaymentUrl]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const startDate = getDateFromParams(params, "startDate");
-    const endDate = getDateFromParams(params, "endDate");
-    const catalog = getNumberFromParams(params, "catalog");
-    const rooms = getRoomsFromParams(params, "rooms");
-    const flight = getFlightsFromParams(params, "flight");
-    const flightRouteId = getStringFromParams(params, "flightRouteId");
-    const vendorConfigurationId = getNumberFromParams(
-      params,
-      "vendorConfigurationId"
-    );
-    const allotmentName = getStringFromParams(params, "allotmentName");
-    const allotmentIds = getNumbersFromParams(params, "allotmentId");
-    const tourCode = getStringFromParams(params, "tourCode");
-    const bookingNumber = params.get("bookingNr") ?? undefined;
-
-    if (typeof window !== "undefined") {
-      window.scrollTo(0, 0);
-    }
-
-    if (!isNil(bookingNumber)) {
-      dispatch(setBookingNumber(bookingNumber));
-      navigate(
-        `${basePath}${confirmation.pathSuffix}?bookingNr=${bookingNumber}`
-      );
-    }
-
-    if (
-      !isNil(startDate) &&
-      !isNil(endDate) &&
-      !isNil(catalog) &&
-      !isNil(rooms)
-    ) {
-      dispatch(
-        setBookingAttributes({
-          startDate,
-          endDate,
-          catalog,
-          rooms,
-          flight,
-          includeFlights,
-          allotmentName,
-          allotmentIds,
-          tourCode,
-          flightRouteId,
-          vendorConfigurationId,
-        })
-      );
-    } else {
-      console.error(
-        "Failure when setting booking attributes",
-        startDate,
-        endDate,
-        catalog,
-        rooms
-      );
-    }
-  }, [location.search, setBookingAttributes, setBookingNumber, includeFlights]);
-
-  useEffect(() => {
-    if (
-      !productAttributes ||
-      !bookingAttributes ||
-      !isNil(bookingNumber) ||
-      !isRetry
-    ) {
-      return;
-    }
-
-    // Retried
-    dispatch(setIsRetry(false));
-
-    // Fetch data
-    const promise = dispatch(fetchPackage());
-    return () => {
-      promise.abort();
-    };
-  }, [isRetry]);
-
-  useEffect(() => {
-    if (!isNil(productCode) && !isNil(productName)) {
-      dispatch(
-        setProductAttributes({
-          productCode,
-          productName,
-        })
-      );
-    } else {
-      console.error(
-        "Failure when setting product attributes",
-        productCode,
-        productName
-      );
-    }
-  }, [productCode, productName, setProductAttributes]);
-
-  const getTranslations = async () => {
-    const translations = translationFiles?.map((x) =>
-      fetch(x.path)
-        .then((y) => y.json())
-        .then((z) => ({ language: x.language, value: z }))
-    );
-    return translations && (await Promise.all(translations));
-  };
-
-  useEffect(() => {
-    const loadTranslations = async () => {
-      const translations = await getTranslations();
-      dispatch(setTranslations(translations)); // Now dispatch the resolved value
-    };
-
-    loadTranslations();
-
-    dispatch(setOfficeId(officeId));
-    dispatch(setLanguageCode(language));
-    dispatch(setBookingOptions(bookingOptions));
-    dispatch(setCalculateDeposit(showSidebarDeposit));
-    if (tagIds && tagIds.length > 0) {
-      dispatch(setTagIds(tagIds ?? undefined));
-    }
-    dispatch(setAgentAdressId(agentAdressId ?? undefined));
-    if (agentAdressId && agentAdressId != 0) {
-      dispatch(setBookingType("b2b"));
-    }
-    if (accommodationViewId && accommodationViewId != 0) {
-      dispatch(setAccommodationViewId(accommodationViewId));
-    }
-  }, [
-    officeId,
-    language,
-    bookingOptions,
-    showSidebarDeposit,
-    setOfficeId,
-    setLanguageCode,
-    setCalculateDeposit,
-    tagIds,
-    agentAdressId,
-    accommodationViewId,
-  ]);
-
-  useEffect(() => {
-    if (
-      !productAttributes ||
-      !bookingAttributes ||
-      !rooms?.length ||
-      !isNil(bookingNumber) ||
-      !isNil(packageDetails)
-    ) {
-      return;
-    }
-    // Fetch data
-    const promise = dispatch(fetchPackage());
-    return () => {
-      promise.abort();
-    };
-  }, [
-    productAttributes,
-    bookingAttributes,
-    rooms,
-    bookingNumber,
-    packageDetails,
-  ]);
-
-  let numberIndex = 1;
-
-  return (
-    <>
-      {((productAttributes && bookingAttributes && packageDetails) ||
-        bookingNumber) && (
-        <div className="booking">
-          <div className="booking__content">
-            <div className="booking__panel">
-              <Router basepath={basePath}>
-                {!flightOptions.isHidden && flightOptions.pathSuffix && (
-                  <StepRoute
-                    path={flightOptions.pathSuffix}
-                    number={numberIndex++}
-                    title={translations.STEPS.FLIGHT_OPTIONS}
-                    component={<FlightOptionsForm />}
-                  />
-                )}
-                {!roomOptions.isHidden && roomOptions.pathSuffix && (
-                  <StepRoute
-                    path={roomOptions.pathSuffix}
-                    number={numberIndex++}
-                    title={translations.STEPS.ROOM_OPTIONS}
-                    component={<RoomOptionsForm />}
-                  />
-                )}
-                <StepRoute
-                  path={options.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.EXTRA_OPTIONS}
-                  component={<OptionsForm />}
-                />
-                <StepRoute
-                  path={travellers.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.PERSONAL_DETAILS}
-                  component={<TravelersForm />}
-                />
-                <StepRoute
-                  path={summary.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.SUMMARY}
-                  component={<Summary />}
-                />
-                <StepRoute
-                  path={confirmation.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.CONFIRMATION}
-                  component={<Confirmation />}
-                />
-                <StepRoute
-                  path={error.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.ERROR}
-                  component={<Error />}
-                />
-              </Router>
-            </div>
-            <div className="backdrop" id="backdrop"></div>
-            {packageDetails && (
-              <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
-            )}
-          </div>
-        </div>
-      )}
-      {!packageDetails && !bookingNumber && !isUnvailable && (
-        <div className="booking">
-          <div className="booking__loader">
-            {loaderComponent}
-            <p className="booking__loader-text">
-              {isOffer
-                ? translations.MAIN.PREPARING_OFFER
-                : translations.MAIN.PREPARING_BOOKING}
-            </p>
-          </div>
-        </div>
-      )}
-      {isUnvailable && (
-        <div className="booking">
-          <div className="booking__loader">
-            <p className="booking__loader-text">
-              {translations.MAIN.PRODUCT_UNAVAILABLE}
-            </p>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Booking;
+import { navigate, Router, useLocation } from "@reach/router";
+import React, { useContext } from "react";
+import { useSelector } from "react-redux";
+import {
+  getDateFromParams,
+  getFlightsFromParams,
+  getNumberFromParams,
+  getNumbersFromParams,
+  getRoomsFromParams,
+  getStringFromParams,
+} from "../../../shared/utils/query-string-util";
+import {
+  fetchPackage,
+  setAccommodationViewId,
+  setAgentAdressId,
+  setBookingAttributes,
+  setBookingNumber,
+  setBookingOptions,
+  setBookingType,
+  setCalculateDeposit,
+  setGeneratePaymentUrl,
+  setIsRetry,
+  setLanguageCode,
+  setOfficeId,
+  setProductAttributes,
+  setSkipPayment,
+  setTagIds,
+  setTranslations,
+} from "./booking-slice";
+
+import { isNil } from "lodash";
+import { useEffect } from "react";
+import StepRoute from "../../components/step-route";
+import SettingsContext from "../../settings-context";
+import { useAppDispatch } from "../../store";
+import Confirmation from "../confirmation/confirmation";
+import Error from "../error/error";
+import FlightOptionsForm from "../flight-options";
+import OptionsForm from "../product-options/options-form";
+import RoomOptionsForm from "../room-options";
+import Sidebar from "../sidebar";
+import Summary from "../summary/summary";
+import TravelersForm from "../travelers-form/travelers-form";
+import {
+  selectBookingAttributes,
+  selectBookingNumber,
+  selectBookingRooms,
+  selectIsRetry,
+  selectIsUnavailable,
+  selectPackageDetails,
+  selectProductAttributes,
+  selectTranslations,
+} from "./selectors";
+
+interface BookingProps {
+  productCode: string;
+  productName: string;
+  thumbnailUrl?: string;
+}
+
+const Booking: React.FC<BookingProps> = ({
+  productCode,
+  productName,
+  thumbnailUrl,
+}) => {
+  const {
+    officeId,
+    bookingOptions,
+    basePath,
+    roomOptions,
+    flightOptions,
+    options,
+    travellers,
+    summary,
+    confirmation,
+    error,
+    showSidebarDeposit,
+    includeFlights,
+    loaderComponent,
+    skipPaymentWithAgent,
+    generatePaymentUrl,
+    tagIds,
+    agentAdressId,
+    language,
+    translationFiles,
+    accommodationViewId,
+    isOffer,
+  } = useContext(SettingsContext);
+
+  const dispatch = useAppDispatch();
+  const location = useLocation();
+
+  const productAttributes = useSelector(selectProductAttributes);
+  const bookingAttributes = useSelector(selectBookingAttributes);
+  const rooms = useSelector(selectBookingRooms);
+  const bookingNumber = useSelector(selectBookingNumber);
+  const isRetry = useSelector(selectIsRetry);
+  const packageDetails = useSelector(selectPackageDetails);
+  const isUnvailable = useSelector(selectIsUnavailable);
+  const translations = useSelector(selectTranslations);
+
+  useEffect(() => {
+    dispatch(setSkipPayment(skipPaymentWithAgent ?? false));
+    dispatch(setGeneratePaymentUrl(generatePaymentUrl ?? false));
+  }, [skipPaymentWithAgent, generatePaymentUrl]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const startDate = getDateFromParams(params, "startDate");
+    const endDate = getDateFromParams(params, "endDate");
+    const catalog = getNumberFromParams(params, "catalog");
+    const rooms = getRoomsFromParams(params, "rooms");
+    const flight = getFlightsFromParams(params, "flight");
+    const flightRouteId = getStringFromParams(params, "flightRouteId");
+    const vendorConfigurationId = getNumberFromParams(
+      params,
+      "vendorConfigurationId"
+    );
+    const allotmentName = getStringFromParams(params, "allotmentName");
+    const allotmentIds = getNumbersFromParams(params, "allotmentId");
+    const tourCode = getStringFromParams(params, "tourCode");
+    const bookingNumber = params.get("bookingNr") ?? undefined;
+
+    if (typeof window !== "undefined") {
+      window.scrollTo(0, 0);
+    }
+
+    if (!isNil(bookingNumber)) {
+      dispatch(setBookingNumber(bookingNumber));
+      navigate(
+        `${basePath}${confirmation.pathSuffix}?bookingNr=${bookingNumber}`
+      );
+    }
+
+    if (
+      !isNil(startDate) &&
+      !isNil(endDate) &&
+      !isNil(catalog) &&
+      !isNil(rooms)
+    ) {
+      dispatch(
+        setBookingAttributes({
+          startDate,
+          endDate,
+          catalog,
+          rooms,
+          flight,
+          includeFlights,
+          allotmentName,
+          allotmentIds,
+          tourCode,
+          flightRouteId,
+          vendorConfigurationId,
+        })
+      );
+    } else {
+      console.error(
+        "Failure when setting booking attributes",
+        startDate,
+        endDate,
+        catalog,
+        rooms
+      );
+    }
+  }, [location.search, setBookingAttributes, setBookingNumber, includeFlights]);
+
+  useEffect(() => {
+    if (
+      !productAttributes ||
+      !bookingAttributes ||
+      !isNil(bookingNumber) ||
+      !isRetry
+    ) {
+      return;
+    }
+
+    // Retried
+    dispatch(setIsRetry(false));
+
+    // Fetch data
+    const promise = dispatch(fetchPackage());
+    return () => {
+      promise.abort();
+    };
+  }, [isRetry]);
+
+  useEffect(() => {
+    if (!isNil(productCode) && !isNil(productName)) {
+      dispatch(
+        setProductAttributes({
+          productCode,
+          productName,
+        })
+      );
+    } else {
+      console.error(
+        "Failure when setting product attributes",
+        productCode,
+        productName
+      );
+    }
+  }, [productCode, productName, setProductAttributes]);
+
+  const getTranslations = async () => {
+    const translations = translationFiles?.map((x) =>
+      fetch(x.path)
+        .then((y) => y.json())
+        .then((z) => ({ language: x.language, value: z }))
+    );
+    return translations && (await Promise.all(translations));
+  };
+
+  useEffect(() => {
+    const loadTranslations = async () => {
+      const translations = await getTranslations();
+      dispatch(setTranslations(translations)); // Now dispatch the resolved value
+    };
+
+    loadTranslations();
+
+    dispatch(setOfficeId(officeId));
+    dispatch(setLanguageCode(language));
+    dispatch(setBookingOptions(bookingOptions));
+    dispatch(setCalculateDeposit(showSidebarDeposit));
+    if (tagIds && tagIds.length > 0) {
+      dispatch(setTagIds(tagIds ?? undefined));
+    }
+    dispatch(setAgentAdressId(agentAdressId ?? undefined));
+    if (agentAdressId && agentAdressId != 0) {
+      dispatch(setBookingType("b2b"));
+    }
+    if (accommodationViewId && accommodationViewId != 0) {
+      dispatch(setAccommodationViewId(accommodationViewId));
+    }
+  }, [
+    officeId,
+    language,
+    bookingOptions,
+    showSidebarDeposit,
+    setOfficeId,
+    setLanguageCode,
+    setCalculateDeposit,
+    tagIds,
+    agentAdressId,
+    accommodationViewId,
+  ]);
+
+  useEffect(() => {
+    if (
+      !productAttributes ||
+      !bookingAttributes ||
+      !rooms?.length ||
+      !isNil(bookingNumber) ||
+      !isNil(packageDetails)
+    ) {
+      return;
+    }
+    // Fetch data
+    const promise = dispatch(fetchPackage());
+    return () => {
+      promise.abort();
+    };
+  }, [
+    productAttributes,
+    bookingAttributes,
+    rooms,
+    bookingNumber,
+    packageDetails,
+  ]);
+
+  let numberIndex = 1;
+
+  return (
+    <>
+      {((productAttributes && bookingAttributes && packageDetails) ||
+        bookingNumber) && (
+        <div className="booking">
+          <div className="booking__content">
+            <div className="booking__panel">
+              <Router basepath={basePath}>
+                {!flightOptions.isHidden && flightOptions.pathSuffix && (
+                  <StepRoute
+                    path={flightOptions.pathSuffix}
+                    number={numberIndex++}
+                    title={translations.STEPS.FLIGHT_OPTIONS}
+                    component={<FlightOptionsForm />}
+                  />
+                )}
+                {!roomOptions.isHidden && roomOptions.pathSuffix && (
+                  <StepRoute
+                    path={roomOptions.pathSuffix}
+                    number={numberIndex++}
+                    title={translations.STEPS.ROOM_OPTIONS}
+                    component={<RoomOptionsForm />}
+                  />
+                )}
+                <StepRoute
+                  path={options.pathSuffix}
+                  number={numberIndex++}
+                  title={translations.STEPS.EXTRA_OPTIONS}
+                  component={<OptionsForm />}
+                />
+                <StepRoute
+                  path={travellers.pathSuffix}
+                  number={numberIndex++}
+                  title={translations.STEPS.PERSONAL_DETAILS}
+                  component={<TravelersForm />}
+                />
+                <StepRoute
+                  path={summary.pathSuffix}
+                  number={numberIndex++}
+                  title={translations.STEPS.SUMMARY}
+                  component={<Summary />}
+                />
+                <StepRoute
+                  path={confirmation.pathSuffix}
+                  number={numberIndex++}
+                  title={translations.STEPS.CONFIRMATION}
+                  component={<Confirmation />}
+                />
+                <StepRoute
+                  path={error.pathSuffix}
+                  number={numberIndex++}
+                  title={translations.STEPS.ERROR}
+                  component={<Error />}
+                />
+              </Router>
+            </div>
+            <div className="backdrop" id="backdrop"></div>
+            {packageDetails && (
+              <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
+            )}
+          </div>
+        </div>
+      )}
+      {!packageDetails && !bookingNumber && !isUnvailable && (
+        <div className="booking">
+          <div className="booking__loader">
+            {loaderComponent}
+            <p className="booking__loader-text">
+              {isOffer
+                ? translations.MAIN.PREPARING_OFFER
+                : translations.MAIN.PREPARING_BOOKING}
+            </p>
+          </div>
+        </div>
+      )}
+      {isUnvailable && (
+        <div className="booking">
+          <div className="booking__loader">
+            <p className="booking__loader-text">
+              {translations.MAIN.PRODUCT_UNAVAILABLE}
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Booking;