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

package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx

@@ -0,0 +1,57 @@
+import {
+  BookingOptionGroup,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+import SummaryBookingOptionPax from "./summary-booking-option-pax";
+import SummaryBookingOptionUnit from "./summary-booking-option-unit";
+
+interface SummaryPerBookingOptionGroupProps {
+  group: BookingOptionGroup<PerBookingPackageOption>;
+}
+
+const SummaryPerBookingOptionGroup: React.FC<
+  SummaryPerBookingOptionGroupProps
+> = ({ group }) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  return (
+    <li className="list__item">
+      <h6>{group.title}</h6>
+
+      <ul className="list">
+        {groupOptions.map((opt) => (
+          <li key={opt.line.entryLineGuid} className="list__item">
+            {opt.line.productName}
+            {": "}
+            {opt.line.accommodationName}
+            {!isNil(opt.line?.regimeName) && ", "}
+            {opt.line.regimeName}
+            <br />
+            {getDateText(opt.line.startDate)}
+            {opt.line.startDate != opt.line.endDate
+              ? ` > ${getDateText(opt.line.endDate)}`
+              : ""}
+
+            <ul>
+              {!isEmpty(opt?.groups) &&
+                opt?.groups.map((x) => {
+                  if (!x.options.some((y) => y.isSelected)) return;
+
+                  return <SummaryPerBookingOptionGroup group={x} />;
+                })}
+              {!isEmpty(opt?.units) &&
+                opt?.units.map((x) => <SummaryBookingOptionUnit unit={x} />)}
+              {!isEmpty(opt?.pax) &&
+                opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+};
+
+export default SummaryPerBookingOptionGroup;

package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx

@@ -0,0 +1,51 @@
+import {
+  BookingOptionGroup,
+  PerPaxPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+
+interface SummaryPerPaxOptionGroupProps {
+  group: BookingOptionGroup<PerPaxPackageOption>;
+}
+
+const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps> = ({
+  group,
+}) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  return (
+    <li className="list__item">
+      <h6>{group.title}</h6>
+
+      <ul className="list">
+        {groupOptions.map((opt) => (
+          <li key={opt.line.entryLineGuid} className="list__item">
+            {opt.line.productName}
+            {": "}
+            {opt.line.accommodationName}
+            {!isNil(opt.line?.regimeName) && ", "}
+            {opt.line.regimeName}
+            <br />
+            {getDateText(opt.line.startDate)}
+            {opt.line.startDate != opt.line.endDate
+              ? ` > ${getDateText(opt.line.endDate)}`
+              : ""}
+
+            <ul className="list">
+              {!isEmpty(opt?.groups) &&
+                opt?.groups.map((x) => {
+                  if (!x.options.some((y) => y.isSelected)) return;
+
+                  return <SummaryPerPaxOptionGroup group={x} />;
+                })}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+};
+
+export default SummaryPerPaxOptionGroup;

package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx

@@ -0,0 +1,54 @@
+import {
+  BookingOptionGroup,
+  PerUnitPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+import SummaryBookingOptionPax from "./summary-booking-option-pax";
+
+interface SummaryPerUnitOptionGroupProps {
+  group: BookingOptionGroup<PerUnitPackageOption>;
+}
+
+const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps> = ({
+  group,
+}) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  return (
+    <li className="list__item">
+      <h6>{group.title}</h6>
+
+      <ul className="list">
+        {groupOptions.map((opt) => (
+          <li key={opt.line.entryLineGuid} className="list__item">
+            {opt.line.productName}
+            {": "}
+            {opt.line.accommodationName}
+            {!isNil(opt.line?.regimeName) && ", "}
+            {opt.line.regimeName}
+            <br />
+            {getDateText(opt.line.startDate)}
+            {opt.line.startDate != opt.line.endDate
+              ? ` > ${getDateText(opt.line.endDate)}`
+              : ""}
+
+            <ul>
+              {!isEmpty(opt?.groups) &&
+                opt?.groups.map((x) => {
+                  if (!x.options.some((y) => y.isSelected)) return;
+
+                  return <SummaryPerUnitOptionGroup group={x} />;
+                })}
+              {!isEmpty(opt?.pax) &&
+                opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+};
+
+export default SummaryPerUnitOptionGroup;

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

@@ -1,25 +1,6 @@
-import {
-  Address,
-  Gender,
-  PackageBookRequestRoom,
-  PackageBookRequest,
-  Pax,
-} from "@qite/tide-client";
-import { PayloadAction, createSelector, createSlice } from "@reduxjs/toolkit";
-import {
-  selectAdults,
-  selectChildren,
-  selectMainBookerId,
-  selectTravelersFormValues,
-} from "../travelers-form/travelers-form-slice";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 import { RootState } from "../../store";
-import { first } from "lodash";
-import parseISO from "date-fns/parseISO";
-import { selectCacheKey } from "../booking/booking-slice";
-import { selectRooms } from "../product-options/rooms-slice";
-import { v4 as uuid } from "uuid";
-import { selectSelectedOptions } from "../product-options/product-options-slice";
 
 export interface SummaryState {
   userValidated: boolean;
@@ -44,118 +25,4 @@ export const { setUserValidated } = summarySlice.actions;
 export const selectUserValidated = (state: RootState) =>
   state.summary.userValidated;
 
-const selectBookRequestTravelers = createSelector(
-  selectAdults,
-  selectChildren,
-  selectMainBookerId,
-  selectTravelersFormValues,
-  (adults, children, mainBookerId, travelersFormValues) =>
-    [...adults, ...children].map((traveler) => {
-      let pax: Pax = {
-        id: parseInt(traveler.id),
-        firstName: traveler.firstName,
-        lastName: traveler.lastName,
-        dateOfBirth: parseISO(traveler.birthDate),
-        gender: parseGender(traveler.gender),
-        isMainBooker: traveler.id === mainBookerId,
-        guid: uuid(),
-      };
-
-      if (pax.isMainBooker) {
-        pax.phone = travelersFormValues?.phone;
-        pax.mobile = travelersFormValues?.phone;
-        pax.email = travelersFormValues?.email;
-      }
-
-      return pax;
-    })
-);
-
-const selectBookRequestRooms = createSelector(
-  selectBookRequestTravelers,
-  selectRooms,
-  (travelers, rooms) => {
-    const firstRoom = first(rooms);
-
-    if (!firstRoom) {
-      return undefined;
-    }
-
-    return <PackageBookRequestRoom[]>[
-      {
-        id: firstRoom.id,
-        travelers: travelers,
-      },
-    ];
-  }
-);
-
-const selectBookRequestAddress = createSelector(
-  selectAdults,
-  selectChildren,
-  selectMainBookerId,
-  selectTravelersFormValues,
-  (adults, children, mainBookerId, travelersFormValues) => {
-    const mainBooker = [...adults, ...children].find(
-      (traveler) => traveler.id === mainBookerId
-    );
-
-    if (!travelersFormValues || !mainBooker) {
-      return undefined;
-    }
-
-    const address: Address = {
-      name: `${mainBooker.firstName} ${mainBooker.lastName}`,
-      street: travelersFormValues.street,
-      number: travelersFormValues.houseNumber,
-      postalCode: travelersFormValues.zipCode,
-      location: travelersFormValues.place,
-      country: travelersFormValues.country,
-      mobilePhone: travelersFormValues.phone,
-      email: travelersFormValues.email,
-    };
-
-    return address;
-  }
-);
-
-const selectBookRequestOptionGuids = createSelector(
-  selectSelectedOptions,
-  (selectedOptions) =>
-    selectedOptions.map((selectedOption) => selectedOption.guid)
-);
-
-export const selectBookRequest = createSelector(
-  selectCacheKey,
-  selectBookRequestRooms,
-  selectBookRequestAddress,
-  selectBookRequestOptionGuids,
-  (cacheKey, rooms, address, optionGuids) => {
-    if (!cacheKey || !rooms || !address) {
-      return undefined;
-    }
-
-    return <PackageBookRequest>{
-      packageSearchResultCacheKey: cacheKey,
-      officeId: 1,
-      language: "nl-BE",
-      rooms,
-      address,
-      optionGuids,
-    };
-  }
-);
-
 export default summarySlice.reducer;
-
-const parseGender = (gender: string): number => {
-  switch (gender) {
-    case "m":
-      return Gender.male;
-    case "f":
-      return Gender.female;
-    case "x":
-    default:
-      return Gender.other;
-  }
-};