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

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

@@ -2,13 +2,14 @@ import React, { useContext } from "react";
 import {
   selectBookingNumber,
   selectBookingQueryString,
-} from "../booking/booking-slice";
+} from "../booking/selectors";
 
 import Message from "../../components/message";
 import SettingsContext from "../../settings-context";
 import { navigate } from "@reach/router";
 import translations from "../../translations/translations.json";
 import { useSelector } from "react-redux";
+import Icon from "../../components/icon";
 
 interface ConfirmationProps {}
 
@@ -20,26 +21,36 @@ const Confirmation: React.FC<ConfirmationProps> = () => {
 
   if (!bookingNumber) {
     navigate(
-      `${settings.basePath}${settings.errorPathSuffix}?${bookingQueryString}`
+      `${settings.basePath}${settings.error.pathSuffix}?${bookingQueryString}`
     );
   }
 
   return (
-    <div className="form">
+    <div className="form" id="booking--step4">
       <div className="form__region">
         <div className="form__row">
           <div className="form__group">
             <Message
               type="success"
-              title={`Uw boeking met nummer ${bookingNumber} is ingediend`}
+              title={`${translations.CONFIRMATION.TITLE_TEXT1}${bookingNumber}${translations.CONFIRMATION.TITLE_TEXT2}`}
               actionComponent={
-                <a
-                  href="/"
-                  title={translations.CONFIRMATION.HOME}
-                  className="cta"
-                >
-                  {translations.CONFIRMATION.HOME}
-                </a>
+                <div className="sm">
+                  <a
+                    href={`tel://${settings.companyContactPhone}`}
+                    className="sm__icon"
+                  >
+                    <Icon name="tel" />
+                  </a>
+                  <a
+                    href={`mailto://${settings.companyContactEmail}`}
+                    className="sm__icon"
+                  >
+                    <Icon name="mail" />
+                  </a>
+                  <a href="/" className="sm__icon">
+                    <Icon name="home" />
+                  </a>
+                </div>
               }
             >
               <p>

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

@@ -1,19 +1,32 @@
 import Message from "../../components/message";
 import React from "react";
 import SettingsContext from "../../settings-context";
-import { selectBookingQueryString } from "../booking/booking-slice";
+import { setIsRetry } from "../booking/booking-slice";
 import translations from "../../translations/translations.json";
 import { useContext } from "react";
 import { useSelector } from "react-redux";
+import { navigate } from "@reach/router";
+import { useAppDispatch } from "../../store";
+import { selectBookingQueryString } from "../booking/selectors";
 
 interface ErrorProps {}
 
 const Error: React.FC<ErrorProps> = () => {
+  const dispatch = useAppDispatch();
+
   const settings = useContext(SettingsContext);
   const bookingQueryString = useSelector(selectBookingQueryString);
 
   const tryAgainUrl = `${settings.basePath}?${bookingQueryString}`;
 
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+
+    dispatch(setIsRetry(true));
+
+    navigate(tryAgainUrl);
+  };
+
   return (
     <div className="form">
       <div className="form__region">
@@ -24,7 +37,7 @@ const Error: React.FC<ErrorProps> = () => {
               title="Er liep iets mis..."
               actionComponent={
                 <a
-                  href={tryAgainUrl}
+                  onClick={handleClick}
                   title={translations.ERROR.TRY_AGAIN}
                   className="cta"
                 >

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

@@ -1,12 +1,18 @@
-import { getPackagePriceDetails } from "@qite/tide-client";
-import { PackagePriceDetailsRequest } from "@qite/tide-client/src/types/offer";
+import { priceDetails } from "@qite/tide-client";
+import {
+  BookingPackageBookRequest,
+  BookingPackageRequest,
+  BookingPriceDetails,
+} from "@qite/tide-client/build/types";
 import { buildTideClientConfig } from "../../utils/tide-api-utils";
 
-export const fetchPriceDetails = async (
-  request: PackagePriceDetailsRequest
-) => {
+const fetchPriceDetails = async (
+  request: BookingPackageRequest<BookingPackageBookRequest>,
+  signal: AbortSignal
+): Promise<BookingPriceDetails> => {
   const tideClientConfig = buildTideClientConfig();
-  return await getPackagePriceDetails(tideClientConfig, request);
+
+  return await priceDetails(tideClientConfig, request, signal);
 };
 
 const priceDetailsApi = {

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

@@ -1,81 +1,98 @@
-import { PackagePriceDetailsRequest, PriceDetail } from "@qite/tide-client";
-import { RootState, store } from "../../store";
+import { RootState } from "../../store";
 import {
   createAsyncThunk,
-  createEntityAdapter,
   createSelector,
   createSlice,
+  PayloadAction,
 } from "@reduxjs/toolkit";
-import { isNil, sum } from "lodash";
+import { sum } from "lodash";
 
 import priceDetailsApi from "./price-details-api";
-import { selectCacheKey } from "../booking/booking-slice";
-import { selectRooms } from "../product-options/rooms-slice";
-import { selectSelectedOptions } from "../product-options/product-options-slice";
-import { selectTravelerAges } from "../travelers-form/travelers-form-slice";
+import { setPackage } from "../booking/booking-slice";
+import {
+  selectBookingPackageBookRequest,
+  selectPackageDetails,
+} from "../booking/selectors";
+import {
+  BookingPriceDetail,
+  BookingPriceDetails,
+  BookingProductNotification,
+} from "@qite/tide-client/build/types";
+import { updatePackageDetails } from "./util";
+
+export interface PriceDetailsState {
+  priceDetails: BookingPriceDetail[];
+  notifications: BookingProductNotification[];
+  deposit?: number;
+  isBusy: boolean;
+}
 
 export const fetchPriceDetails = createAsyncThunk(
   "priceDetails/fetchPriceDetails",
-  async (request?: PackagePriceDetailsRequest) => {
-    if (!isNil(request)) {
-      return await priceDetailsApi.fetchPriceDetails(request);
-    } else {
-      const state = store.getState();
-      const cacheKey = selectCacheKey(state) ?? "";
-      const optionGuids = selectSelectedOptions(state).map(
-        (option) => option.guid
-      );
-      const travelerAges = selectTravelerAges(state);
-      const rooms = selectRooms(state);
+  async (_, { dispatch, getState, signal }) => {
+    dispatch(setFetchingPriceDetails(true));
+    dispatch(resetPriceDetails());
 
-      if (rooms.length === 0) {
-        throw Error("No rooms available.");
-      }
+    const state = getState() as RootState;
+
+    const request = selectBookingPackageBookRequest(state);
 
-      return await priceDetailsApi.fetchPriceDetails({
-        packageSearchResultCacheKey: cacheKey,
-        officeId: 1,
-        language: "nl-BE",
-        optionGuids,
-        rooms: [{ id: rooms[0].id, travelerAges: travelerAges }],
-      });
+    if (!request) {
+      throw Error("Product not available.");
     }
-  }
-);
 
-const priceDetailsAdapter = createEntityAdapter<PriceDetail>({
-  selectId: (priceDetail) =>
-    `${priceDetail.productCode}_${priceDetail.priceDescription}`,
-  sortComparer: (a, b) => {
-    const productCodeComparison = a.productCode.localeCompare(b.productCode);
+    const priceDetails: BookingPriceDetails =
+      await priceDetailsApi.fetchPriceDetails(request, signal);
+
+    dispatch(setFetchingPriceDetails(false));
 
-    if (productCodeComparison !== 0) {
-      return productCodeComparison;
+    const packageDetails = selectPackageDetails(state);
+    if (packageDetails) {
+      const updatedPackageDetails = updatePackageDetails(
+        packageDetails,
+        priceDetails.changedLines
+      );
+      dispatch(setPackage(updatedPackageDetails));
     }
 
-    return a.priceDescription.localeCompare(b.priceDescription);
-  },
-});
+    return priceDetails;
+  }
+);
 
 const priceDetailsSlice = createSlice({
   name: "priceDetails",
-  initialState: priceDetailsAdapter.getInitialState(),
-  reducers: {},
+  initialState: <PriceDetailsState>{
+    priceDetails: [],
+    notifications: [],
+    isBusy: false,
+  },
+  reducers: {
+    setFetchingPriceDetails(state, action: PayloadAction<boolean>) {
+      state.isBusy = action.payload;
+    },
+    setNotifications(
+      state,
+      action: PayloadAction<BookingProductNotification[]>
+    ) {
+      state.notifications = action.payload;
+    },
+    resetPriceDetails(state, _: PayloadAction<void>) {
+      state.priceDetails = [];
+    },
+  },
   extraReducers: (builder) => {
     builder.addCase(fetchPriceDetails.fulfilled, (state, action) => {
       if (action.payload) {
-        priceDetailsAdapter.setAll(state, action.payload);
+        state.deposit = action.payload.deposit;
+        state.priceDetails = action.payload.details;
+        state.notifications = action.payload.notifications;
       }
     });
   },
 });
 
-const priceDetailsSelectors = priceDetailsAdapter.getSelectors<RootState>(
-  (state) => state.priceDetails
-);
-
-export const selectPriceDetails = () =>
-  priceDetailsSelectors.selectAll(store.getState());
+export const selectPriceDetails = (state: RootState) =>
+  state.priceDetails.priceDetails;
 
 export const selectPackagePriceDetails = createSelector(
   selectPriceDetails,
@@ -116,4 +133,17 @@ export const selectTotalPrice = createSelector(
     ])
 );
 
+export const selectDeposit = (state: RootState) => state.priceDetails.deposit;
+
+export const selectIsFetchingPriceDetails = (state: RootState) =>
+  state.priceDetails.isBusy;
+
+export const selectNotifications = (state: RootState) =>
+  state.priceDetails.notifications;
+
+const { setFetchingPriceDetails } = priceDetailsSlice.actions;
+
+export const { resetPriceDetails, setNotifications } =
+  priceDetailsSlice.actions;
+
 export default priceDetailsSlice.reducer;

package/src/booking-wizard/features/price-details/util.ts

@@ -0,0 +1,135 @@
+import {
+  BookingPackage,
+  ChangedLine,
+  BookingOptionPax,
+  BookingOptionGroup,
+  PerPaxPackageOption,
+  BookingOptionUnit,
+  PerUnitPackageOption,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import { BookingPackageOption } from "@qite/tide-client/build/types/offer/booking-v2/shared/booking-package-option";
+
+export const updatePackageDetails = (
+  packageDetails: BookingPackage,
+  changedLines: ChangedLine[]
+): BookingPackage => {
+  return {
+    ...packageDetails,
+    options: packageDetails.options.map((opt) => {
+      return {
+        ...opt,
+        groups: opt.isSelected
+          ? updateBookingGroups(opt.groups, changedLines)
+          : opt.groups,
+        optionUnits: opt.isSelected
+          ? updateOptionUnits(opt.optionUnits, changedLines)
+          : opt.optionUnits,
+        optionPax: opt.isSelected
+          ? updateOptionPax(opt.optionPax, changedLines)
+          : opt.optionPax,
+      } as BookingPackageOption;
+    }),
+  };
+};
+
+// PAX
+const updateOptionPax = (
+  pax: BookingOptionPax[],
+  changedLines: ChangedLine[]
+): BookingOptionPax[] => {
+  return pax.map((p) => ({
+    ...p,
+    groups: updatePaxGroups(p.groups, changedLines),
+  }));
+};
+
+const updatePaxGroups = (
+  groups: BookingOptionGroup<PerPaxPackageOption>[],
+  changedLines: ChangedLine[]
+): BookingOptionGroup<PerPaxPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updatePaxGroups(o.groups, changedLines),
+      line: {
+        ...o.line,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)
+            ?.price ?? o.line.price,
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)
+            ?.price ?? a.price,
+      })),
+    })),
+  }));
+};
+
+// UNITS
+const updateOptionUnits = (
+  units: BookingOptionUnit[],
+  changedLines: ChangedLine[]
+): BookingOptionUnit[] => {
+  return units.map((u) => ({
+    ...u,
+    groups: updateUnitGroups(u.groups, changedLines),
+  }));
+};
+
+const updateUnitGroups = (
+  groups: BookingOptionGroup<PerUnitPackageOption>[],
+  changedLines: ChangedLine[]
+): BookingOptionGroup<PerUnitPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updateUnitGroups(o.groups, changedLines),
+      pax: updateOptionPax(o.pax, changedLines),
+      line: {
+        ...o.line,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)
+            ?.price ?? o.line.price,
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)
+            ?.price ?? a.price,
+      })),
+    })),
+  }));
+};
+
+// BOOKING
+const updateBookingGroups = (
+  groups: BookingOptionGroup<PerBookingPackageOption>[],
+  changedLines: ChangedLine[]
+): BookingOptionGroup<PerBookingPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updateBookingGroups(o.groups, changedLines),
+      units: updateOptionUnits(o.units, changedLines),
+      pax: updateOptionPax(o.pax, changedLines),
+      line: {
+        ...o.line,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)
+            ?.price ?? o.line.price,
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price:
+          changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)
+            ?.price ?? a.price,
+      })),
+    })),
+  }));
+};

