@qite/tide-booking-component 1.4.123 → 1.4.124

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

@@ -1,132 +1,132 @@
-import { BookingPackageFlight } from '@qite/tide-client/build/types';
-import { Link, useNavigate } from 'react-router-dom';
-import React, { useContext, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import SettingsContext from '../../settings-context';
-import { useAppDispatch } from '../../store';
-import { setCurrentStep, setPackage, setPackageRooms } from '../booking/booking-slice';
-import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from '../booking/constants';
-import {
-  selectAccommodationViews,
-  selectAvailabilities,
-  selectBookingQueryString,
-  selectIsFetchingProductOptions,
-  selectPackageDetails,
-  selectPackageRooms,
-  selectTranslations
-} from '../booking/selectors';
-import { fetchPriceDetails } from '../price-details/price-details-slice';
-import { buildSelectableRooms, updatePackageRooms } from './room-utils';
-import TravelerRooms from './traveler-rooms';
-
-interface RoomOptionsFormProps {}
-
-const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-
-  const translations = useSelector(selectTranslations);
-  const dispatch = useAppDispatch();
-  const packageDetails = useSelector(selectPackageDetails);
-  const packageRooms = useSelector(selectPackageRooms);
-  const availabilities = useSelector(selectAvailabilities);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const accommodationViews = useSelector(selectAccommodationViews);
-  const isLoading = useSelector(selectIsFetchingProductOptions);
-
-  const rooms = buildSelectableRooms(packageRooms!, settings.accommodations, settings.regimes, accommodationViews);
-
-  const goPrevious = () => {
-    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
-  };
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    if (settings.skipRouter) {
-      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-    } else {
-      navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
-    }
-
-    e.preventDefault();
-  };
-
-  const handleOnRoomChange = (index: number, accommodationCode: string, regimeCode: string | null) => {
-    if (!packageRooms) return;
-
-    const updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities!);
-
-    dispatch(setPackageRooms(updatedPackageRooms));
-    dispatch(fetchPriceDetails());
-  };
-
-  useEffect(() => {
-    if (packageDetails) {
-      const params = new URLSearchParams(location.search);
-
-      const outwardFlight = params.get('outwardflight') ?? undefined;
-      const returnFlight = params.get('returnflight') ?? undefined;
-
-      if (outwardFlight && returnFlight) {
-        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
-        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
-
-        if (desiredOutwardFlight && desiredReturnFlight) {
-          dispatch(
-            setPackage({
-              ...packageDetails,
-              outwardFlights: packageDetails.outwardFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              }),
-              returnFlights: packageDetails.returnFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              })
-            })
-          );
-        }
-      }
-    }
-    dispatch(fetchPriceDetails());
-  }, []);
-
-  return (
-    <>
-      <form className="form" name="booking--options" id="booking--options" noValidate onSubmit={handleSubmit}>
-        <div className="form__wrapper">
-          {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.skipBasePathInRouting ? 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} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
-            {translations.STEPS.NEXT}
-          </button>
-        </div>
-      </form>
-    </>
-  );
-};
-
-export default RoomOptionsForm;
+import { BookingPackageFlight } from '@qite/tide-client/build/types';
+import { Link, useNavigate } from 'react-router-dom';
+import React, { useContext, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { buildClassName } from '../../../shared/utils/class-util';
+import SettingsContext from '../../settings-context';
+import { useAppDispatch } from '../../store';
+import { setCurrentStep, setPackage, setPackageRooms } from '../booking/booking-slice';
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from '../booking/constants';
+import {
+  selectAccommodationViews,
+  selectAvailabilities,
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageDetails,
+  selectPackageRooms,
+  selectTranslations
+} from '../booking/selectors';
+import { fetchPriceDetails } from '../price-details/price-details-slice';
+import { buildSelectableRooms, updatePackageRooms } from './room-utils';
+import TravelerRooms from './traveler-rooms';
+
+interface RoomOptionsFormProps {}
+
+const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
+  const translations = useSelector(selectTranslations);
+  const dispatch = useAppDispatch();
+  const packageDetails = useSelector(selectPackageDetails);
+  const packageRooms = useSelector(selectPackageRooms);
+  const availabilities = useSelector(selectAvailabilities);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const accommodationViews = useSelector(selectAccommodationViews);
+  const isLoading = useSelector(selectIsFetchingProductOptions);
+
+  const rooms = buildSelectableRooms(packageRooms!, settings.accommodations, settings.regimes, accommodationViews);
+
+  const goPrevious = () => {
+    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+  };
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    if (settings.skipRouter) {
+      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+    } else {
+      navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
+    }
+
+    e.preventDefault();
+  };
+
+  const handleOnRoomChange = (index: number, accommodationCode: string, regimeCode: string | null) => {
+    if (!packageRooms) return;
+
+    const updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities!);
+
+    dispatch(setPackageRooms(updatedPackageRooms));
+    dispatch(fetchPriceDetails());
+  };
+
+  useEffect(() => {
+    if (packageDetails) {
+      const params = new URLSearchParams(location.search);
+
+      const outwardFlight = params.get('outwardflight') ?? undefined;
+      const returnFlight = params.get('returnflight') ?? undefined;
+
+      if (outwardFlight && returnFlight) {
+        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
+        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
+
+        if (desiredOutwardFlight && desiredReturnFlight) {
+          dispatch(
+            setPackage({
+              ...packageDetails,
+              outwardFlights: packageDetails.outwardFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              }),
+              returnFlights: packageDetails.returnFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              })
+            })
+          );
+        }
+      }
+    }
+    dispatch(fetchPriceDetails());
+  }, []);
+
+  return (
+    <>
+      <form className="form" name="booking--options" id="booking--options" noValidate onSubmit={handleSubmit}>
+        <div className="form__wrapper">
+          {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.skipBasePathInRouting ? 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} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
+            {translations.STEPS.NEXT}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default RoomOptionsForm;

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

@@ -1,154 +1,154 @@
-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 =
-            (option.isOnRequest && availability.count == 99) || // Tide sets count to 99 if an option falls back to on request.
-            (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;
-        }
-      })
-    };
-  });
-};
+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 =
+            (option.isOnRequest && availability.count == 99) || // Tide sets count to 99 if an option falls back to on request.
+            (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;
+        }
+      })
+    };
+  });
+};