@qite/tide-booking-component 1.1.2 → 1.2.0

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

@@ -30,6 +30,7 @@ import {
 } from "../booking/booking-slice";
 import { FLIGHT_OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from "../booking/constants";
 import {
+  selectAvailabilities,
   selectBookingPackagePax,
   selectBookingQueryString,
   selectIsFetchingProductOptions,
@@ -46,6 +47,7 @@ import {
   selectTranslations
 } from "../booking/selectors";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
+import { updatePackageRooms } from "../room-options/room-utils";
 import NoOptions from "./no-options";
 import OptionBookingAirlineGroup from "./option-booking-airline-group";
 import OptionBookingGroup from "./option-booking-group";
@@ -71,12 +73,13 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   const airportGroups = useSelector(selectPackageAirportGroups);
   const optionUnits = useSelector(selectPackageOptionUnits);
   const optionPax = useSelector(selectPackageOptionPax);
-  
+  const availabilities = useSelector(selectAvailabilities);
+
   // ROOMS
   const showRoomOptions = settings.roomOptions.isHidden;
   const packageRooms = useSelector(selectPackageRooms);
   const pax = useSelector(selectBookingPackagePax);
-  
+
   const getRoomPax = (index: number) => {
     var room = requestRooms?.find((x) => x.index == index);
     var bookingPackagePax = pax.filter((x) =>
@@ -84,7 +87,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
     );
     return bookingPackagePax.length > 0 ? bookingPackagePax : room?.pax ?? [];
   };
-  
+
   const handleOnRoomChange = (
     index: number,
     accommodationCode: string,
@@ -92,21 +95,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   ) => {
     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,
-          };
-        }),
-      };
-    });
+    const updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities!);
 
     dispatch(setPackageRooms(updatedPackageRooms));
     dispatch(fetchPriceDetails());
@@ -234,17 +223,18 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   }, []);
 
   const goPrevious = () => {
-    if (settings.flightOptions.isHidden) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-    } else {
+    if (settings.roomOptions.isHidden) {
       dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+    } else {
+      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
     }
   };
 
-  const previousUrl = settings.flightOptions.isHidden
-    ? `${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`
-    : `${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`;
+  const previousUrl = settings.roomOptions.isHidden
+    ? `${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`
+    : `${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`;
   const hasPrevious = !settings.roomOptions.isHidden || !settings.flightOptions.isHidden;
