@qite/tide-booking-component 0.0.2-preview.9 → 1.0.0-preview

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

@@ -3,20 +3,30 @@ import { navigate, Router, useLocation } from "@reach/router";
 import {
   getDateFromParams,
   getNumberFromParams,
+  getNumbersFromParams,
+  getRoomsFromParams,
+  getStringFromParams,
 } from "../../utils/query-string-util";
 import {
-  selectBookingAttributes,
-  selectProductAttributes,
+  fetchPackage,
+  setAgentAdressId,
+  setBookingOptions,
   setBookingAttributes,
+  setBookingNumber,
+  setCalculateDeposit,
+  setGeneratePaymentUrl,
+  setIsRetry,
   setOfficeId,
   setProductAttributes,
+  setSkipPayment,
+  setTagIds,
+  setBookingType,
 } from "./booking-slice";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import Confirmation from "../confirmation/confirmation";
 import Error from "../error/error";
 import OptionsForm from "../product-options/options-form";
-import ProductCard from "../../components/product-card";
 import SettingsContext from "../../settings-context";
 import Sidebar from "../sidebar";
 import StepRoute from "../../components/step-route";
@@ -24,119 +34,224 @@ import Summary from "../summary/summary";
 import TravelersForm from "../travelers-form/travelers-form";
 import translations from "../../translations/translations.json";
 import { useEffect } from "react";
-import { fetchProductOptions } from "../product-options/product-options-slice";
+import { isNil } from "lodash";
+import { useAppDispatch } from "../../store";
+import {
+  selectBookingAttributes,
+  selectBookingNumber,
+  selectBookingRooms,
+  selectIsRetry,
+  selectIsUnavailable,
+  selectPackageDetails,
+  selectProductAttributes,
+} from "./selectors";
 
 interface BookingProps {
-  productId: number;
+  productCode: string;
   productName: string;
-  productDescription?: string;
   thumbnailUrl?: string;
 }
 
 const Booking: React.FC<BookingProps> = ({
-  productId,
+  productCode,
   productName,
-  productDescription,
   thumbnailUrl,
 }) => {
   const {
     officeId,
-    productPath,
+    bookingOptions,
     basePath,
-    optionsPathSuffix,
-    summaryPathSuffix,
-    confirmationPathSuffix,
-    errorPathSuffix,
+    options,
+    summary,
+    confirmation,
+    error,
+    showSidebarDeposit,
+    includeFlights,
+    loaderComponent,
+    skipPaymentWithAgent,
+    generatePaymentUrl,
+    tagIds,
+    agentAdressId,
   } = useContext(SettingsContext);
 
-  const dispatch = useDispatch();
-
+  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);
 
   useEffect(() => {
-    dispatch(fetchProductOptions());
-  }, [productAttributes, bookingAttributes]);
-
-  useEffect(() => {
-    if (productId) {
-      dispatch(
-        setProductAttributes({
-          productId,
-        })
-      );
-    } else {
-      navigate(productPath);
-    }
-  }, [productId, setProductAttributes]);
-
-  useEffect(() => {
-    dispatch(setOfficeId(officeId));
-  }, [officeId, setOfficeId]);
+    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 accommodation = params.get("accommodation");
-    const regime = params.get("regime");
     const catalog = getNumberFromParams(params, "catalog");
+    const rooms = getRoomsFromParams(params, "rooms");
+    const allotmentName = getStringFromParams(params, "allotmentName");
+    const allotmentIds = getNumbersFromParams(params, "allotementId");
+    const tourCode = getStringFromParams(params, "tourCode");
+    const bookingNumber = params.get("bookingNr") ?? undefined;
+
+    if (!isNil(bookingNumber)) {
+      dispatch(setBookingNumber(bookingNumber));
+      navigate(
+        `${basePath}${confirmation.pathSuffix}?bookingNr=${bookingNumber}`
+      );
+    }
 
