@qite/tide-booking-component 1.1.3 → 1.2.0

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

@@ -10,6 +10,7 @@ import {
 } from "../../../shared/utils/query-string-util";
 import {
   fetchPackage,
+  setAccommodationViewId,
   setAgentAdressId,
   setBookingAttributes,
   setBookingNumber,
@@ -28,21 +29,25 @@ import {
 
 import { isNil } from "lodash";
 import { useEffect } from "react";
-import { setApiKey, setApiUrl } from "../../api-settings-slice";
 import Loader from "../../../shared/components/loader";
+import { setApiKey, setApiUrl } from "../../api-settings-slice";
 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 {
   CONFIRMATION_STEP,
   ERROR_STEP,
+  FLIGHT_OPTIONS_FORM_STEP,
   OPTIONS_FORM_STEP,
+  ROOM_OPTIONS_FORM_STEP,
   SUMMARY_STEP,
   TRAVELERS_FORM_STEP,
 } from "./constants";
@@ -52,7 +57,6 @@ import {
   selectBookingNumber,
   selectBookingRooms,
   selectCurrentStep,
-  selectIsRetry,
   selectIsUnavailable,
   selectPackageDetails,
   selectProductAttributes,
@@ -83,6 +87,9 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     apiUrl,
     apiKey,
     translationFiles,
+    roomOptions,
+    flightOptions,
+    accommodationViewId
   } = useContext(SettingsContext);
 
   const dispatch = useAppDispatch();
@@ -128,6 +135,10 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     if (!isNil(bookingNumber)) {
       dispatch(setBookingNumber(bookingNumber));
       dispatch(setCurrentStep(CONFIRMATION_STEP));
+    } else if (!flightOptions.isHidden) {
+      dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+    } else if (!roomOptions.isHidden) {
+      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
     }
 
     if (
@@ -178,7 +189,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
   }, [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})));
+    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);
   };
 
@@ -187,7 +198,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
       const translations = await getTranslations();
       dispatch(setTranslations(translations)); // Now dispatch the resolved value
     };
-  
+
     loadTranslations();
 
     dispatch(setOfficeId(officeId));
@@ -201,6 +212,10 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     if (agentAdressId && agentAdressId != 0) {
       dispatch(setBookingType("b2b"));
     }
+    if (accommodationViewId && accommodationViewId != 0) {
+      dispatch(setAccommodationViewId(accommodationViewId));
+    }
+
   }, [
     officeId,
     language,
@@ -211,6 +226,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     setCalculateDeposit,
     tagIds,
     agentAdressId,
+    accommodationViewId,
   ]);
 
   useEffect(() => {
@@ -239,14 +255,28 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     apiSettings.apiKey,
   ]);
 