+  const showPackageTagsOrRoomoptions = showRoomOptions || (packageTags && !isEmpty(packageTags));
 
   return (
     <>
@@ -258,7 +248,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
         {isLoading && settings.loaderComponent}
         {!isLoading && (
           <div className="form__region">
-            {packageTags && (
+            {showPackageTagsOrRoomoptions && (
               <div className="form__group">
                 <div className="booking-card">
                   <div className="booking-card__body">
@@ -290,35 +280,37 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
                             </tbody>
                           </table>
                         )}
-                        <div className="booking-card__tag-translations">
-                          {packageTags.map((tag, index) => (
-                            <label
-                              key={index}
-                              htmlFor={`tag-translation-${index}-${tag.title}`}
-                              className="checkbox__label tag-translation"
-                            >
-                              <div className="tag-translation-input__container">
-                                <input
-                                  type="checkbox"
-                                  id={`tag-translation-${index}-${tag.title}`}
-                                  name={`tag-translation-${index}-${tag.title}`}
-                                  className="checkbox__input"
-                                  checked={tagIds?.includes(tag.id)}
-                                  onChange={(e) =>
-                                    handleOnTagChange(tag.id, e.target.checked)
-                                  }
-                                />
-                              </div>
-                              <span className="tag-translation__title">
-                                {tag.title}
-                              </span>
-                              &nbsp;
-                              <span className="tag-translation__description">
-                                {tag.description}
-                              </span>
-                            </label>
-                          ))}
-                        </div>
+                        {packageTags && !isEmpty(packageTags) && (
+                          <div className="booking-card__tag-translations">
+                            {packageTags.map((tag, index) => (
+                              <label
+                                key={index}
+                                htmlFor={`tag-translation-${index}-${tag.title}`}
+                                className="checkbox__label tag-translation"
+                              >
+                                <div className="tag-translation-input__container">
+                                  <input
+                                    type="checkbox"
+                                    id={`tag-translation-${index}-${tag.title}`}
+                                    name={`tag-translation-${index}-${tag.title}`}
+                                    className="checkbox__input"
+                                    checked={tagIds?.includes(tag.id)}
+                                    onChange={(e) =>
+                                      handleOnTagChange(tag.id, e.target.checked)
+                                    }
+                                  />
+                                </div>
+                                <span className="tag-translation__title">
+                                  {tag.title}
+                                </span>
+                                &nbsp;
+                                <span className="tag-translation__description">
+                                  {tag.description}
+                                </span>
+                              </label>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

package/src/booking-wizard/features/room-options/index.tsx

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect } from "react";
-// import Heart from "react-heart";
-
 import {
   BookingPackageFlight
 } from "@qite/tide-client/build/types";
-import { navigate } from "@reach/router";
+import { Link, navigate } from "@reach/router";
+import React, { useContext, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { buildClassName } from "../../../shared/utils/class-util";
 import SettingsContext from "../../settings-context";
@@ -16,61 +14,47 @@ import {
 } from "../booking/booking-slice";
 import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from "../booking/constants";
 import {
-  selectBookingPackagePax,
+  selectAccommodationViews,
+  selectAvailabilities,
   selectBookingQueryString,
   selectIsFetchingProductOptions,
   selectPackageDetails,
-  selectPackageOptionPax,
   selectPackageRooms,
-  selectRequestRooms,
   selectTranslations
 } from "../booking/selectors";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
-import OptionRoom from "../product-options/option-room";
-
+import { buildSelectableRooms, updatePackageRooms } from "./room-utils";
+import TravelerRooms from "./traveler-rooms";
 
 interface RoomOptionsFormProps { }
 
 const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
-  const {
-    basePath,
-    flightOptions,
-    options,
-    loaderComponent,
-    skipRouter
-  } = useContext(SettingsContext);
+  const settings = useContext(SettingsContext);
 
   const translations = useSelector(selectTranslations);
   const dispatch = useAppDispatch();
   const packageDetails = useSelector(selectPackageDetails);
-  const requestRooms = useSelector(selectRequestRooms);
-  const pax = useSelector(selectBookingPackagePax);
   const packageRooms = useSelector(selectPackageRooms);
+  const availabilities = useSelector(selectAvailabilities);
   const bookingQueryString = useSelector(selectBookingQueryString);
+  const accommodationViews = useSelector(selectAccommodationViews);
   const isLoading = useSelector(selectIsFetchingProductOptions);
-  const optionPax = useSelector(selectPackageOptionPax);
 
-  const getRoomPax = (index: number) => {
-    var room = requestRooms?.find((x) => x.index == index);
-    var bookingPackagePax = pax.filter((x) =>
-      room?.pax.some((y) => y.id == x.id)
-    );
-    return bookingPackagePax.length > 0 ? bookingPackagePax : room?.pax ?? [];
+  const rooms = buildSelectableRooms(packageRooms!, settings.accommodations, settings.regimes, accommodationViews);
+
+  const goPrevious = () => {
+    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
   };
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    if (skipRouter) {
-      if (flightOptions.isHidden) {
+    if (settings.skipRouter) {
+      if (settings.flightOptions.isHidden) {
         dispatch(setCurrentStep(OPTIONS_FORM_STEP));
       } else {
         dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
       }
     } else {
-      if (flightOptions.isHidden) {
-        navigate(`${basePath}${options.pathSuffix}?${bookingQueryString}`);
-      } else {
-        navigate(`${basePath}${flightOptions.pathSuffix}?${bookingQueryString}`);
-      }
+      navigate(`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`);
     }
 
     e.preventDefault();
@@ -83,21 +67,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
   ) => {
     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,
-          };
-        }),
-      };
-    });
+    const updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities!);
 
     dispatch(setPackageRooms(updatedPackageRooms));
     dispatch(fetchPriceDetails());
@@ -109,6 +79,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
 
       const outwardFlight = params.get("outwardflight") ?? undefined;
       const returnFlight = params.get("returnflight") ?? undefined;
+
       if (outwardFlight && returnFlight) {
         const desiredOutwardFlight = packageDetails.outwardFlights.find(
           (x) => x.entryLineGuid == outwardFlight
@@ -116,6 +87,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
         const desiredReturnFlight = packageDetails.returnFlights.find(
           (x) => x.entryLineGuid == returnFlight
         );
+
         if (desiredOutwardFlight && desiredReturnFlight) {
           dispatch(
             setPackage({
@@ -146,8 +118,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
     dispatch(fetchPriceDetails());
   }, []);
 
-  // const [active, setActive] = useState(false)
-
   return (
     <>
       <form
@@ -158,103 +128,37 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
         onSubmit={handleSubmit}
       >
         <div className="form__wrapper">
-          {/* {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)}
-                                  optionPax={optionPax}
-                                  onRoomChange={handleOnRoomChange}
-                                />
-                              ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-          )} */}
-
-          <div className="form__room">
-            <div className="form__room__wrapper">
-              <div className="form__room__image">
-                <img src="https://media.istockphoto.com/id/1050564510/photo/3d-rendering-beautiful-luxury-bedroom-suite-in-hotel-with-tv.jpg?s=612x612&w=0&k=20&c=ZYEso7dgPl889aYddhY2Fj3GOyuwqliHkbbT8pjl_iM=" alt="" className="form__room__img"/>
-              </div>
-              <div className="form__room__body">
-                <div className="">
-                  <h3 className="form__room__title">Tara Penthouse suite frontal seaview</h3>
-                  <p> Carrer de Nicaragua, 146, Les Corts, 08029 Barcelona, Spanje – <a href="#">Toon kaart</a></p>
-                  <ul className="list--usps form__room__usps">
-                    <li className="list__item">1 tweepersoonsbed</li>
-                    <li className="list__item">Max. 2 personen</li>
-                    <li className="list__item">Gratis WiFi</li>
-                    <li className="list__item">Airconditioning</li>
-                    <li className="list__item">Eigen badkamer</li>
-                  </ul>
-                  <div className="form__room__select">
-                    {/* <div className="select-wrapper">
-                      <div className="select-wrapper__select">
-                        <select>
-                          <option value="STD">Standaard (gedeeltelijk tuinzicht - Bucuti WIng) </option>
-                          <option value="SUP">Superior (tuinzicht - Bucuti WIng) (+ €&nbsp;252,00)</option>
-                          <option value="BUNG">Bungalow suite tuinzicht (+ €&nbsp;858,38)</option>
-                          <option value="DLX">Deluxe ocean (Bucuti Wing) (+ €&nbsp;858,38)</option>
-                          <option value="TAS">Tara Suite frontaal zeezicht (+ €&nbsp;1.740,38)</option>
-                          <option value="JRS">Junior Suite Zeezicht (Bucuti Wing) (+ €&nbsp;1.740,38)</option>
-                          <option value="BUNGO">Bungalow zeezicht (+ €&nbsp;1.740,38)</option>
-                          <option value="TAPS">Tara Penthouse suite frontaal zeezicht (+ €&nbsp;3.276,00)</option>
-                        </select>
-                      </div>
-                    </div> */}
-                    <div className="select-wrapper">
-                      <div className="select-wrapper__select">
-                        <select>
-                          <option value="KO">Kamer &amp; Ontbijt </option>
-                          <option value="LU">Lunch (+ €&nbsp;354,38)</option>
-                          <option value="HB">Half Pension (+ €&nbsp;740,25)</option>
-                          <option value="FB">Vol Pension (+ €&nbsp;1.094,63)</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="form__room__footer">
-              <div className="form__room__footer__top">
-                <p className="form__room__dates">01/11 - 08/11</p>
-                <span className="form__room__days">8 dagen, 7nachten</span> 
-              </div>
-              <div className="form__room__footer__bottom">
-                <p className="form__room__price form__room__price--increase">+ <span>€ 216,00</span></p>
-                <button className="cta cta--secondary">Selecteer</button>
-              </div>
-            </div>
-          </div>
+          {rooms.map(room => (
+            <TravelerRooms
+              key={room.index}
+              index={room.index}
+              room={room}
+              onRoomChange={handleOnRoomChange} />
+          ))}
         </div>
         <div className="booking__navigator">
+          {!settings.flightOptions.isHidden && (
+            <>
+              {settings.skipRouter ? (
+                <button
+                  type="button"
+                  title={translations.STEPS.PREVIOUS}
+                  onClick={() => goPrevious()}
+                  className="cta cta--secondary"
+                >
+                  {translations.STEPS.PREVIOUS}
+                </button>
+              ) : (
+                <Link
+                  to={`${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`}
+                  title={translations.STEPS.PREVIOUS}
+                  className="cta cta--secondary"
+                >
+                  {translations.STEPS.PREVIOUS}
+                </Link>
+              )}
+            </>
+          )}
           <button
             type="submit"
             title={translations.STEPS.NEXT}

package/src/booking-wizard/features/room-options/room-utils.ts

@@ -0,0 +1,143 @@
+import { BookingPackageAvailability, BookingPackageRoom } from "@qite/tide-client/build/types";
+import { AccommodationContent, RegimeContent, SelectableRoom, SelectableRoomAccommodation } from "../../types";
+
+export const buildSelectableRooms = (
+  packageRooms: BookingPackageRoom[],
+  accommodations: AccommodationContent[] | undefined,
+  regimes: RegimeContent[] | undefined,
+  accommodationViews: { [key: string]: string } | undefined
+) => {
+  return packageRooms.map(x => {
+    const selectedOption = x.options.find(x => x.isSelected)!;
+    const alternativeOptions = x.options
+      .filter(x => x.accommodationCode !== selectedOption.accommodationCode && !x.isLocked)
+      .sort((a, b) => a.price - b.price);
+
+    const alternativeAccommodations: SelectableRoomAccommodation[] = [];
+    alternativeOptions.forEach(x => {
+      const alternativeAccommodation = alternativeAccommodations.find(y => y.code === x.accommodationCode);
+
+      if (alternativeAccommodation) {
+        const regime = regimes?.find(y => y.code === x.regimeCode);
+
+        alternativeAccommodation.regimes.push({
+          code: x.regimeCode,
+          title: regime?.title ?? x.regimeName,
+          price: x.price
+        });
+      } else {
+        const accommodation = accommodations?.find(y => y.code === x.accommodationCode);
+        const regime = regimes?.find(y => y.code === x.regimeCode);
+
+        alternativeAccommodations.push({
+          code: x.accommodationCode,
+          regimeCode: x.regimeCode,
+          from: x.from,
+          to: x.to,
+          price: x.price,
+          regimes: [{
+            code: x.regimeCode,
+            title: regime?.title ?? x.regimeName,
+            price: x.price
+          }],
+          title: accommodation?.title ?? x.accommodationName,
+          image: accommodation?.imageUrl,
+          usps: accommodation?.usps ?? [],
+          description: accommodation?.description,
+          viewHtml: accommodationViews?.[x.accommodationCode]
+        })
+      }
+    });
+
+    const accommodation = accommodations?.find(y => y.code === selectedOption.accommodationCode);
+
+    return {
+      index: x.index,
+      selected: {
+        code: selectedOption.accommodationCode,
+        regimeCode: selectedOption.regimeCode,
+        price: selectedOption.price,
+        from: selectedOption.from,
+        to: selectedOption.to,
+        regimes: x.options
+          .filter(x => x.accommodationCode === selectedOption.accommodationCode)
+          .sort((a, b) => a.price - b.price)
+          .map(o => {
+            const regime = regimes?.find(y => y.code === o.regimeCode);
+
+            return {
+              code: o.regimeCode,
+              title: regime?.title ?? o.regimeName,
+              price: o.price
+            }
+          }),
+        title: accommodation?.title ?? selectedOption.accommodationName,
+        image: accommodation?.imageUrl,
+        usps: accommodation?.usps ?? [],
+        description: accommodation?.description,
+        viewHtml: accommodationViews?.[selectedOption.accommodationCode]
+      },
+      showAlternatives: false,
+      alternatives: alternativeAccommodations
+    } as SelectableRoom;
+  });
+}
+
+export const updatePackageRooms = (rooms: BookingPackageRoom[], index: number, accommodationCode: string, regimeCode: string | null, availabilities: BookingPackageAvailability[]) => {
+  const updatedRooms = rooms.map((room) => {
+    if (room.index !== index) return room;
+
+    return {
+      ...room,
+      options: room.options.map((option) => {
+        return {
+          ...option,
+          isSelected:
+            option.accommodationCode === accommodationCode &&
+            (option.regimeCode === regimeCode || (option.regimeCode === null && regimeCode === '')),
+        };
+      }),
+    };
+  });
+
+  const selectedAccommodations = new Map<string, number>();
+  updatedRooms.map(x => x.options.find(x => x.isSelected)!).forEach(x => {
+    if (selectedAccommodations.has(x.accommodationCode)) {
+      selectedAccommodations.set(x.accommodationCode, selectedAccommodations.get(x.accommodationCode)! + 1);
+    } else {
+      selectedAccommodations.set(x.accommodationCode, 1);
+    }
+  });
+
+  const accoCounter = availabilities.map(x => ({ code: x.code, count: x.count }));
+  return updatedRooms.map(room => {
+    const selectedOption = room.options.find(x => x.isSelected)!;
+
+    return {
+      ...room,
+      options: room.options.map(option => {
+        const isCurrentOption = selectedOption.accommodationCode === option.accommodationCode;
+        const usedCount = selectedAccommodations.get(option.accommodationCode) ?? 0;
+        const availability = availabilities.find(x => x.code === option.accommodationCode);
+
+        if (availability) {
+          const accoCount = accoCounter.find(x => x.code === option.accommodationCode)!;
+
+          const roomsLeft = availability.count - usedCount;
+          let isOnRequest = isCurrentOption
+            ? accoCount.count < 0 && (availability?.onRequestPossible ?? false)
+            : roomsLeft < 0 && (availability?.onRequestPossible ?? false);
+          if (isCurrentOption) accoCount.count--;
+
+          return {
+            ...option,
+            isLocked: !option.isSelected && !isOnRequest && roomsLeft < 0 && !availability.isExternal,
+            isOnRequest: isOnRequest
+          };
+        } else {
+          return option;
+        }
+      })
+    }
+  });
+}