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

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

@@ -0,0 +1,100 @@
+import {
+  BookingOptionGroup,
+  BookingOptionUnit,
+  PerUnitPackageOption,
+} from "@qite/tide-client/build/types";
+import React, { useEffect, useState } from "react";
+import { buildClassName } from "../../utils/class-util";
+import translations from "../../translations/translations.json";
+import OptionUnitGroup from "./option-unit-group";
+
+interface OptionUnitsCardProps {
+  units: BookingOptionUnit[];
+  parentIndex?: number;
+  onUnitsChange?: (units: BookingOptionUnit[], index?: number) => void;
+}
+
+const OptionUnitsCard: React.FC<OptionUnitsCardProps> = ({
+  units,
+  parentIndex,
+  onUnitsChange,
+}) => {
+  const [toggleStates, setToggleStates] = useState<boolean[]>();
+
+  useEffect(() => {
+    if (!toggleStates || toggleStates.length !== units.length) {
+      setToggleStates(units.map(() => true));
+    }
+  }, [units, toggleStates, setToggleStates]);
+
+  const getUnitPaxLabel = (unitIndex: number) => {
+    return "";
+  };
+
+  const onGroupChange = (
+    group: BookingOptionGroup<PerUnitPackageOption>,
+    unitIndex: number
+  ) => {
+    const updatedUnits = units.map((u) => {
+      return u.index !== unitIndex
+        ? u
+        : {
+            ...u,
+            groups: u.groups.map((ug) => {
+              return ug.name !== group.name ? ug : group;
+            }),
+          };
+    });
+
+    if (onUnitsChange) onUnitsChange(updatedUnits, parentIndex);
+  };
+
+  return (
+    <>
+      {units.map((u, i) => (
+        <div
+          className={buildClassName([
+            "booking-card__group",
+            toggleStates && toggleStates[i] && "booking-card__group--active",
+          ])}
+        >
+          <div className="booking-card__group-header">
+            <h3 className="booking-card__body-heading">
+              {translations.OPTIONS_FORM.UNIT_TITLE} {u.index + 1}
+            </h3>
+            <p>{getUnitPaxLabel(u.index)}</p>
+            <div className="booking-card__actions">
+              <button
+                type="button"
+                className="booking-card__toggle"
+                onClick={() => {
+                  setToggleStates(
+                    toggleStates?.map((s, si) => (si == i ? !s : s))
+                  );
+                }}
+              ></button>
+            </div>
+          </div>
+          {toggleStates &&
+            toggleStates[i] &&
+            u.groups.map(
+              (ug) =>
+                ug && (
+                  <OptionUnitGroup
+                    key={ug.name}
+                    unitIndex={u.index}
+                    group={ug}
+                    firstClassName={"booking-card__group-body"}
+                    secondClassName={"booking-card__group-heading"}
+                    parentId={`${u.index}_${ug.name}`}
+                    onGroupChange={onGroupChange}
+                  />
+                )
+            )}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default OptionUnitsCard;

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

@@ -1,76 +1,254 @@
 import React, { useContext } from "react";
 
 import SettingsContext from "../../settings-context";
-import TreeLevel from "./tree-level";
-import { compact } from "lodash";
+import { isEmpty } from "lodash";
 import { navigate, Link } from "@reach/router";
-import { selectBookingQueryString } from "../booking/booking-slice";
-import { selectOptions } from "./product-options-slice";
+import {
+  setPackageGroups,
+  setPackageOptionPax,
+  setPackageOptionUnits,
+  setPackageRooms,
+} from "../booking/booking-slice";
+import {
+  selectBookingPackagePax,
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageGroups,
+  selectPackageOptionPax,
+  selectPackageOptionUnits,
+  selectPackageRooms,
+  selectRequestRooms,
+} from "../booking/selectors";
 import { selectTravelersFormValues } from "../travelers-form/travelers-form-slice";
 import translations from "../../translations/translations.json";
 import { useSelector } from "react-redux";
+import { buildClassName } from "../../utils/class-util";
+import NoOptions from "./no-options";
+import { useAppDispatch } from "../../store";
+import OptionRoom from "./option-room";
+import { fetchPriceDetails } from "../price-details/price-details-slice";
+import OptionPaxCard from "./option-pax-card";
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingOptionUnit,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import OptionUnitsCard from "./option-units-card";
+import OptionBookingGroup from "./option-booking-group";
 
 interface OptionsFormProps {}
 
 const OptionsForm: React.FC<OptionsFormProps> = () => {
-  const settings = useContext(SettingsContext);
+  const { basePath, summary, loaderComponent } = useContext(SettingsContext);
 
+  const dispatch = useAppDispatch();
   const travelerFormValues = useSelector(selectTravelersFormValues);
-  const productOptions = useSelector(selectOptions);
+  console.log("travelerFormValues", travelerFormValues);
+  const requestRooms = useSelector(selectRequestRooms);
+  const pax = useSelector(selectBookingPackagePax);
+  const packageRooms = useSelector(selectPackageRooms);
   const bookingQueryString = useSelector(selectBookingQueryString);
+  const isLoading = useSelector(selectIsFetchingProductOptions);
 
-  if (!travelerFormValues) {
-    navigate(settings.basePath);
+  const groups = useSelector(selectPackageGroups);
+  const optionUnits = useSelector(selectPackageOptionUnits);
+  const optionPax = useSelector(selectPackageOptionPax);
+
+  if (!packageRooms) {
+    navigate(`${basePath}?${bookingQueryString}`);
   }
 
-  const topLevelProductOptions = compact(
-    Object.values(productOptions).filter(
-      (productOption) => productOption?.parentCode === undefined
-    )
-  );
+  const getRoomPax = (index: number) => {
+    var room = requestRooms?.find((x) => x.index == index);
+    return pax.filter((x) => room?.pax.some((y) => y.id == x.id));
+  };
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    navigate(
-      `${settings.basePath}${settings.summaryPathSuffix}?${bookingQueryString}`
-    );
-
+    navigate(`${basePath}${summary.pathSuffix}?${bookingQueryString}`);
     e.preventDefault();
   };
 
+  const handleOnRoomChange = (
+    index: number,
+    accommodationCode: string,
+    regimeCode: string
+  ) => {
+    if (!packageRooms) return;
+
+    const updatedPackageRooms = packageRooms.map((room) => {
+      if (room.index !== index) return room;
+
+      return {
+        ...room,
+        options: room.options.map((option) => {
+          return {
+            ...option,
+            isSelected:
+              option.accommodationCode === accommodationCode &&
+              option.regimeCode === regimeCode,
+          };
+        }),
+      };
+    });
+
+    dispatch(setPackageRooms(updatedPackageRooms));
+    dispatch(fetchPriceDetails());
+  };
+
+  const handleOnPaxChange = (pax: BookingOptionPax[]) => {
+    dispatch(setPackageOptionPax(pax));
+    dispatch(fetchPriceDetails());
+  };
+
+  const handleOnUnitsChange = (units: BookingOptionUnit[]) => {
+    dispatch(setPackageOptionUnits(units));
+    dispatch(fetchPriceDetails());
+  };
+
+  const handleOnGroupChange = (
+    group: BookingOptionGroup<PerBookingPackageOption>
+  ) => {
+    if (groups) {
+      const updatedGroups = groups?.map((g) =>
+        g.name === group.name ? group : g
+      );
+
+      dispatch(setPackageGroups(updatedGroups));
+      dispatch(fetchPriceDetails());
+    }
+  };
+
   return (
-    <form className="form" noValidate onSubmit={handleSubmit}>
-      <div className="form__region">
-        <div className="form__row">
-          {topLevelProductOptions.map((productOption) => (
-            <div className="form__group" key={productOption?.code}>
-              <table className="table table--striped">
-                <tbody>
-                  <tr>
-                    <td>
-                      <div className="tree">
-                        <TreeLevel productOption={productOption} />
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+    <>
+      <form
+        className="form"
+        name="booking--step2"
+        id="booking--step2"
+        noValidate
+        onSubmit={handleSubmit}
+      >
+        {isLoading && loaderComponent}
+        {!isLoading && (
+          <div className="form__region">
+            <div className="form__group">
+              <div className="booking-card">
+                <div className="booking-card__body">
+                  <div
+                    className={buildClassName([
+                      "booking-card__group",
+                      "booking-card__group--package",
+                    ])}
+                  >
+                    <span className="booking-card__tag">
+                      {translations.OPTIONS_FORM.PACKAGE}
+                    </span>
+                    <div className="booking-card__group-body">
+                      <table className="table table--striped">
+                        <tbody>
+                          {packageRooms &&
+                            packageRooms.map((room) => (
+                              <OptionRoom
+                                key={room.index}
+                                packageRoom={room}
+                                pax={getRoomPax(room.index)}
+                                onRoomChange={handleOnRoomChange}
+                              />
+                            ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-          ))}
+
+            {optionUnits && !isEmpty(optionUnits) && (
+              <div className="form__group">
+                <div className="booking-card">
+                  <div className="booking-card__header">
+                    <h2 className="booking-card__header-heading">
+                      {translations.OPTIONS_FORM.PER_UNIT_TITLE}
+                    </h2>
+                  </div>
+                  <div className="booking-card__body">
+                    <OptionUnitsCard
+                      units={optionUnits}
+                      onUnitsChange={handleOnUnitsChange}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {optionPax && !isEmpty(optionPax) && (
+              <div className="form__group">
+                <div className="booking-card">
+                  <div className="booking-card__header">
+                    <h2 className="booking-card__header-heading">
+                      {translations.OPTIONS_FORM.PER_PAX_TITLE}
+                    </h2>
+                  </div>
+                  <div className="booking-card__body">
+                    <OptionPaxCard
+                      pax={optionPax}
+                      onPaxChange={handleOnPaxChange}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {groups && !isEmpty(groups) && (
+              <div className="form__group">
+                <div className="booking-card">
+                  <div className="booking-card__header">
+                    <h2 className="booking-card__header-heading">
+                      {translations.OPTIONS_FORM.PER_BOOKING_TITLE}
+                    </h2>
+                  </div>
+                  <div className="booking-card__body">
+                    <div className="tree__body">
+                      {groups.map((group, i) => (
+                        <OptionBookingGroup
+                          key={`${group.name}_${i}`}
+                          group={group}
+                          firstClassName={"tree__level"}
+                          secondClassName={"tree__level-heading"}
+                          parentId={`booking_${group.name}`}
+                          onGroupChange={handleOnGroupChange}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {isEmpty(groups) && isEmpty(optionUnits) && isEmpty(optionPax) && (
+              <NoOptions />
+            )}
+          </div>
+        )}
+        <div className="booking__navigator">
+          <Link
+            to={`${basePath}?${bookingQueryString}`}
+            title={translations.STEPS.PREVIOUS}
+            className="cta cta--secondary"
+          >
+            {translations.STEPS.PREVIOUS}
+          </Link>
+          <button
+            type="submit"
+            title={translations.STEPS.NEXT}
+            disabled={isLoading}
+            className={buildClassName(["cta", isLoading && "cta--disabled"])}
+          >
+            {translations.STEPS.NEXT}
+          </button>
         </div>
-      </div>
-      <div className="booking__navigator">
-        <Link
-          to={`${settings.basePath}?${bookingQueryString}`}
-          title={translations.STEPS.PREVIOUS}
-          className="cta cta--secondary"
-        >
-          {translations.STEPS.PREVIOUS}
-        </Link>
-        <button type="submit" title={translations.STEPS.NEXT} className="cta">
-          {translations.STEPS.NEXT}
-        </button>
-      </div>
-    </form>
+      </form>
+    </>
   );
 };
 

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

@@ -1,14 +1,19 @@
 import {
   selectDepartureFlight,
+  selectIsFetchingProductOptions,
+  selectIsOnRequest,
+  selectPackageRooms,
   selectReturnFlight,
-} from "../product-options/product-options-slice";
-import { getDateText, getFlightText, getTravelersText } from "./sidebar-util";
+} from "../booking/selectors";
+import { getDateText, getTravelersText } from "./sidebar-util";
 import {
-  selectAdultCount,
-  selectChildCount,
+  selectAdultIds,
+  selectChildIds,
 } from "../travelers-form/travelers-form-slice";
 import {
   selectBasePrice,
+  selectDeposit,
+  selectIsFetchingPriceDetails,
   selectSeparateExtraPriceDetails,
   selectSeparatePackagePriceDetails,
   selectTotalPrice,
@@ -18,38 +23,56 @@ import { useSelector } from "react-redux";
 import React from "react";
 import SettingsContext from "../../settings-context";
 import Sidebar from "./sidebar";
-import { selectBookingAttributes } from "../booking/booking-slice";
+import { selectBookingAttributes } from "../booking/selectors";
 import { useContext } from "react";
 
-const SidebarContainer: React.FC = () => {
-  const {
-    showSidebarAccommodationInfo,
-    showSidebarDeposit,
-    sidebarHeaderComponent,
-    sidebarFooterComponent,
-  } = useContext(SettingsContext);
+interface SidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+}
+
+const SidebarContainer: React.FC<SidebarProps> = ({
+  productName,
+  thumbnailUrl,
+}) => {
+  const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent } =
+    useContext(SettingsContext);
   const bookingAttributes = useSelector(selectBookingAttributes);
-  const adultCount = useSelector(selectAdultCount);
-  const childCount = useSelector(selectChildCount);
-  const travelersText = getTravelersText(adultCount, childCount);
+  const adultIds = useSelector(selectAdultIds);
+  const childIds = useSelector(selectChildIds);
+  const travelersText = getTravelersText(adultIds, childIds);
   const departureFlight = useSelector(selectDepartureFlight);
   const returnFlight = useSelector(selectReturnFlight);
+  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
+  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
+  const accommodations = useSelector(selectPackageRooms);
+
+  const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
 
   return (
     <Sidebar
+      productName={productName}
+      thumbnailUrl={thumbnailUrl}
+      isLoading={isLoading}
       startDateText={getDateText(bookingAttributes?.startDate)}
-      endDateText={getDateText(bookingAttributes?.endDate)}
+      endDateText={
+        bookingAttributes?.startDate !== bookingAttributes?.endDate
+          ? getDateText(bookingAttributes?.endDate)
+          : undefined
+      }
       travelersText={travelersText}
-      departureFlightText={getFlightText(departureFlight)}
-      returnFlightText={getFlightText(returnFlight)}
+      departureFlight={departureFlight}
+      returnFlight={returnFlight}
       basePrice={useSelector(selectBasePrice)}
       totalPrice={useSelector(selectTotalPrice)}
       includedCosts={useSelector(selectSeparatePackagePriceDetails)}
       extraCosts={useSelector(selectSeparateExtraPriceDetails)}
-      showAccommodationInfo={showSidebarAccommodationInfo}
-      showDeposit={showSidebarDeposit}
+      accommodations={accommodations}
+      deposit={useSelector(selectDeposit)}
+      isOnRequest={useSelector(selectIsOnRequest)}
       headerComponent={sidebarHeaderComponent ?? undefined}
       footerComponent={sidebarFooterComponent ?? undefined}
+      loaderComponent={loaderComponent ?? undefined}
     />
   );
 };

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

@@ -0,0 +1,66 @@
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import { first, last } from "lodash";
+import React from "react";
+import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
+import translations from "../../translations/translations.json";
+
+interface SidebarFlightProps {
+  title: string;
+  flight: BookingPackageFlight;
+}
+
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
+  const flightLines = parseFlightLines(flight.flightMetaData);
+  const firstFlight = first(flightLines);
+  const lastFlight = last(flightLines);
+
+  return (
+    <div className="pricing-summary__group">
+      <h6 className="pricing-summary__title">{title}</h6>
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_DEPARTURE}
+        </div>
+        <div className="pricing-summary__value">
+          {firstFlight?.departureAirportDescription} (
+          {firstFlight?.departureAirportIata})<br />
+          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_ARRIVAL}
+        </div>
+        <div className="pricing-summary__value">
+          {lastFlight?.arrivalAirportDescription} (
+          {lastFlight?.arrivalAirportIata})<br />
+          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {flight.flightMetaData.flightLines.length > 1 && (
+            <i>
+              {flight.flightMetaData.flightLines.length - 1}
+              {"x "}
+              {translations.SIDEBAR.CHANGES}
+            </i>
+          )}
+        </div>
+        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
+      </div>
+      {flight.flightMetaData.luggageIncluded && (
+        <div className="pricing-summary__row">
+          <div className="pricing-summary__property"></div>
+          <div className="pricing-summary__value">
+            {translations.SIDEBAR.LUGGAGE_INCLUDED}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SidebarFlight;