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

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

@@ -1,55 +1,103 @@
-import { createPackageOfferWithShortResponse } from "@qite/tide-client";
+import { book, validateVoucher } from "@qite/tide-client";
 import {
-  selectAdultCount,
   selectAdults,
-  selectChildCount,
   selectChildren,
   selectTravelersFormValues,
 } from "../travelers-form/travelers-form-slice";
+import { selectUserValidated, setUserValidated } from "./summary-slice";
 import {
-  selectBookRequest,
-  selectUserValidated,
-  setUserValidated,
-} from "./summary-slice";
-import {
-  selectBookingQueryString,
   setBookingNumber,
+  setBookingRemarks,
+  setVoucherCodes,
 } from "../booking/booking-slice";
-import { useDispatch, useSelector } from "react-redux";
-
+import { useSelector } from "react-redux";
+import { useLocation } from "@reach/router";
 import Icon from "../../components/icon";
-import React from "react";
+import React, { useEffect } from "react";
 import SettingsContext from "../../settings-context";
 import { buildClassName } from "../../utils/class-util";
-import { compact } from "lodash";
+import { compact, findIndex, isEmpty, isNil } from "lodash";
 import { Link, navigate } from "@reach/router";
 import translations from "../../translations/translations.json";
 import { useContext } from "react";
 import { useState } from "react";
 import { buildTideClientConfig } from "../../utils/tide-api-utils";
+import { useAppDispatch } from "../../store";
+import { SummaryCheckbox } from "../../types";
+import {
+  selectActiveOption,
+  selectBookingPackageBookRequest,
+  selectBookingPackageRequest,
+  selectBookingQueryString,
+  selectPackageDetails,
+} from "../booking/selectors";
+import { getDateText } from "../sidebar/sidebar-util";
+import SummaryFlight from "./summary-flight";
+import {
+  fetchPriceDetails,
+  selectNotifications,
+  setNotifications,
+} from "../price-details/price-details-slice";
+import SummaryBookingOptionUnit from "./summary-booking-option-unit";
+import SummaryBookingOptionPax from "./summary-booking-option-pax";
+import SummaryBookingOption from "./summary-per-booking-option-group";
+import {
+  BookingPackageRequest,
+  BookingPackageVoucherRequest,
+} from "@qite/tide-client/build/types";
+
+interface VoucherProps {
+  code?: string;
+  isValidated?: boolean;
+  isValid?: boolean;
+}
 
 interface SummaryProps {}
 
 const Summary: React.FC<SummaryProps> = () => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const settings = useContext(SettingsContext);
 
-  const bookingQueryString = useSelector(selectBookingQueryString);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [checkboxes, setCheckboxes] = useState<
+    SummaryCheckbox[] | undefined | null
+  >(settings.summary.checkboxes);
+  const [remarks, setRemarks] = useState<string>("");
+
+  const [voucher, setVoucher] = useState<VoucherProps>({});
 
+  const bookingQueryString = useSelector(selectBookingQueryString);
   const travelerFormValues = useSelector(selectTravelersFormValues);
+  const packageDetails = useSelector(selectPackageDetails);
+  const activeOption = useSelector(selectActiveOption);
 
-  const adultCount = useSelector(selectAdultCount);
-  const childCount = useSelector(selectChildCount);
+  if (!travelerFormValues)
+    navigate(`${settings.basePath}?${bookingQueryString}`);
 
   const adults = useSelector(selectAdults);
   const children = useSelector(selectChildren);
 
   const userValidated = useSelector(selectUserValidated);
+  const notifications = useSelector(selectNotifications);
+
+  const bookRequest = useSelector(selectBookingPackageBookRequest);
+  const location = useLocation();
+
+  useEffect(() => {
+    // Every checkbox should be checked, or no checkboxes
+    const checkboxesValidated = !isNil(checkboxes)
+      ? checkboxes.every((checkbox) => checkbox.isSelected)
+      : true;
 
-  const bookRequest = useSelector(selectBookRequest);
+    const notificationsValidated = !isNil(notifications)
+      ? notifications
+          .filter((x) => x.hasToBeConfirmed)
+          .every((checkbox) => checkbox.isConfirmed)
+      : true;
+
+    dispatch(setUserValidated(checkboxesValidated && notificationsValidated));
+  }, [checkboxes, notifications]);
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -61,147 +109,486 @@ const Summary: React.FC<SummaryProps> = () => {
       return;
     }
 
