@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/shared/components/flyin/group-tour-flyin.tsx

@@ -1,294 +1,294 @@
-import React, { useContext, useMemo, useRef, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import ItemPicker from '../../../qsm/components/item-picker';
-import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
-import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
-import { getTranslations } from '../../utils/localization-util';
-import { setBookingPackageDetails } from '../../../search-results/store/search-results-slice';
-import { BookingPackageOption } from '@qite/tide-client';
-import { PickerItem } from '../../types';
-import { first } from 'lodash';
-import Spinner from '../../../search-results/components/spinner/spinner';
-
-type GroupTourFlyInProps = {
-  isLoading: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-};
-
-type GroupedAccommodation = {
-  accommodationCode: string;
-  accommodationName: string;
-  regimes: PickerItem[];
-};
-
-type RoomOption = BookingPackageOption['rooms'][number]['options'][number];
-
-const formatPrice = (price?: number, currencyCode = 'EUR') => {
-  if (typeof price !== 'number') return '';
-
-  return new Intl.NumberFormat('nl-BE', {
-    style: 'currency',
-    currency: currencyCode
-  }).format(price);
-};
-
-const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
-  const dispatch = useDispatch();
-  const context = useContext(SearchResultsConfigurationContext);
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
-  if (isLoading) {
-    return <>{context?.customSpinner ?? <Spinner label={translations.SRP.LOADING_OPTIONS} />}</>;
-  }
-
-  const { bookingPackageDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const selectedBookingPackageDetails = useMemo<BookingPackageOption | undefined>(() => {
-    return bookingPackageDetails?.options?.find((x) => x.isSelected);
-  }, [bookingPackageDetails]);
-
-  const packageKey = `${bookingPackageDetails?.transactionId}-${selectedBookingPackageDetails?.id}`;
-
-  const initialSelectedOptionsRef = useRef<Record<string, Record<number, RoomOption | undefined>>>({});
-
-  useEffect(() => {
-    if (!packageKey || !selectedBookingPackageDetails?.rooms) return;
-
-    if (!initialSelectedOptionsRef.current[packageKey]) {
-      initialSelectedOptionsRef.current[packageKey] = {};
-    }
-
-    selectedBookingPackageDetails.rooms.forEach((room, roomIndex) => {
-      if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
-        initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find((option) => option.isSelected);
-      }
-    });
-  }, [packageKey, selectedBookingPackageDetails]);
-
-  const groupedRooms = useMemo(() => {
-    if (!selectedBookingPackageDetails?.rooms) return [];
-
-    return selectedBookingPackageDetails.rooms.map((room) => {
-      const groupedMap = new Map<string, GroupedAccommodation>();
-
-      room.options.forEach((option) => {
-        const key = option.accommodationCode;
-
-        if (!groupedMap.has(key)) {
-          groupedMap.set(key, {
-            accommodationCode: option.accommodationCode,
-            accommodationName: option.accommodationName,
-            regimes: []
-          });
-        }
-
-        groupedMap.get(key)?.regimes.push({
-          id: option.entryLineGuid,
-          label: option.regimeName ?? 'No regime'
-        });
-      });
-
-      return Array.from(groupedMap.values());
-    });
-  }, [selectedBookingPackageDetails]);
-
-  if (!bookingPackageDetails || !selectedBookingPackageDetails) {
-    return null;
-  }
-
-  const getSelectedOptionForRoom = (roomIndex: number) => {
-    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
-  };
-
-  const getSelectedOptionForAccommodation = (roomIndex: number, accommodationCode: string) => {
-    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
-  };
-
-  const getInitialSelectedOptionForRoom = (roomIndex: number) => {
-    if (!packageKey) return undefined;
-    return initialSelectedOptionsRef.current[packageKey]?.[roomIndex];
-  };
-
-  const handlePick = (roomIndex: number, selectedGuid?: string) => {
-    if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
-
-    const updatedBookingPackageDetails = {
-      ...bookingPackageDetails,
-      options: bookingPackageDetails.options.map((bookingOption) => {
-        if (!bookingOption.isSelected) {
-          return bookingOption;
-        }
-
-        return {
-          ...bookingOption,
-          rooms: bookingOption.rooms.map((room, currentRoomIndex) => {
-            if (currentRoomIndex !== roomIndex) {
-              return room;
-            }
-
-            return {
-              ...room,
-              options: room.options.map((roomOption) => ({
-                ...roomOption,
-                isSelected: roomOption.entryLineGuid === selectedGuid
-              }))
-            };
-          })
-        };
-      })
-    };
-
-    dispatch(setBookingPackageDetails({ details: updatedBookingPackageDetails }));
-  };
-
-  const handleConfirm = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-
-    if (context?.onBook) {
-      context.onBook(bookingPackageDetails);
-    }
-  };
-
-  const getPriceDifference = (roomIndex: number, accommodationCode: string, regimeId?: string) => {
-    const currentSelectedOption = getSelectedOptionForRoom(roomIndex);
-    const currentSelectedPrice = currentSelectedOption?.price || 0;
-
-    let targetOption;
-
-    if (regimeId) {
-      targetOption = selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.entryLineGuid === regimeId);
-    } else {
-      targetOption =
-        getSelectedOptionForAccommodation(roomIndex, accommodationCode) ??
-        selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode);
-    }
-
-    return (targetOption?.price || 0) - currentSelectedPrice;
-  };
-
-  const formatPriceDifference = (difference: number, currencyCode: string) => {
-    if (difference === 0) {
-      return null;
-    }
-
-    const formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
-    return `${difference > 0 ? '+' : '-'} ${formattedAbsoluteValue}`;
-  };
-
-  const getPriceDifferenceClassName = (difference: number) => {
-    if (difference < 0) {
-      return 'flyin__acco__price flyin__acco__price--decrease';
-    }
-
-    if (difference > 0) {
-      return 'flyin__acco__price flyin__acco__price--increase';
-    }
-
-    return 'flyin__acco__price';
-  };
-
-  const regimeFormatter = (roomIndex: number, accommodation: GroupedAccommodation, regimeId: string, label: string) => {
-    const difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
-    return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, bookingPackageDetails.currencyCode)})` : ''}`;
-  };
-
-  const adjustedTotalPrice = useMemo(() => {
-    if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
-      return 0;
-    }
-
-    const basePrice = selectedBookingPackageDetails.price;
-
-    const totalDelta = selectedBookingPackageDetails.rooms.reduce((sum, room, roomIndex) => {
-      const initialOption = getInitialSelectedOptionForRoom(roomIndex);
-      const currentOption = room.options.find((option) => option.isSelected);
-
-      const initialPrice = initialOption?.price || 0;
-      const currentPrice = currentOption?.price || 0;
-
-      return sum + (currentPrice - initialPrice);
-    }, 0);
-
-    return basePrice + totalDelta;
-  }, [selectedBookingPackageDetails, packageKey]);
-
-  return (
-    <>
-      <div className="flyin__content">
-        {groupedRooms.map((roomAccommodations, roomIndex) => {
-          const selectedRoomOption = getSelectedOptionForRoom(roomIndex);
-
-          return (
-            <div className="flyin__acco" key={`room-${roomIndex}`}>
-              <h3 className="flyin__acco__room-title">Room {roomIndex + 1}</h3>
-              <div className="flyin__acco__cards">
-                {roomAccommodations.map((accommodation) => {
-                  const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
-                  const priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
-
-                  return (
-                    <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
-                      <div className="flyin__acco__content">
-                        <h4 className="flyin__acco__title">{accommodation.accommodationName}</h4>
-                      </div>
-
-                      <div className="flyin__acco__footer">
-                        <ItemPicker
-                          items={accommodation.regimes}
-                          selection={selectedOption != null ? selectedOption.regimeName ?? 'No regime' : undefined}
-                          label=""
-                          placeholder="Select regime"
-                          classModifier=""
-                          onPick={(selected, selectedGuid) => handlePick(roomIndex, selectedGuid)}
-                          valueFormatter={(id, label) => regimeFormatter(roomIndex, accommodation, id, label)}
-                        />
-
-                        <div className="flyin__acco__footer__actions">
-                          <button
-                            className={
-                              selectedRoomOption?.accommodationCode === accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
-                            }
-                            onClick={() => {
-                              handlePick(roomIndex, selectedOption ? selectedOption.entryLineGuid : first(accommodation.regimes)?.id);
-                            }}>
-                            {selectedRoomOption?.accommodationCode === accommodation.accommodationCode
-                              ? translations?.SHARED.SELECTED
-                              : translations?.SHARED.SELECT}
-                          </button>
-
-                          <div className="flyin__acco__price__wrapper">
-                            <span className={getPriceDifferenceClassName(priceDifference)}>
-                              {formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="flyin__footer">
-        <div className="flyin__footer__price">
-          {translations.SHARED.TOTAL_PRICE}: {formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)}
-        </div>
-
-        <div className="flyin__button-wrapper">
-          <button className="cta cta--select" onClick={handleConfirm}>
-            {translations.PRODUCT.BOOK_NOW}
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default GroupTourFlyIn;
+import React, { useContext, useMemo, useRef, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import ItemPicker from '../../../qsm/components/item-picker';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { getTranslations } from '../../utils/localization-util';
+import { setBookingPackageDetails } from '../../../search-results/store/search-results-slice';
+import { BookingPackageOption } from '@qite/tide-client';
+import { PickerItem } from '../../types';
+import { first } from 'lodash';
+import Spinner from '../../../search-results/components/spinner/spinner';
+
+type GroupTourFlyInProps = {
+  isLoading: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+type GroupedAccommodation = {
+  accommodationCode: string;
+  accommodationName: string;
+  regimes: PickerItem[];
+};
+
+type RoomOption = BookingPackageOption['rooms'][number]['options'][number];
+
+const formatPrice = (price?: number, currencyCode = 'EUR') => {
+  if (typeof price !== 'number') return '';
+
+  return new Intl.NumberFormat('nl-BE', {
+    style: 'currency',
+    currency: currencyCode
+  }).format(price);
+};
+
+const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
+  const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  if (isLoading) {
+    return <>{context?.customSpinner ?? <Spinner label={translations.SRP.LOADING_OPTIONS} />}</>;
+  }
+
+  const { bookingPackageDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const selectedBookingPackageDetails = useMemo<BookingPackageOption | undefined>(() => {
+    return bookingPackageDetails?.options?.find((x) => x.isSelected);
+  }, [bookingPackageDetails]);
+
+  const packageKey = `${bookingPackageDetails?.transactionId}-${selectedBookingPackageDetails?.id}`;
+
+  const initialSelectedOptionsRef = useRef<Record<string, Record<number, RoomOption | undefined>>>({});
+
+  useEffect(() => {
+    if (!packageKey || !selectedBookingPackageDetails?.rooms) return;
+
+    if (!initialSelectedOptionsRef.current[packageKey]) {
+      initialSelectedOptionsRef.current[packageKey] = {};
+    }
+
+    selectedBookingPackageDetails.rooms.forEach((room, roomIndex) => {
+      if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
+        initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find((option) => option.isSelected);
+      }
+    });
+  }, [packageKey, selectedBookingPackageDetails]);
+
+  const groupedRooms = useMemo(() => {
+    if (!selectedBookingPackageDetails?.rooms) return [];
+
+    return selectedBookingPackageDetails.rooms.map((room) => {
+      const groupedMap = new Map<string, GroupedAccommodation>();
+
+      room.options.forEach((option) => {
+        const key = option.accommodationCode;
+
+        if (!groupedMap.has(key)) {
+          groupedMap.set(key, {
+            accommodationCode: option.accommodationCode,
+            accommodationName: option.accommodationName,
+            regimes: []
+          });
+        }
+
+        groupedMap.get(key)?.regimes.push({
+          id: option.entryLineGuid,
+          label: option.regimeName ?? 'No regime'
+        });
+      });
+
+      return Array.from(groupedMap.values());
+    });
+  }, [selectedBookingPackageDetails]);
+
+  if (!bookingPackageDetails || !selectedBookingPackageDetails) {
+    return null;
+  }
+
+  const getSelectedOptionForRoom = (roomIndex: number) => {
+    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
+  };
+
+  const getSelectedOptionForAccommodation = (roomIndex: number, accommodationCode: string) => {
+    return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
+  };
+
+  const getInitialSelectedOptionForRoom = (roomIndex: number) => {
+    if (!packageKey) return undefined;
+    return initialSelectedOptionsRef.current[packageKey]?.[roomIndex];
+  };
+
+  const handlePick = (roomIndex: number, selectedGuid?: string) => {
+    if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
+
+    const updatedBookingPackageDetails = {
+      ...bookingPackageDetails,
+      options: bookingPackageDetails.options.map((bookingOption) => {
+        if (!bookingOption.isSelected) {
+          return bookingOption;
+        }
+
+        return {
+          ...bookingOption,
+          rooms: bookingOption.rooms.map((room, currentRoomIndex) => {
+            if (currentRoomIndex !== roomIndex) {
+              return room;
+            }
+
+            return {
+              ...room,
+              options: room.options.map((roomOption) => ({
+                ...roomOption,
+                isSelected: roomOption.entryLineGuid === selectedGuid
+              }))
+            };
+          })
+        };
+      })
+    };
+
+    dispatch(setBookingPackageDetails({ details: updatedBookingPackageDetails }));
+  };
+
+  const handleConfirm = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+
+    if (context?.onBook) {
+      context.onBook(bookingPackageDetails);
+    }
+  };
+
+  const getPriceDifference = (roomIndex: number, accommodationCode: string, regimeId?: string) => {
+    const currentSelectedOption = getSelectedOptionForRoom(roomIndex);
+    const currentSelectedPrice = currentSelectedOption?.price || 0;
+
+    let targetOption;
+
+    if (regimeId) {
+      targetOption = selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.entryLineGuid === regimeId);
+    } else {
+      targetOption =
+        getSelectedOptionForAccommodation(roomIndex, accommodationCode) ??
+        selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode);
+    }
+
+    return (targetOption?.price || 0) - currentSelectedPrice;
+  };
+
+  const formatPriceDifference = (difference: number, currencyCode: string) => {
+    if (difference === 0) {
+      return null;
+    }
+
+    const formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
+    return `${difference > 0 ? '+' : '-'} ${formattedAbsoluteValue}`;
+  };
+
+  const getPriceDifferenceClassName = (difference: number) => {
+    if (difference < 0) {
+      return 'flyin__acco__price flyin__acco__price--decrease';
+    }
+
+    if (difference > 0) {
+      return 'flyin__acco__price flyin__acco__price--increase';
+    }
+
+    return 'flyin__acco__price';
+  };
+
+  const regimeFormatter = (roomIndex: number, accommodation: GroupedAccommodation, regimeId: string, label: string) => {
+    const difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
+    return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, bookingPackageDetails.currencyCode)})` : ''}`;
+  };
+
+  const adjustedTotalPrice = useMemo(() => {
+    if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
+      return 0;
+    }
+
+    const basePrice = selectedBookingPackageDetails.price;
+
+    const totalDelta = selectedBookingPackageDetails.rooms.reduce((sum, room, roomIndex) => {
+      const initialOption = getInitialSelectedOptionForRoom(roomIndex);
+      const currentOption = room.options.find((option) => option.isSelected);
+
+      const initialPrice = initialOption?.price || 0;
+      const currentPrice = currentOption?.price || 0;
+
+      return sum + (currentPrice - initialPrice);
+    }, 0);
+
+    return basePrice + totalDelta;
+  }, [selectedBookingPackageDetails, packageKey]);
+
+  return (
+    <>
+      <div className="flyin__content">
+        {groupedRooms.map((roomAccommodations, roomIndex) => {
+          const selectedRoomOption = getSelectedOptionForRoom(roomIndex);
+
+          return (
+            <div className="flyin__acco" key={`room-${roomIndex}`}>
+              <h3 className="flyin__acco__room-title">Room {roomIndex + 1}</h3>
+              <div className="flyin__acco__cards">
+                {roomAccommodations.map((accommodation) => {
+                  const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
+                  const priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
+
+                  return (
+                    <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
+                      <div className="flyin__acco__content">
+                        <h4 className="flyin__acco__title">{accommodation.accommodationName}</h4>
+                      </div>
+
+                      <div className="flyin__acco__footer">
+                        <ItemPicker
+                          items={accommodation.regimes}
+                          selection={selectedOption != null ? selectedOption.regimeName ?? 'No regime' : undefined}
+                          label=""
+                          placeholder="Select regime"
+                          classModifier=""
+                          onPick={(selected, selectedGuid) => handlePick(roomIndex, selectedGuid)}
+                          valueFormatter={(id, label) => regimeFormatter(roomIndex, accommodation, id, label)}
+                        />
+
+                        <div className="flyin__acco__footer__actions">
+                          <button
+                            className={
+                              selectedRoomOption?.accommodationCode === accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
+                            }
+                            onClick={() => {
+                              handlePick(roomIndex, selectedOption ? selectedOption.entryLineGuid : first(accommodation.regimes)?.id);
+                            }}>
+                            {selectedRoomOption?.accommodationCode === accommodation.accommodationCode
+                              ? translations?.SHARED.SELECTED
+                              : translations?.SHARED.SELECT}
+                          </button>
+
+                          <div className="flyin__acco__price__wrapper">
+                            <span className={getPriceDifferenceClassName(priceDifference)}>
+                              {formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flyin__footer">
+        <div className="flyin__footer__price">
+          {translations.SHARED.TOTAL_PRICE}: {formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)}
+        </div>
+
+        <div className="flyin__button-wrapper">
+          <button className="cta cta--select" onClick={handleConfirm}>
+            {translations.PRODUCT.BOOK_NOW}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GroupTourFlyIn;