-  // const translations = getTranslations(language);
-
   const renderStep = () => {
     switch (currentStep) {
-      case OPTIONS_FORM_STEP:
+      case FLIGHT_OPTIONS_FORM_STEP:
         return (
           <StepRoute
             number={1}
+            title={translations.STEPS.FLIGHT_OPTIONS}
+            component={<FlightOptionsForm />}
+          />
+        );
+      case ROOM_OPTIONS_FORM_STEP:
+        return (
+          <StepRoute
+            number={1 + (flightOptions.isHidden ? 0 : 1)}
+            title={translations.STEPS.ROOM_OPTIONS}
+            component={<RoomOptionsForm />}
+          />
+        );
+      case OPTIONS_FORM_STEP:
+        return (
+          <StepRoute
+            number={1 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
             title={translations.STEPS.EXTRA_OPTIONS}
             component={<OptionsForm />}
           />
@@ -254,7 +284,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
       case TRAVELERS_FORM_STEP:
         return (
           <StepRoute
-            number={2}
+            number={2 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
             title={translations.STEPS.PERSONAL_DETAILS}
             component={<TravelersForm />}
           />
@@ -262,7 +292,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
       case SUMMARY_STEP:
         return (
           <StepRoute
-            number={3}
+            number={3 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
             title={translations.STEPS.SUMMARY}
             component={<Summary />}
           />
@@ -270,7 +300,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
       case CONFIRMATION_STEP:
         return (
           <StepRoute
-            number={4}
+            number={4 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
             title={translations.STEPS.CONFIRMATION}
             component={<Confirmation />}
           />
@@ -278,7 +308,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({
       case ERROR_STEP:
         return (
           <StepRoute
-            number={4}
+            number={5 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
             title={translations.STEPS.ERROR}
             component={<Error />}
           />
@@ -290,16 +320,16 @@ const BookingSelfContained: React.FC<BookingProps> = ({
     <>
       {((productAttributes && bookingAttributes && packageDetails) ||
         bookingNumber) && (
-        <div className="booking">
-          <div className="booking__content">
-            <div className="booking__panel">{renderStep()}</div>
-            <div className="backdrop" id="backdrop"></div>
-            {packageDetails && (
-              <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
-            )}
+          <div className="booking">
+            <div className="booking__content">
+              <div className="booking__panel">{renderStep()}</div>
+              <div className="backdrop" id="backdrop"></div>
+              {packageDetails && (
+                <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
       {!packageDetails && !bookingNumber && !isUnvailable && (
         <div className="booking">
           <div className="booking__loader">

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

@@ -2,6 +2,7 @@ import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import {
   BookingAttributes,
   BookingOptions,
+  GroupedFlights,
   ProductAttributes,
 } from "../../types";
 
@@ -21,6 +22,7 @@ import {
   BookingPackageRequestRoom,
   BookingPackageRoom,
   BookingTravelAgent,
+  GenerateBookingAccommodationRequest,
   PerBookingPackageOption,
 } from "@qite/tide-client/build/types";
 import { first, isEmpty, isNil, range } from "lodash";
@@ -29,11 +31,13 @@ import { selectAgentId } from "../travelers-form/travelers-form-slice";
 import packageApi from "./api";
 import { BookingStep, OPTIONS_FORM_STEP } from "./constants";
 import {
+  selectAccommodationCodes,
   selectBookingAttributes,
   selectBookingRooms,
   selectLanguageCode,
   selectOfficeId,
   selectProductAttributes,
+  selectProductCode,
 } from "./selectors";
 
 export interface BookingState {
@@ -61,6 +65,8 @@ export interface BookingState {
     language: string;
     value: any;
   }[];
+  accommodationViewId?: number;
+  accommodationViews?: { [key: string]: string };
 }
 
 const initialState: BookingState = {
@@ -105,6 +111,7 @@ export const fetchPackage = createAsyncThunk(
     dispatch(setFetchingPackage(true));
     await dispatch(fetchAgents());
     await dispatch(fetchPackageDetails());
+    await dispatch(fetchAccommodationViews());
     dispatch(setFetchingPackage(false));
   }
 );
@@ -187,6 +194,31 @@ const fetchPackageDetails = createAsyncThunk(
   }
 );
 
+const fetchAccommodationViews = createAsyncThunk(
+  "booking/accommodationViews",
+  async (_, { dispatch, getState, signal }) => {
+    const state = getState() as RootState;
+    if (!state.booking.accommodationViewId) return Promise.resolve();
+
+    const languageCode = selectLanguageCode(state);
+    const accommodationCodes = selectAccommodationCodes(state);
+    const productCode = selectProductCode(state);
+
+    if (!productCode) {
+      throw Error('No product selected');
+    }
+
+    const request = {
+      languageCode: languageCode,
+      productCode: productCode,
+      accommodationCodes: accommodationCodes,
+      contentViewId: state.booking.accommodationViewId
+    } as GenerateBookingAccommodationRequest;
+
+    return await packageApi.fetchAccommodationViews(request, signal, state.apiSettings);
+  }
+);
+
 const getActiveOption = (state: BookingState) => {
   if (state.package) return state.package.options.find((x) => x.isSelected);
   return null;
@@ -380,17 +412,15 @@ const bookingSlice = createSlice({
 
       state.currentStep = action.payload;
     },
-    setOutwardFlight(state, action: PayloadAction<BookingPackageFlight>) {
+    setFlights(state, action: PayloadAction<GroupedFlights>) {
       if (!state.package) return;
 
-      changeOutwardFlight(state.package, action.payload);
+      changeOutwardFlight(state.package, action.payload.selectedOutward);
+      changeReturnFlight(state.package, action.payload.selectedReturn);
       changePackageOption(state.package);
     },
-    setReturnFlight(state, action: PayloadAction<BookingPackageFlight>) {
-      if (!state.package) return;
-
-      changeReturnFlight(state.package, action.payload);
-      changePackageOption(state.package);
+    setAccommodationViewId(state, action: PayloadAction<number>) {
+      state.accommodationViewId = action.payload;
     }
   },
   extraReducers: (builder) => {
@@ -531,6 +561,11 @@ const bookingSlice = createSlice({
         state.agents = action.payload;
       }
     });
+    builder.addCase(fetchAccommodationViews.fulfilled, (state, action) => {
+      if (action.payload) {
+        state.accommodationViews = action.payload;
+      }
+    });
   },
 });
 
@@ -560,8 +595,9 @@ export const {
   setCurrentStep,
   setPackageAirlineGroups,
   setPackageAirportGroups,
-  setOutwardFlight,
-  setReturnFlight
+  setFlights,
+  setAccommodationViewId
 } = bookingSlice.actions;
 
 export default bookingSlice.reducer;
+

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

@@ -11,6 +11,7 @@ import {
 } from "../../../shared/utils/query-string-util";
 import {
   fetchPackage,
+  setAccommodationViewId,
   setAgentAdressId,
   setBookingAttributes,
   setBookingNumber,
@@ -82,6 +83,7 @@ const Booking: React.FC<BookingProps> = ({
     agentAdressId,
     language,
     translationFiles,
+    accommodationViewId
   } = useContext(SettingsContext);
 
   const dispatch = useAppDispatch();
@@ -94,7 +96,7 @@ const Booking: React.FC<BookingProps> = ({
   const isRetry = useSelector(selectIsRetry);
   const packageDetails = useSelector(selectPackageDetails);
   const isUnvailable = useSelector(selectIsUnavailable);
-  const translations = useSelector(selectTranslations);  
+  const translations = useSelector(selectTranslations);
 
   useEffect(() => {
     dispatch(setSkipPayment(skipPaymentWithAgent ?? false));
@@ -192,7 +194,7 @@ const Booking: React.FC<BookingProps> = ({
   }, [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})));
+    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);
   };
 
@@ -201,7 +203,7 @@ const Booking: React.FC<BookingProps> = ({
       const translations = await getTranslations();
       dispatch(setTranslations(translations)); // Now dispatch the resolved value
     };
-  
+
     loadTranslations();
 
     dispatch(setOfficeId(officeId));
@@ -215,6 +217,10 @@ const Booking: React.FC<BookingProps> = ({
     if (agentAdressId && agentAdressId != 0) {
       dispatch(setBookingType("b2b"));
     }
+    if (accommodationViewId && accommodationViewId != 0) {
+      dispatch(setAccommodationViewId(accommodationViewId));
+    }
+
   }, [
     officeId,
     language,
@@ -225,6 +231,7 @@ const Booking: React.FC<BookingProps> = ({
     setCalculateDeposit,
     tagIds,
     agentAdressId,
+    accommodationViewId
   ]);
 
   useEffect(() => {
@@ -256,61 +263,65 @@ const Booking: React.FC<BookingProps> = ({
     <>
       {((productAttributes && bookingAttributes && packageDetails) ||
         bookingNumber) && (
-        <div className="booking">
-          <div className="booking__content">
-            <div className="booking__panel">
-              <Router basepath={basePath}>
-                {!roomOptions.isHidden && roomOptions.pathSuffix && (<StepRoute
-                  path={roomOptions.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.ROOM_OPTIONS}
-                  component={<RoomOptionsForm />}
-                />)}
-                {!flightOptions.isHidden && flightOptions.pathSuffix && (<StepRoute
-                  path={flightOptions.pathSuffix}
-                  number={numberIndex++}
-                  title={translations.STEPS.FLIGHT_OPTIONS}
-                  component={<FlightOptionsForm />}
-                />)}
-                <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 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 className="backdrop" id="backdrop"></div>
-            {packageDetails && (
-              <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
-            )}
           </div>
-        </div>
-      )}
+        )}
       {!packageDetails && !bookingNumber && !isUnvailable && (
         <div className="booking">
           <div className="booking__loader">

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

@@ -5,10 +5,11 @@ import {
   BookingPackageBookRequest,
   BookingPackagePax,
   BookingPackageRequest,
-} from "@qite/tide-client/build/types/offer";
+} from "@qite/tide-client/build/types";
 import { createSelector } from "@reduxjs/toolkit";
 import { format, parseISO } from "date-fns";
 import { omit } from "lodash";
+import { getTranslations } from "../../../shared/utils/localization-util";
 import { RootState } from "../../store";
 import { FlightInfo, Room, Traveler } from "../../types";
 import { selectNotifications } from "../price-details/price-details-slice";
@@ -16,7 +17,6 @@ import {
   selectAgentId,
   selectTravelersFormValues,
 } from "../travelers-form/travelers-form-slice";
-import { getTranslations } from "../../../shared/utils/localization-util";
 
 export const selectCurrentStep = (state: RootState) =>
   state.booking.currentStep;
@@ -39,6 +39,9 @@ export const selectReturnFlight = (state: RootState) =>
 export const selectPackageRooms = (state: RootState) =>
   state.booking.package?.options.find((x) => x.isSelected)?.rooms;
 
+export const selectAvailabilities = (state: RootState) =>
+  state.booking.package?.options.find((x) => x.isSelected)?.availabilities;
+
 export const selectPackageTags = (state: RootState) =>
   state.booking.package?.tags;
 
@@ -56,11 +59,11 @@ export const selectPackageGroups = (state: RootState) =>
 
 export const selectPackageDetails = (state: RootState) => state.booking.package;
 
-export const selectPackageFlights = (state: RootState) => 
-  ({ 
-    outward:  state.booking.package?.outwardFlights,
-    return: state.booking.package?.returnFlights
-  });
+export const selectPackageFlights = (state: RootState) =>
+({
+  outward: state.booking.package?.outwardFlights,
+  return: state.booking.package?.returnFlights
+});
 
 export const selectActiveOption = (state: RootState) =>
   state.booking.package?.options.find((x) => x.isSelected);
@@ -69,7 +72,7 @@ export const selectPackageAirlineGroups = createSelector(
   selectActiveOption,
   selectDepartureFlight,
   selectReturnFlight,
-  (option, departureFlight, returnFlight) => 
+  (option, departureFlight, returnFlight) =>
     option?.airlineGroups
       .filter(x => x.flightIds.includes(departureFlight?.entryLineGuid ?? "") || x.flightIds.includes(returnFlight?.entryLineGuid ?? "")));
 
@@ -77,7 +80,7 @@ export const selectPackageAirportGroups = createSelector(
   selectActiveOption,
   selectDepartureFlight,
   selectReturnFlight,
-  (option, departureFlight, returnFlight) => 
+  (option, departureFlight, returnFlight) =>
     option?.airportGroups
       .filter(x => x.flightIds.includes(departureFlight?.entryLineGuid ?? "") || x.flightIds.includes(returnFlight?.entryLineGuid ?? "")));
 
@@ -137,6 +140,22 @@ export const selectStartDate = (state: RootState) =>
 
 export const selectAgents = (state: RootState) => state.booking.agents;
 
+export const selectProductCode = (state: RootState) => state.booking.productAttributes?.productCode;
+
+export const selectAccommodationCodes = (state: RootState) => {
+  const accommodationCodes: string[] = [];
+  state.booking.package?.options.forEach(o => {
+    o.rooms.forEach(r => r.options.forEach(ro => {
+      if (!accommodationCodes.some(y => y === ro.accommodationCode)) {
+        accommodationCodes.push(ro.accommodationCode)
+      }
+    }))
+  });
+  return accommodationCodes;
+}
+
+export const selectAccommodationViews = (state: RootState) => state.booking.accommodationViews;
+
 export const selectBookingQuery = (state: RootState) => {
   const bookingAttributes = state.booking.bookingAttributes;
 
@@ -149,6 +168,7 @@ export const selectBookingQuery = (state: RootState) => {
     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"])),
@@ -157,12 +177,19 @@ export const selectBookingQuery = (state: RootState) => {
         }
       );
     }
-    if (key === "flight") {
+
+    if (key === "allotmentIds" && !value.length) {
+      value = undefined;
+    }
+
+    if (key === "flight" && value) {
       var flightInfo = value as FlightInfo;
       value = JsonURL.stringify(flightInfo, { AQF: true });
     }
 
-    params[key] = value;
+    if (value) {
+      params[key] = value;
+    }
   });
 
   return params;