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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "0.0.2-preview.9",
+  "version": "1.0.0-preview",
   "description": "React BookingWizard component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -24,6 +24,7 @@
   "license": "OBSD",
   "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
   "devDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
     "@reach/router": "^1.3.4",
     "@reduxjs/toolkit": "^1.6.0",
     "@rollup/plugin-commonjs": "^19.0.1",
@@ -32,6 +33,7 @@
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.171",
     "@types/reach__router": "^1.3.9",
+    "@types/react-dom": "^17.0.11",
     "@types/uuid": "^8.3.1",
     "date-fns": "^2.22.1",
     "flat": "^5.0.2",
@@ -45,10 +47,12 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.30.0",
+    "tslib": "^2.3.1",
     "typescript": "^4.3.5",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
     "@reach/router": "^1.3.4",
     "@reduxjs/toolkit": "^1.6.0",
     "date-fns": "^2.22.1",
@@ -56,12 +60,12 @@
     "formik": "^2.2.9",
     "immer": "^9.0.5",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-redux": "^7.2.4",
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "0.0.2-preview.11"
+    "@qite/tide-client": "1.1.1"
   }
 }

package/rollup.config.js

@@ -11,11 +11,6 @@ export default {
   output: [
     { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
     { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
-    {
-      file: "playground/src/app/booking-wizard/index.js",
-      format: "esm",
-      banner: "/* eslint-disable */",
-    },
   ],
   plugins: [
     peerDepsExternal(),
@@ -23,6 +18,6 @@ export default {
     nodeResolve(),
     commonjs(),
     typescript(),
-    del({ targets: ["build/*", "playground/src/app/booking-wizard/*"] }),
+    del({ targets: ["build/*"] }),
   ],
 };

package/src/booking-wizard/components/message.tsx

@@ -6,21 +6,27 @@ interface MessageProps {
   type: "error" | "success";
   title: string;
   actionComponent?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
 }
 
-const Message: React.FC<MessageProps> = (props) => (
+const Message: React.FC<MessageProps> = ({
+  type,
+  title,
+  actionComponent,
+  children,
+}) => (
   <div
     className={buildClassName([
       "booking-message",
-      props.type === "error" && "booking-message--error",
-      props.type === "success" && "booking-message--success",
+      type === "error" && "booking-message--error",
+      type === "success" && "booking-message--success",
     ])}
   >
-    {props.type === "error" && <Icon name="ui-error" />}
-    <h4 className="booking-message__heading">{props.title}</h4>
-    <div className="booking-message__text">{props.children}</div>
-    {props.actionComponent && (
-      <div className="booking-message__actions">{props.actionComponent}</div>
+    {type === "error" && <Icon name="ui-error" />}
+    <h4 className="booking-message__heading">{title}</h4>
+    <div className="booking-message__text">{children}</div>
+    {actionComponent && (
+      <div className="booking-message__actions">{actionComponent}</div>
     )}
   </div>
 );

package/src/booking-wizard/components/product-card.tsx

@@ -1,64 +1,35 @@
-import { format, parseISO } from "date-fns";
-
-import Rating from "../components/rating";
 import React from "react";
-import SettingsContext from "../settings-context";
-import { compact } from "lodash";
-import { selectBookingAttributes } from "../features/booking/booking-slice";
-import { useContext } from "react";
-import { useSelector } from "react-redux";
 
 interface ProductCardProps {
   productName: string;
-  productDescription?: string;
   thumbnailUrl?: string;
-  rating?: number;
+  handleToggleClick: () => void;
 }
 
 const ProductCard: React.FC<ProductCardProps> = ({
   productName,
-  productDescription,
   thumbnailUrl,
-  rating,
+  handleToggleClick,
 }) => {
-  const { showProductCardRating } = useContext(SettingsContext);
-  const bookingAttributes = useSelector(selectBookingAttributes);
-
-  const startDate =
-    typeof bookingAttributes?.startDate !== "undefined"
-      ? parseISO(bookingAttributes.startDate)
-      : undefined;
-
-  const endDate =
-    typeof bookingAttributes?.endDate !== "undefined"
-      ? parseISO(bookingAttributes.endDate)
-      : undefined;
-
-  const dateFormat = "dd/MM/yyyy";
-
-  const description = compact([
-    startDate && format(startDate, dateFormat),
-    startDate && endDate && " > ",
-    endDate && format(endDate, dateFormat),
-    productDescription && `, ${productDescription}`,
-  ]).join("");
-
   return (
     <div className="booking__product">
       <div className="booking__product-image">
         {thumbnailUrl && (
           <img
-            src={`${thumbnailUrl}?height=140`}
+            src={`${thumbnailUrl}?height=400&width=400`}
             alt={productName}
             className="mediacontent"
           />
         )}
       </div>
-      <div className="booking__product-body">
-        {showProductCardRating && rating && <Rating rating={rating} />}
-        <h1>{productName}</h1>
-        <p className="productcard__description">{description}</p>
+      <div className="booking__product-text">
+        <h3 className="booking__product-heading">{productName}</h3>
       </div>
+      <button
+        type="button"
+        className="booking__product-toggle"
+        onClick={handleToggleClick}
+      ></button>
     </div>
   );
 };

package/src/booking-wizard/components/step-indicator.tsx

@@ -11,7 +11,7 @@ const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
       <div className="step-indicators__items">
         {[
           "Persoonlijke gegevens",
-          "Reisopties",
+          "Samenstellen",
           "Overzicht",
           "Bevestiging",
         ].map((stepName, index) => (

package/src/booking-wizard/components/step-route.tsx

@@ -12,7 +12,7 @@ const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
   return (
     <>
       <StepIndicators currentStep={number} />
-      <div className="booking__panel-frame">
+      <div className="booking__panel-frame booking__panel-frame--transparent">
         <div className="booking__panel-heading">
           <h4 className="booking__panel-title">
             {number}. {title}

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

@@ -0,0 +1,44 @@
+import { agents, details, priceDetails } from "@qite/tide-client";
+import {
+  BookingPackageRequest,
+  BookingPackageDetailsRequest,
+  BookingPackage,
+  BookingPackageBookRequest,
+  BookingPriceDetails,
+  BookingTravelAgent,
+  TideResponse,
+} from "@qite/tide-client/build/types";
+import { buildTideClientConfig } from "../../utils/tide-api-utils";
+
+const fetchDetails = async (
+  request: BookingPackageRequest<BookingPackageDetailsRequest>,
+  signal: AbortSignal
+): Promise<TideResponse<BookingPackage>> => {
+  const tideClientConfig = buildTideClientConfig();
+
+  return await details(tideClientConfig, request, signal);
+};
+
+const fetchPriceDetails = async (
+  request: BookingPackageRequest<BookingPackageBookRequest>,
+  signal: AbortSignal
+): Promise<BookingPriceDetails> => {
+  const tideClientConfig = buildTideClientConfig();
+
+  return await priceDetails(tideClientConfig, request, signal);
+};
+
+const fetchAgents = async (
+  signal: AbortSignal
+): Promise<BookingTravelAgent[]> => {
+  const tideClientConfig = buildTideClientConfig();
+
+  return await agents(tideClientConfig, signal);
+};
+
+const packageApi = {
+  fetchDetails,
+  fetchPriceDetails,
+  fetchAgents,
+};
+export default packageApi;

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

@@ -1,24 +1,172 @@
-import { BookingAttributes, ProductAttributes } from "../../types";
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import {
+  BookingAttributes,
+  BookingOptions,
+  ProductAttributes,
+} from "../../types";
+import { PayloadAction, createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 
 import { RootState } from "../../store";
-import { format } from "date-fns";
-import parseISO from "date-fns/parseISO";
+import { isNil, range } from "lodash";
+import {
+  selectBookingAttributes,
+  selectBookingRooms,
+  selectOfficeId,
+  selectProductAttributes,
+} from "./selectors";
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingOptionUnit,
+  BookingPackage,
+  BookingPackageDetailsRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageRoom,
+  BookingTravelAgent,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import packageApi from "./api";
+import { selectAgentId } from "../travelers-form/travelers-form-slice";
 
 export interface BookingState {
   officeId: number;
   productAttributes?: ProductAttributes;
   bookingAttributes?: BookingAttributes;
-  cacheKey?: string;
+  calculateDeposit: boolean;
   bookingNumber?: string;
+  isRetry: boolean;
+  package?: BookingPackage;
+  agents?: BookingTravelAgent[];
+  isBusy: boolean;
+  skipPaymentWithAgent: boolean;
+  generatePaymentUrl: boolean;
+  isUnavailable?: boolean;
+  tagIds?: number[];
+  agentAdressId?: number;
+  remarks?: string;
+  voucherCodes?: string[];
+  bookingOptions: BookingOptions;
+  bookingType: string;
 }
 
 const initialState: BookingState = {
   officeId: 1,
+  bookingOptions: {
+    b2b: {
+      tagIds: [],
+      entryStatus: 2,
+      customEntryStatusId: undefined,
+    },
+    b2b2c: {
+      tagIds: [],
+      entryStatus: 2,
+      customEntryStatusId: undefined,
+    },
+    b2c: {
+      tagIds: [],
+      entryStatus: 0,
+      customEntryStatusId: undefined,
+    },
+  },
+  bookingType: "b2c",
   productAttributes: undefined,
   bookingAttributes: undefined,
-  cacheKey: undefined,
+  calculateDeposit: false,
   bookingNumber: undefined,
+  isRetry: false,
+  package: undefined,
+  isBusy: false,
+  skipPaymentWithAgent: false,
+  generatePaymentUrl: false,
+  tagIds: [],
+  agentAdressId: undefined,
+};
+
+export const fetchPackage = createAsyncThunk(
+  "booking/fetchPackage",
+  async (_, { dispatch }) => {
+    dispatch(setFetchingPackage(true));
+    await dispatch(fetchAgents());
+    await dispatch(fetchPackageDetails());
+    dispatch(setFetchingPackage(false));
+  }
+);
+
+const fetchAgents = createAsyncThunk(
+  "booking/agents",
+  async (_, { dispatch, getState, signal }) => {
+    return await packageApi.fetchAgents(signal);
+  }
+);
+
+const fetchPackageDetails = createAsyncThunk(
+  "booking/details",
+  async (_, { dispatch, getState, signal }) => {
+    const state = getState() as RootState;
+
+    const officeId = selectOfficeId(state);
+    const productAttributes = selectProductAttributes(state);
+    const bookingAttributes = selectBookingAttributes(state);
+    const agentId = selectAgentId(state);
+    const rooms = selectBookingRooms(state);
+
+    if (isNil(productAttributes)) {
+      throw Error("productAttributes could not be found");
+    }
+
+    if (isNil(bookingAttributes)) {
+      throw Error("bookingAttributes could not be found");
+    }
+
+    if (!rooms?.length) {
+      throw Error("rooms could not be found");
+    }
+
+    var requestRooms = rooms?.map((x, i) => {
+      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
+      range(0, x.adults).forEach(() => {
+        room.pax.push({
+          age: 30,
+        } as BookingPackagePax);
+      });
+      x.childAges.forEach((x) => {
+        room.pax.push({
+          age: x,
+        } as BookingPackagePax);
+      });
+      return room;
+    });
+
+    const isAllotment =
+      bookingAttributes.tourCode ||
+      bookingAttributes.allotmentName ||
+      (bookingAttributes.allotmentIds && bookingAttributes.allotmentIds.length);
+
+    const request = {
+      officeId: officeId,
+      agentId: agentId,
+      payload: {
+        searchType: isAllotment ? 1 : 0,
+        catalogueId: bookingAttributes.catalog,
+        productCode: productAttributes.productCode,
+        fromDate: bookingAttributes.startDate,
+        toDate: bookingAttributes.endDate,
+        includeFlights: bookingAttributes.includeFlights,
+        allotmentName: bookingAttributes.allotmentName,
+        allotmentIds: bookingAttributes.allotmentIds ?? [],
+        tourCode: bookingAttributes.tourCode,
+        rooms: requestRooms,
+      } as BookingPackageDetailsRequest,
+    } as BookingPackageRequest<BookingPackageDetailsRequest>;
+
+    return await packageApi.fetchDetails(request, signal);
+  }
+);
+
+const getActiveOption = (state: BookingState) => {
+  if (state.package) return state.package.options.find((x) => x.isSelected);
+  return null;
 };
 
 const bookingSlice = createSlice({
@@ -28,58 +176,144 @@ const bookingSlice = createSlice({
     setOfficeId(state, action: PayloadAction<number>) {
       state.officeId = action.payload;
     },
+    setBookingOptions(state, action: PayloadAction<BookingOptions>) {
+      state.bookingOptions = action.payload;
+    },
+    setBookingType(state, action: PayloadAction<string>) {
+      state.bookingType = action.payload;
+    },
     setProductAttributes(state, action: PayloadAction<ProductAttributes>) {
       state.productAttributes = action.payload;
     },
     setBookingAttributes(state, action: PayloadAction<BookingAttributes>) {
       state.bookingAttributes = action.payload;
     },
-    setCacheKey(state, action: PayloadAction<string>) {
-      state.cacheKey = action.payload;
+    setCalculateDeposit(state, action: PayloadAction<boolean>) {
+      state.calculateDeposit = action.payload;
     },
     setBookingNumber(state, action: PayloadAction<string>) {
       state.bookingNumber = action.payload;
     },
+    setIsRetry(state, action: PayloadAction<boolean>) {
+      state.isRetry = action.payload;
+    },
+    setFetchingPackage(state, action: PayloadAction<boolean>) {
+      state.isBusy = action.payload;
+    },
+    setPackage(state, action: PayloadAction<BookingPackage>) {
+      state.package = action.payload;
+    },
+    setPackageRooms(state, action: PayloadAction<BookingPackageRoom[]>) {
+      const option = getActiveOption(state);
+      if (option) option.rooms = action.payload;
+    },
+    setPackageOptionPax(state, action: PayloadAction<BookingOptionPax[]>) {
+      const option = getActiveOption(state);
+      if (option) option.optionPax = action.payload;
+    },
+    setPackageOptionUnits(state, action: PayloadAction<BookingOptionUnit[]>) {
+      const option = getActiveOption(state);
+      if (option) option.optionUnits = action.payload;
+    },
+    setSkipPayment(state, action: PayloadAction<boolean>) {
+      state.skipPaymentWithAgent = action.payload;
+    },
+    setGeneratePaymentUrl(state, action: PayloadAction<boolean>) {
+      state.generatePaymentUrl = action.payload;
+    },
+    setPackageGroups(
+      state,
+      action: PayloadAction<BookingOptionGroup<PerBookingPackageOption>[]>
+    ) {
+      const option = getActiveOption(state);
+      if (option) option.groups = action.payload;
+    },
+    setTagIds(state, action: PayloadAction<number[] | undefined>) {
+      state.tagIds = action.payload;
+    },
+    setAgentAdressId(state, action: PayloadAction<number | undefined>) {
+      state.agentAdressId = action.payload;
+    },
+    setBookingRemarks(state, action: PayloadAction<string>) {
+      state.remarks = action.payload;
+    },
+    setVoucherCodes(state, action: PayloadAction<string[]>) {
+      state.voucherCodes = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchPackageDetails.fulfilled, (state, action) => {
+      if (action.payload) {
+        if (action.payload.errorCode) {
+          console.error(
+            action.payload.errorCode,
+            action.payload.errorMessage,
+            action.payload.errorDetails
+          );
+
+          state.isUnavailable = true;
+          return;
+        }
+
+        if (!action.payload.payload) {
+          state.isUnavailable = true;
+          return;
+        }
+
+        const bookingRooms = state.bookingAttributes?.rooms;
+        const packageDetails = action.payload.payload;
+        const activeOption = packageDetails.options.find((x) => x.isSelected);
+
+        if (
+          activeOption &&
+          bookingRooms?.some((x) => x.accommodationCode || x.regimeCode)
+        ) {
+          bookingRooms.forEach((room, i) => {
+            if (room.accommodationCode || room.regimeCode) {
+              activeOption.rooms[i].options = activeOption.rooms[i].options.map(
+                (ro) => ({
+                  ...ro,
+                  isSelected:
+                    ro.accommodationCode == room.accommodationCode &&
+                    ro.regimeCode == room.regimeCode,
+                })
+              );
+            }
+          });
+        }
+
+        state.package = packageDetails;
+      }
+    });
+    builder.addCase(fetchAgents.fulfilled, (state, action) => {
+      if (action.payload) {
+        state.agents = action.payload;
+      }
+    });
   },
 });
 
 export const {
   setOfficeId,
+  setBookingOptions,
+  setBookingType,
   setProductAttributes,
   setBookingAttributes,
-  setCacheKey,
+  setCalculateDeposit,
   setBookingNumber,
+  setIsRetry,
+  setFetchingPackage,
+  setPackage,
+  setPackageRooms,
+  setPackageOptionPax,
+  setPackageOptionUnits,
+  setPackageGroups,
+  setSkipPayment,
+  setGeneratePaymentUrl,
+  setTagIds,
+  setAgentAdressId,
+  setBookingRemarks,
+  setVoucherCodes,
 } = bookingSlice.actions;
 
-export const selectOfficeId = (state: RootState) => state.booking.officeId;
-
-export const selectCacheKey = (state: RootState) => state.booking.cacheKey;
-
-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 selectBookingQueryString = (state: RootState) => {
-  const bookingAttributes = state.booking.bookingAttributes;
-
-  if (!bookingAttributes) {
-    return undefined;
-  }
-
-  const params = new URLSearchParams();
-  Object.entries(bookingAttributes).forEach(([key, value]) => {
-    if (key === "startDate" || key === "endDate") {
-      value = format(parseISO(value), "yyyy-MM-dd");
-    }
-    params.append(key, value);
-  });
-
-  return params.toString();
-};
-
 export default bookingSlice.reducer;