+    if (bookRequest.payload.returnPaymentUrl) {
+      bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath}`;
+    }
+
     try {
-      const bookingResponse = await createPackageOfferWithShortResponse(
-        tideClientConfig,
-        bookRequest
-      );
+      const bookingResponse = await book(tideClientConfig, bookRequest);
+
+      // Booking successfull
+      dispatch(setBookingNumber(bookingResponse.number));
 
-      if (bookingResponse.hasErrors) {
-        // Booking not successful
+      if (bookingResponse.paymentUrl) {
+        window.location.href = bookingResponse.paymentUrl;
+      } else {
         navigate(
-          `${settings.basePath}${settings.errorPathSuffix}?${bookingQueryString}`
+          `${settings.basePath}${settings.confirmation.pathSuffix}?${bookingQueryString}`
         );
       }
-
-      // Booking successful
-      dispatch(setBookingNumber(bookingResponse.dossierNumber));
-      navigate(
-        `${settings.basePath}${settings.confirmationPathSuffix}?${bookingQueryString}`
-      );
     } catch (error) {
       // Booking not successful
       navigate(
-        `${settings.basePath}${settings.errorPathSuffix}?${bookingQueryString}`
+        `${settings.basePath}${settings.error.pathSuffix}?${bookingQueryString}`
       );
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleNotificationChange = (id: number, checked: boolean) => {
+    const updatedNotifications = notifications.map((notification) =>
+      notification.id === id
+        ? { ...notification, isConfirmed: checked }
+        : notification
+    );
+
+    dispatch(setNotifications(updatedNotifications));
+  };
+
+  const handleCheckboxChange = (id: string, checked: boolean) => {
+    if (isNil(checkboxes)) {
+      return;
+    }
+
+    const newCheckboxes = [...checkboxes];
+
+    const index = findIndex(checkboxes, (checkbox) => checkbox.id === id);
+    newCheckboxes[index].isSelected = !newCheckboxes[index].isSelected;
+
+    setCheckboxes(newCheckboxes);
+  };
+
+  const handleRemarksChange = (text: string) => {
+    dispatch(setBookingRemarks(text));
+
+    setRemarks(text);
+  };
+
+  const handleValidateVoucher: React.MouseEventHandler<
+    HTMLButtonElement
+  > = async (event) => {
+    if (!voucher?.code) return;
+
+    const request = useSelector(
+      selectBookingPackageRequest
+    ) as BookingPackageRequest<BookingPackageVoucherRequest>;
+    request.payload = {
+      code: voucher.code,
+      otherCodes: bookRequest?.payload.voucherCodes ?? [],
+    } as BookingPackageVoucherRequest;
+
+    const tideClientConfig = buildTideClientConfig();
+
+    if (!tideClientConfig) return;
+
+    const result = await validateVoucher(tideClientConfig, request);
+
+    if (result?.payload) {
+      setVoucher({
+        ...voucher,
+        isValidated: true,
+        isValid: result.payload.isValid,
+      });
+    }
+  };
+
+  const handleAddVoucher: React.MouseEventHandler<HTMLButtonElement> = (
+    event
+  ) => {
+    if (!voucher.isValid) return;
+
+    dispatch(
+      setVoucherCodes(
+        [
+          ...(bookRequest?.payload.voucherCodes ?? []),
+          voucher.code ?? "",
+        ].filter((x) => x !== "")
+      )
+    );
+
+    dispatch(fetchPriceDetails());
+
+    setVoucher({});
+  };
+
+  const handleRemoveVoucher = (code: string) => {
+    dispatch(
+      setVoucherCodes(
+        bookRequest?.payload.voucherCodes?.filter((x) => x !== code) ?? []
+      )
+    );
+
+    dispatch(fetchPriceDetails());
+  };
+
   return (
-    <form
-      className="form"
-      name="booking--step3"
-      id="booking--step3"
-      onSubmit={handleSubmit}
-    >
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <div className="form__region-header">
-              <h5 className="form__region-heading">
-                {translations.STEPS.PERSONAL_DETAILS}
-              </h5>
-              <p className="form__region-label">
-                {adultCount + childCount} {translations.SUMMARY.TRAVELERS}:{" "}
-                {compact([
-                  adultCount && `${adultCount} volwassenen`,
-                  childCount && `${childCount} kinderen`,
-                ]).join(", ")}
-              </p>
+    <>
+      {isSubmitting && settings.loaderComponent}
+      {!isSubmitting && (
+        <form
+          className="form"
+          name="booking--step3"
+          id="booking--step3"
+          onSubmit={handleSubmit}
+        >
+          <div className="form__region">
+            <div className="form__row">
+              <div className="form__group">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">
+                    {translations.SUMMARY.PERSONAL_DETAILS}
+                  </h5>
+                  <p className="form__region-label">
+                    {`${adults.length + children.length} ${
+                      adults.length + children.length === 1
+                        ? translations.SUMMARY.TRAVELER
+                        : translations.SUMMARY.TRAVELERS
+                    }: ${compact([
+                      adults.length,
+                      adults.length === 1 && ` ${translations.SUMMARY.ADULT}`,
+                      adults.length > 1 && ` ${translations.SUMMARY.ADULTS}`,
+                      adults &&
+                        adults.length &&
+                        children &&
+                        children.length &&
+                        ", ",
+                      children.length,
+                      children.length === 1 && ` ${translations.SUMMARY.CHILD}`,
+                      children.length > 1 &&
+                        ` ${translations.SUMMARY.CHILDREN}`,
+                    ]).join("")}`}
+                  </p>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div className="form__row">
-          {[...adults, ...children].map((traveler) => {
-            const isMainBooker =
-              traveler.id === travelerFormValues?.mainBookerId;
-            return (
-              <div className="form__group form__group--sm-50" key={traveler.id}>
-                <ul className="list list--plain">
-                  <li className="list__item">
-                    <strong>
-                      {traveler.firstName} {traveler.lastName}
-                    </strong>{" "}
-                    {isMainBooker && (
-                      <em>({translations.TRAVELERS_FORM.MAIN_BOOKER})</em>
-                    )}
-                  </li>
-                  <li className="list__item">
-                    {traveler.birthDate.split("-").reverse().join("/")}
-                  </li>
-                  {isMainBooker && (
-                    <>
-                      <li className="list__item">{`${
-                        travelerFormValues?.street
-                      } ${compact([
-                        travelerFormValues?.houseNumber,
-                        travelerFormValues?.box,
-                      ]).join(" ")}, ${travelerFormValues?.zipCode} ${
-                        travelerFormValues?.place
-                      }`}</li>
+            <div className="form__row">
+              {[...adults, ...children].map((traveler) => {
+                const isMainBooker =
+                  traveler.id === travelerFormValues?.mainBookerId;
+                return (
+                  <div
+                    className="form__group form__group--sm-50"
+                    key={traveler.id}
+                  >
+                    <ul className="list list--plain">
                       <li className="list__item">
-                        {travelerFormValues?.phone}
+                        <strong>
+                          {traveler.firstName} {traveler.lastName}
+                        </strong>{" "}
+                        {isMainBooker && (
+                          <em>({translations.SUMMARY.MAIN_BOOKER})</em>
+                        )}
                       </li>
                       <li className="list__item">
-                        {travelerFormValues?.email}
+                        {traveler.birthDate.split("-").reverse().join("/")}
                       </li>
-                    </>
+                      {isMainBooker && (
+                        <>
+                          <li className="list__item">{`${
+                            travelerFormValues?.street
+                          } ${compact([
+                            travelerFormValues?.houseNumber,
+                            travelerFormValues?.box,
+                          ]).join(" ")}, ${travelerFormValues?.zipCode} ${
+                            travelerFormValues?.place
+                          }`}</li>
+                          <li className="list__item">
+                            {travelerFormValues?.phone}
+                          </li>
+                          <li className="list__item">
+                            {travelerFormValues?.email}
+                          </li>
+                        </>
+                      )}
+                    </ul>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="form__region">
+            <div className="form__row">
+              <div className="form__group">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">
+                    {translations.SUMMARY.OPTIONS}
+                  </h5>
+                </div>
+              </div>
+            </div>
+            <div className="form__row">
+              <div className="form__group">
+                <ul className="list list--booking-summary">
+                  <li>
+                    <h6>{activeOption?.name}</h6>
+                    <ul>
+                      {activeOption?.rooms.map((r, ri) => {
+                        const roomOption = r.options.find((x) => x.isSelected);
+                        return (
+                          <li key={ri} className="list__item">
+                            {roomOption?.accommodationName}
+                            {!isNil(roomOption?.regimeName) && ", "}
+                            {roomOption?.regimeName}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                    <p>
+                      ({getDateText(activeOption?.fromDate)} &gt;{" "}
+                      {getDateText(activeOption?.toDate)})
+                    </p>
+                  </li>
+                  {!isEmpty(activeOption?.groups) &&
+                    activeOption?.groups.map((x, i) => {
+                      if (!x.options.some((y) => y.isSelected)) return;
+
+                      return <SummaryBookingOption key={i} group={x} />;
+                    })}
+                  {!isEmpty(activeOption?.optionUnits) &&
+                    activeOption?.optionUnits.map((x) => (
+                      <SummaryBookingOptionUnit unit={x} />
+                    ))}
+                  {!isEmpty(activeOption?.optionPax) &&
+                    activeOption?.optionPax.map((x) => (
+                      <SummaryBookingOptionPax pax={x} />
+                    ))}
+                  {packageDetails?.outwardFlights &&
+                    packageDetails.outwardFlights
+                      .filter((x) => x.isSelected)
+                      .map((flight, i) => (
+                        <SummaryFlight
+                          key={i}
+                          flight={flight}
+                          header={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                        />
+                      ))}
+                  {packageDetails?.returnFlights &&
+                    packageDetails.returnFlights
+                      .filter((x) => x.isSelected)
+                      .map((flight, i) => (
+                        <SummaryFlight
+                          key={i}
+                          flight={flight}
+                          header={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                        />
+                      ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {settings.enableVoucher && (
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">
+                      {translations.SUMMARY.VOUCHERS}
+                    </h5>
+                  </div>
+                </div>
+              </div>
+              <div className="form__row">
+                <div className="form__group">
+                  <input
+                    type="text"
+                    className="form__input"
+                    defaultValue={voucher.code}
+                    onChange={(e) => setVoucher({ code: e.target.value })}
+                  />
+                  <button
+                    type="button"
+                    className={buildClassName([
+                      "cta",
+                      !voucher.code && "cta--disabled",
+                    ])}
+                    onClick={handleValidateVoucher}
+                  >
+                    {translations.SUMMARY.VOUCHER_VALIDATE}
+                  </button>
+                </div>
+              </div>
+              <div className="form__row">
+                <div className="form__group">
+                  {voucher.isValid && voucher.isValidated && (
+                    <div className="info-message">
+                      {translations.SUMMARY.VOUCHER_VALID}
+                      <button
+                        type="button"
+                        className="cta"
+                        onClick={handleAddVoucher}
+                      >
+                        {translations.SUMMARY.ADD_VOUCHER}
+                      </button>
+                    </div>
                   )}
+                  {!voucher.isValid && voucher.isValidated && (
+                    <div className="info-message--error">
+                      {translations.SUMMARY.VOUCHER_INVALID}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="form__row">
+                <ul>
+                  {!isEmpty(bookRequest?.payload.voucherCodes) &&
+                    bookRequest?.payload.voucherCodes?.map((y) => (
+                      <li>
+                        {y}{" "}
+                        <button
+                          type="button"
+                          className="cat--add-remove"
+                          onClick={(e) => handleRemoveVoucher(y)}
+                        ></button>
+                      </li>
+                    ))}
                 </ul>
               </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <div className="info-message">
-              <Icon name="ui-tooltip" className="icon--secondary-color" />
-              <div className="info-message__copy">
-                <h5>{translations.SUMMARY.VALIDATE_TITLE}</h5>
-                <p>{translations.SUMMARY.VALIDATE_TEXT}</p>
-                <div className="checkbox">
-                  <label className="checkbox__label">
-                    <input
-                      type="checkbox"
-                      className="checkbox__input"
-                      checked={userValidated}
-                      onChange={(e) =>
-                        dispatch(setUserValidated(e.target.checked))
-                      }
-                    />
-                    <span className="checkbox__label-text">
-                      {translations.SUMMARY.VALIDATE_CONFIRM} *
-                    </span>
-                  </label>
+            </div>
+          )}
+
+          {!isEmpty(notifications) && (
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="info-message">
+                    <Icon name="ui-tooltip" className="icon--secondary-color" />
+                    <div className="info-message__copy">
+                      <h5>{translations.SUMMARY.NOTIFICATIONS_TITLE}</h5>
+                      <>
+                        {notifications
+                          .filter((x) => !x.hasToBeConfirmed)
+                          .map((notification) => (
+                            <span
+                              key={notification.id}
+                              className="checkbox__label-text"
+                            >
+                              <strong className="checkbox__label-text--title">
+                                {notification.title}
+                              </strong>
+                              <span className="checkbox__label-text--description">
+                                {notification.description}
+                              </span>
+                            </span>
+                          ))}
+                        {notifications
+                          .filter((x) => x.hasToBeConfirmed)
+                          .map((notification) => (
+                            <div className="checkbox" key={notification.id}>
+                              <label className="checkbox__label">
+                                <input
+                                  type="checkbox"
+                                  className="checkbox__input"
+                                  checked={notification.isConfirmed}
+                                  onChange={(e) =>
+                                    handleNotificationChange(
+                                      notification.id,
+                                      e.target.checked
+                                    )
+                                  }
+                                />
+                                <span className="checkbox__label-text">
+                                  <strong className="checkbox__label-text--title">
+                                    {notification.title}
+                                  </strong>
+                                  <span className="checkbox__label-text--description">
+                                    {notification.description}
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          ))}
+                      </>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="form__region">
+            <div className="form__row">
+              <div className="form__group">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">
+                    {translations.SUMMARY.REMARKS}
+                  </h5>
+                </div>
+              </div>
+            </div>
+            <div className="form__row">
+              <div className="form__group">
+                <textarea
+                  className="form__input"
+                  defaultValue={remarks}
+                  onChange={(e) => handleRemarksChange(e.target.value)}
+                ></textarea>
+              </div>
+            </div>
+          </div>
+
+          <div className="form__region">
+            <div className="form__row">
+              <div className="form__group">
+                <div className="info-message">
+                  <Icon name="ui-tooltip" className="icon--secondary-color" />
+                  <div className="info-message__copy">
+                    <h5>{translations.SUMMARY.VALIDATE_TITLE}</h5>
+                    <p>{translations.SUMMARY.VALIDATE_TEXT}</p>
+                    {checkboxes &&
+                      checkboxes.map((checkbox) => (
+                        <div className="checkbox" key={checkbox.id}>
+                          <label className="checkbox__label">
+                            <input
+                              type="checkbox"
+                              className="checkbox__input"
+                              checked={checkbox.isSelected}
+                              onChange={(e) =>
+                                handleCheckboxChange(
+                                  checkbox.id,
+                                  e.target.checked
+                                )
+                              }
+                            />
+                            <span
+                              className="checkbox__label-text"
+                              dangerouslySetInnerHTML={{
+                                __html: checkbox.text,
+                              }}
+                            />
+                          </label>
+                        </div>
+                      ))}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-
-      <div className="booking__navigator">
-        <Link
-          to={`${settings.basePath}${settings.optionsPathSuffix}?${bookingQueryString}`}
-          title={translations.STEPS.PREVIOUS}
-          className="cta cta--secondary"
-        >
-          {translations.STEPS.PREVIOUS}
-        </Link>
-        <button
-          title="Bevestig boeking"
-          className={buildClassName(["cta", !userValidated && "cta--disabled"])}
-          disabled={!userValidated || isSubmitting}
-        >
-          {translations.STEPS.SUBMIT}
-        </button>
-      </div>
-    </form>
+
+          <div className="booking__navigator">
+            <Link
+              to={`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`}
+              title={translations.STEPS.PREVIOUS}
+              className="cta cta--secondary"
+            >
+              {translations.STEPS.PREVIOUS}
+            </Link>
+            <button
+              title="Bevestig boeking"
+              className={buildClassName([
+                "cta",
+                !userValidated && "cta--disabled",
+              ])}
+              disabled={!userValidated}
+            >
+              {translations.STEPS.SUBMIT}
+            </button>
+          </div>
+        </form>
+      )}
+    </>
   );
 };