package/src/booking-wizard/features/product-options/no-options.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Message from "../../components/message";
+import translations from "../../translations/translations.json";
+
+const NoOptions = () => {
+  return (
+    <div className="form__group">
+      <Message
+        type="success"
+        title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}
+      >
+        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
+      </Message>
+    </div>
+  );
+};
+
+export default NoOptions;

package/src/booking-wizard/features/product-options/none-option.tsx

@@ -0,0 +1,118 @@
+import {
+  BookingOptionGroup,
+  PerBookingPackageOption,
+  PerPaxPackageOption,
+  PerUnitPackageOption,
+} from "@qite/tide-client/build/types";
+import React from "react";
+import { buildClassName } from "../../utils/class-util";
+import translations from "../../translations/translations.json";
+import { formatPrice } from "../../utils/localization-util";
+
+interface NoneOptionProps {
+  group:
+    | BookingOptionGroup<PerBookingPackageOption>
+    | BookingOptionGroup<PerUnitPackageOption>
+    | BookingOptionGroup<PerPaxPackageOption>;
+  parentId: string;
+  handleNoneSelectionChanged: () => void;
+}
+
+const NoneOption: React.FC<NoneOptionProps> = ({
+  group,
+  parentId,
+  handleNoneSelectionChanged,
+}) => {
+  const selectedOption = group.options.find((x) => x.isSelected);
+  const showNoneOption = group.options.some((x) => x.requirementType === 2);
+  const noneSelected = !selectedOption;
+  const priceDifferencetext = selectedOption
+    ? `- ${formatPrice(Math.abs(selectedOption.line.price))}`
+    : "";
+
+  return (
+    <>
+      {showNoneOption && (
+        <tr>
+          <td>
+            <div
+              className={buildClassName([
+                "tree",
+                noneSelected && "tree--selected",
+              ])}
+            >
+              <div className="tree__level">
+                <div className="tree__header">
+                  <div className="tree__description-collapse">
+                    <div className="radiobutton">
+                      <div className="radiobutton__label">
+                        <input
+                          type="radio"
+                          value={undefined}
+                          id={`${parentId}_NONE`}
+                          name={parentId}
+                          className={buildClassName([
+                            "radiobutton__input",
+                            "radiobutton__input--parent",
+                          ])}
+                          defaultChecked={noneSelected}
+                          onChange={handleNoneSelectionChanged}
+                        ></input>
+                        <span className="radiobutton__label-text">
+                          <div className="date-list">
+                            <span
+                              className={buildClassName([
+                                "date-list__item",
+                                "date-list__item--none",
+                              ])}
+                            ></span>
+                          </div>
+                        </span>
+                        <div className="tree__columns-actions">
+                          <div className="tree__columns">
+                            <div className="tree__column">
+                              <label
+                                htmlFor={`${parentId}_NONE`}
+                                className={buildClassName([
+                                  "tree__product-name",
+                                  "tree__product-name--none",
+                                ])}
+                              >
+                                {translations.OPTIONS_FORM.NONE}
+                              </label>
+                            </div>
+                            <div className="tree__column"></div>
+                            <div className="tree__column"></div>
+                            <div
+                              className={buildClassName([
+                                "tree__column",
+                                "tree__column--price",
+                              ])}
+                            >
+                              {!noneSelected && (
+                                <span
+                                  className={buildClassName([
+                                    "price",
+                                    "price--decrease",
+                                  ])}
+                                >
+                                  {priceDifferencetext}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+export default NoneOption;