-    if (startDate && endDate && accommodation && regime && catalog) {
+    if (
+      !isNil(startDate) &&
+      !isNil(endDate) &&
+      !isNil(catalog) &&
+      !isNil(rooms)
+    ) {
       dispatch(
         setBookingAttributes({
           startDate,
           endDate,
-          accommodation,
-          regime,
           catalog,
+          rooms,
+          includeFlights,
+          allotmentName,
+          allotmentIds,
+          tourCode,
         })
       );
     } else {
-      navigate(productPath);
+      console.error(
+        "Failure when setting booking attributes",
+        startDate,
+        endDate,
+        catalog,
+        rooms
+      );
+    }
+  }, [location.search, setBookingAttributes, setBookingNumber, includeFlights]);
+
+  useEffect(() => {
+    if (
+      !productAttributes ||
+      !bookingAttributes ||
+      !isNil(bookingNumber) ||
+      !isRetry
+    ) {
+      return;
     }
-  }, [setBookingAttributes]);
+
+    // 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]);
+
+  useEffect(() => {
+    dispatch(setOfficeId(officeId));
+    dispatch(setBookingOptions(bookingOptions));
+    dispatch(setCalculateDeposit(showSidebarDeposit));
+    dispatch(setTagIds(tagIds ?? undefined));
+    dispatch(setAgentAdressId(agentAdressId ?? undefined));
+    if (agentAdressId && agentAdressId != 0) {
+      dispatch(setBookingType("b2b"));
+    }
+  }, [
+    officeId,
+    bookingOptions,
+    showSidebarDeposit,
+    setOfficeId,
+    setCalculateDeposit,
+    tagIds,
+    agentAdressId,
+  ]);
+
+  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,
+  ]);
 
   return (
     <>
-      {productAttributes && bookingAttributes && (
+      {((productAttributes && bookingAttributes && packageDetails) ||
+        bookingNumber) && (
         <div className="booking">
-          <ProductCard
-            productName={productName}
-            productDescription={productDescription}
-            thumbnailUrl={thumbnailUrl}
-          />
           <div className="booking__content">
             <div className="booking__panel">
               <Router basepath={basePath}>
                 <StepRoute
-                  path="/"
+                  path={options.pathSuffix}
                   number={1}
-                  title={translations.STEPS.PERSONAL_DETAILS}
-                  component={<TravelersForm />}
+                  title={translations.STEPS.TRAVEL_OPTIONS}
+                  component={<OptionsForm />}
                 />
+
                 <StepRoute
-                  path={optionsPathSuffix}
+                  path="/"
                   number={2}
-                  title={translations.STEPS.TRAVEL_OPTIONS}
-                  component={<OptionsForm />}
+                  title={translations.STEPS.PERSONAL_DETAILS}
+                  component={<TravelersForm />}
                 />
+
                 <StepRoute
-                  path={summaryPathSuffix}
+                  path={summary.pathSuffix}
                   number={3}
                   title={translations.STEPS.SUMMARY}
                   component={<Summary />}
                 />
                 <StepRoute
-                  path={confirmationPathSuffix}
+                  path={confirmation.pathSuffix}
                   number={4}
                   title={translations.STEPS.CONFIRMATION}
                   component={<Confirmation />}
                 />
                 <StepRoute
-                  path={errorPathSuffix}
+                  path={error.pathSuffix}
                   number={4}
                   title={translations.STEPS.ERROR}
                   component={<Error />}
@@ -144,7 +259,28 @@ const Booking: React.FC<BookingProps> = ({
               </Router>
             </div>
             <div className="backdrop" id="backdrop"></div>
-            <Sidebar />
+            {packageDetails && (
+              <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
+            )}
+          </div>
+        </div>
+      )}
+      {!packageDetails && !bookingNumber && !isUnvailable && (
+        <div className="booking">
+          <div className="booking__loader">
+            {loaderComponent}
+            <p className="booking__loader-text">
+              {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>
       )}

package/src/booking-wizard/features/booking/selectors.ts

@@ -0,0 +1,328 @@
+import JsonURL from "@jsonurl/jsonurl";
+import { Gender } from "@qite/tide-client";
+import {
+  BookingPackageAddress,
+  BookingPackageBookRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+} from "@qite/tide-client/build/types/offer";
+import { createSelector } from "@reduxjs/toolkit";
+import { format, parseISO } from "date-fns";
+import { omit } from "lodash";
+import { RootState } from "../../store";
+import { Room, Traveler } from "../../types";
+import { selectNotifications } from "../price-details/price-details-slice";
+import {
+  selectAgentId,
+  selectTravelersFormValues,
+} from "../travelers-form/travelers-form-slice";
+
+export const selectGeneratePaymentUrl = (state: RootState) =>
+  state.booking.generatePaymentUrl;
+
+export const selectSkipPaymentWithAgent = (state: RootState) =>
+  state.booking.skipPaymentWithAgent;
+
+export const selectIsFetchingProductOptions = (state: RootState) =>
+  state.booking.isBusy;
+
+export const selectDepartureFlight = (state: RootState) =>
+  state.booking.package?.outwardFlights?.find((x) => x.isSelected);
+
+export const selectReturnFlight = (state: RootState) =>
+  state.booking.package?.returnFlights?.find((x) => x.isSelected);
+
+export const selectPackageRooms = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.rooms;
+
+export const selectIsOnRequest = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.isOnRequest;
+
+export const selectPackageOptionUnits = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.optionUnits;
+
+export const selectPackageOptionPax = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.optionPax;
+
+export const selectPackageGroups = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.groups;
+
+export const selectPackageDetails = (state: RootState) => state.booking.package;
+
+export const selectActiveOption = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected);
+
+export const selectIsUnavailable = (state: RootState) =>
+  state.booking.isUnavailable;
+
+export const selectRequestRooms = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.requestRooms;
+
+export const selectOfficeId = (state: RootState) => state.booking.officeId;
+
+export const selectBookingOptions = (state: RootState) =>
+  state.booking.bookingOptions;
+
+export const selectBookingType = (state: RootState) =>
+  state.booking.bookingType;
+
+export const selectTagIds = (state: RootState) => state.booking.tagIds;
+
+export const selectAgentAdressId = (state: RootState) =>
+  state.booking.agentAdressId;
+
+export const selectProductAttributes = (state: RootState) =>
+  state.booking.productAttributes;
+
+export const selectBookingAttributes = (state: RootState) =>
+  state.booking.bookingAttributes;
+
+export const selectBookingNumber = (state: RootState) =>
+  state.booking.bookingNumber;
+
+export const selectBookingRooms = (state: RootState) =>
+  state.booking.bookingAttributes?.rooms;
+
+export const selectBookingRemarks = (state: RootState) => state.booking.remarks;
+
+export const selectVoucherCodes = (state: RootState) =>
+  state.booking.voucherCodes;
+
+export const selectCalculateDeposit = (state: RootState) =>
+  state.booking.calculateDeposit;
+
+export const selectIsRetry = (state: RootState) => state.booking.isRetry;
+
+export const selectStartDate = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
+
+export const selectAgents = (state: RootState) => state.booking.agents;
+
+export const selectBookingQuery = (state: RootState) => {
+  const bookingAttributes = state.booking.bookingAttributes;
+
+  if (!bookingAttributes) {
+    return undefined;
+  }
+
+  const params: Record<string, string> = {};
+  Object.entries(bookingAttributes).forEach(([key, value]) => {
+    if (key === "startDate" || key === "endDate") {
+      value = format(parseISO(value), "yyyy-MM-dd");
+    }
+    if (key === "rooms") {
+      value = JsonURL.stringify(
+        (value as Room[]).map((room) => omit(room, ["children"])),
+        {
+          AQF: true,
+        }
+      );
+    }
+    params[key] = value;
+  });
+
+  return params;
+};
+
+export const selectBookingQueryString = createSelector(
+  selectBookingQuery,
+  (params) => {
+    if (!params) {
+      return undefined;
+    }
+
+    return Object.keys(params)
+      .filter((key) => typeof params[key] !== "undefined")
+      .map((key) => `${key}=${params[key]}`)
+      .join("&");
+  }
+);
+
+export const selectMainBookerId = createSelector(
+  selectTravelersFormValues,
+  (formValues) => formValues?.mainBookerId
+);
+
+export const selectBookingPackagePax = createSelector(
+  selectTravelersFormValues,
+  (formValues) => {
+    var pax: BookingPackagePax[] = [];
+
+    formValues?.adults.forEach((x) => {
+      const adultPax = buildPax(x, formValues?.mainBookerId);
+
+      if (adultPax.isMainBooker) {
+        adultPax.mobilePhone = formValues?.phone;
+        adultPax.email = formValues?.email;
+      }
+
+      pax.push(adultPax);
+    });
+
+    formValues?.children.forEach((x) => {
+      pax.push(buildPax(x));
+    });
+
+    return pax;
+  }
+);
+
+export const selectBookingAddress = createSelector(
+  selectTravelersFormValues,
+  selectBookingPackagePax,
+  (formValues, pax) => {
+    const mainBooker = pax.find((x) => x.isMainBooker);
+    if (!mainBooker) return undefined;
+
+    return {
+      name: `${mainBooker.firstName} ${mainBooker.lastName}`,
+      street: formValues?.street,
+      number: formValues?.houseNumber,
+      box: formValues?.box,
+      postalCode: formValues?.zipCode,
+      location: formValues?.place,
+      country: formValues?.country,
+      mobilePhone: formValues?.phone,
+      email: formValues?.email,
+    } as BookingPackageAddress;
+  }
+);
+
+export const selectBookingPackageRequest = createSelector(
+  selectOfficeId,
+  selectAgentId,
+  selectAgentAdressId,
+  (officeId, agentId, agentAdressId) => {
+    const agencyId =
+      (agentId ?? agentAdressId ?? 0) > 0 ? agentId ?? agentAdressId : null;
+
+    return {
+      officeId: officeId,
+      agentId: agencyId,
+      payload: null,
+    } as BookingPackageRequest<any>;
+  }
+);
+
+export const selectBookingPackageBookRequest = createSelector(
+  selectBookingPackageRequest,
+  selectBookingOptions,
+  selectBookingType,
+  selectBookingPackagePax,
+  selectBookingAddress,
+  selectPackageDetails,
+  selectCalculateDeposit,
+  selectAgentId,
+  selectGeneratePaymentUrl,
+  selectSkipPaymentWithAgent,
+  selectNotifications,
+  selectTagIds,
+  selectBookingRemarks,
+  selectVoucherCodes,
+  (
+    bookingPackageRequest: BookingPackageRequest<BookingPackageBookRequest>,
+    bookingOptions,
+    bookingType,
+    pax,
+    address,
+    packageDetails,
+    calculateDeposit,
+    agentId,
+    generatePaymentUrl,
+    skipPaymentWithAgent,
+    notifications,
+    tagIds,
+    remarks,
+    voucherCodes
+  ) => {
+    if (!packageDetails || pax?.length == 0) return null;
+
+    let returnPaymentUrl = false;
+
+    if (generatePaymentUrl && (!skipPaymentWithAgent || (agentId ?? 0) == 0)) {
+      returnPaymentUrl = true;
+    }
+
+    var entryStatus = 0;
+    var customEntryStatusId = undefined;
+
+    switch (bookingType) {
+      case "b2b":
+        if (bookingOptions.b2b.tagIds && bookingOptions.b2b.tagIds.length > 0) {
+          tagIds = tagIds?.concat(bookingOptions.b2b.tagIds);
+        }
+        if (bookingOptions.b2b.entryStatus) {
+          entryStatus = bookingOptions.b2b.entryStatus;
+        }
+        if (bookingOptions.b2b.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2b.customEntryStatusId;
+        }
+        break;
+      case "b2b2c":
+        if (
+          bookingOptions.b2b2c.tagIds &&
+          bookingOptions.b2b2c.tagIds.length > 0
+        ) {
+          tagIds = tagIds?.concat(bookingOptions.b2b2c.tagIds);
+        }
+        if (bookingOptions.b2b2c.entryStatus) {
+          entryStatus = bookingOptions.b2b2c.entryStatus;
+        }
+        if (bookingOptions.b2b2c.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2b2c.customEntryStatusId;
+        }
+        break;
+      default:
+        if (bookingOptions.b2c.tagIds && bookingOptions.b2c.tagIds.length > 0) {
+          tagIds = tagIds?.concat(bookingOptions.b2c.tagIds);
+        }
+        if (bookingOptions.b2c.entryStatus) {
+          entryStatus = bookingOptions.b2c.entryStatus;
+        }
+        if (bookingOptions.b2c.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2c.customEntryStatusId;
+        }
+        break;
+    }
+
+    bookingPackageRequest.payload = {
+      package: packageDetails,
+      status: entryStatus,
+      customStatusId: customEntryStatusId,
+      address: address,
+      pax: pax,
+      nonTravelPax: [],
+      calculateDeposit: calculateDeposit,
+      returnPaymentUrl: returnPaymentUrl,
+      notifications: notifications,
+      tagIds: tagIds,
+      remarks: remarks,
+      voucherCodes: voucherCodes,
+    };
+
+    return bookingPackageRequest;
+  }
+);
+
+const buildPax = (traveler: Traveler, mainBookerId?: number) => {
+  return {
+    id: traveler.id,
+    gender: parseGender(traveler.gender),
+    firstName: traveler.firstName,
+    lastName: traveler.lastName,
+    dateOfBirth: traveler.birthDate,
+    isMainBooker: traveler.id == mainBookerId,
+  } as BookingPackagePax;
+};
+
+const parseGender = (gender: string): number => {
+  switch (gender) {
+    case "m":
+      return Gender.male;
+    case "f":
+      return Gender.female;
+    case "x":
+    default:
+      return Gender.other;
+  }
+};