@qite/tide-booking-component 1.4.87 → 1.4.88

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -3,7 +3,7 @@ import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationR
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
-  selectedSearchResultId: number | null;
+  selectedSearchResult: BookingPackageItem | null;
   packagingAccoResults: PackagingAccommodationResponse[];
   filteredPackagingAccoResults: PackagingAccommodationResponse[];
   packagingAccoSearchDetails: PackagingAccommodationResponse[];
@@ -21,7 +21,7 @@ export interface SearchResultsState {
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
-  setSelectedSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedSearchResult'>,
+  setSelectedSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem | null, 'searchResults/setSelectedSearchResult'>,
   setPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingAccommodationResponse[], 'searchResults/setPackagingAccoResults'>,
   setFilteredPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     PackagingAccommodationResponse[],

package/build/build-esm/src/search-results/types.d.ts

@@ -1,4 +1,4 @@
-import { BookingPackageItem, FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import { BookingPackage, FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 import { ReactNode } from 'react';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
@@ -34,7 +34,7 @@ export interface SearchResultsConfiguration {
     url: string;
     alt: string;
   };
-  onBook?: (result: BookingPackageItem) => void;
+  onBook?: (result: BookingPackage) => void;
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 export type FilterProperty = 'regime' | 'accommodation' | 'max-duration' | 'price' | 'rating' | 'theme';

package/build/build-esm/src/shared/components/flyin/group-tour-flyin.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type GroupTourFlyInProps = {
+  isLoading: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+declare const GroupTourFlyIn: React.FC<GroupTourFlyInProps>;
+export default GroupTourFlyIn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.87",
+  "version": "1.4.88",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/search-results/components/group-tour/group-tour-card.tsx

@@ -17,7 +17,7 @@ interface GroupTourCardProps {
 
 const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
   const context = useContext(SearchResultsConfigurationContext);
-  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
   if (!context) {
     return;
   }
@@ -29,8 +29,8 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cms
   const femaleCount = genders.filter((g) => g === 1).length;
   const otherCount = genders.filter((g) => g === 2).length;
 
-  const handleChange = (productId: number) => {
-    dispatch(setSelectedSearchResult(productId));
+  const handleChange = (result: BookingPackageItem) => {
+    dispatch(setSelectedSearchResult(result));
   };
 
   return (
@@ -93,14 +93,8 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cms
             </div>
             {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
           </div>
-          <button type="button" className="cta cta--select" onClick={() => context.onBook && context.onBook(result)}>
-            {translations?.PRODUCT.BOOK_NOW}
-          </button>
-          <button
-            type="button"
-            className={`cta ${selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'}`}
-            onClick={() => handleChange(result.productId)}>
-            {selectedSearchResultId === result.productId ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
+          <button type="button" className={`cta ${selectedSearchResult === result ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result)}>
+            {selectedSearchResult === result ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
           </button>
         </div>
       </div>

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -78,7 +78,7 @@ const SearchResultsContainer: React.FC = () => {
     isLoading,
     filters,
     selectedSortType,
-    selectedSearchResultId,
+    selectedSearchResult,
     selectedPackagingAccoResultCode,
     flyInIsOpen
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
@@ -493,11 +493,11 @@ const SearchResultsContainer: React.FC = () => {
             const matching = packageSearchResults.find((r) => r.productId === entry?.id);
 
             if (matching) {
-              dispatch(setSelectedSearchResult(matching.productId));
+              dispatch(setSelectedSearchResult(matching));
             }
           } else {
             if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
-              dispatch(setSelectedSearchResult(packageSearchResults[0]?.productId));
+              dispatch(setSelectedSearchResult(packageSearchResults[0]));
             }
           }
         }
@@ -577,8 +577,8 @@ const SearchResultsContainer: React.FC = () => {
   // Seperate detailsCall
   useEffect(() => {
     const fetchDetails = async () => {
-      console.log('Fetching details for selected search result', selectedSearchResultId);
-      if (!selectedSearchResultId || !context) return;
+      console.log('Fetching details for selected search result', selectedSearchResult);
+      if (!selectedSearchResult || !context) return;
       if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
         handleFlyInToggle(true);
       }
@@ -589,7 +589,7 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const selectedItem = results.find((r) => r.productId === selectedSearchResultId);
+        const selectedItem = results.find((r) => r.productId === selectedSearchResult.productId);
         if (!selectedItem) {
           // TODO: handle this case better, show an error message to the user
           return;
@@ -731,13 +731,13 @@ const SearchResultsContainer: React.FC = () => {
       }
     };
 
-    if (selectedSearchResultId) {
+    if (selectedSearchResult) {
       fetchDetails();
     }
     if (selectedPackagingAccoResultCode) {
       fetchPackagingAccoSearchDetails();
     }
-  }, [selectedSearchResultId, selectedPackagingAccoResultCode]);
+  }, [selectedSearchResult, selectedPackagingAccoResultCode]);
 
   useEffect(() => {
     if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {

package/src/search-results/store/search-results-slice.ts

@@ -5,7 +5,7 @@ import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationR
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
-  selectedSearchResultId: number | null;
+  selectedSearchResult: BookingPackageItem | null;
   packagingAccoResults: PackagingAccommodationResponse[];
   filteredPackagingAccoResults: PackagingAccommodationResponse[];
   packagingAccoSearchDetails: PackagingAccommodationResponse[];
@@ -25,7 +25,7 @@ export interface SearchResultsState {
 const initialState: SearchResultsState = {
   results: [],
   filteredResults: [],
-  selectedSearchResultId: null,
+  selectedSearchResult: null,
   packagingAccoResults: [],
   filteredPackagingAccoResults: [],
   packagingAccoSearchDetails: [],
@@ -52,8 +52,8 @@ const searchResultsSlice = createSlice({
     setFilteredResults(state, action: PayloadAction<BookingPackageItem[]>) {
       state.filteredResults = action.payload;
     },
-    setSelectedSearchResult(state, action: PayloadAction<number | null>) {
-      state.selectedSearchResultId = action.payload;
+    setSelectedSearchResult(state, action: PayloadAction<BookingPackageItem | null>) {
+      state.selectedSearchResult = action.payload;
     },
     setPackagingAccoResults(state, action: PayloadAction<PackagingAccommodationResponse[]>) {
       state.packagingAccoResults = action.payload;

package/src/search-results/types.ts

@@ -1,4 +1,4 @@
-import { BookingPackageItem, FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import { BookingPackage, FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 import { ReactNode } from 'react';
 
 export type FlightSelectionMode = 'paired' | 'independent';
@@ -51,7 +51,7 @@ export interface SearchResultsConfiguration {
   languageCode?: string;
 
   destinationImage?: { url: string; alt: string };
-  onBook?: (result: BookingPackageItem) => void;
+  onBook?: (result: BookingPackage) => void;
 }
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';

package/src/shared/components/flyin/flyin.tsx

@@ -6,6 +6,7 @@ import { setSelectedFlight, setSelectedFlightDetails } from '../../../search-res
 import FlightsFlyIn from './flights-flyin';
 import AccommodationFlyIn from './accommodation-flyin';
 import { PortalQsmType } from '@qite/tide-client';
+import GroupTourFlyIn from './group-tour-flyin';
 
 type FlyInProps = {
   title: string;
@@ -70,9 +71,8 @@ const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, classN
           </div>
         </div>
         {srpType === PortalQsmType.Flight && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
-        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.GroupTour) && (
-          <AccommodationFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />
-        )}
+        {srpType === PortalQsmType.Accommodation && <AccommodationFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
+        {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
       </div>
     </div>
   );

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

@@ -0,0 +1,254 @@
+import React, { useContext, useMemo } 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';
+
+type GroupTourFlyInProps = {
+  isLoading: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+type GroupedAccommodation = {
+  accommodationCode: string;
+  accommodationName: string;
+  regimes: PickerItem[];
+};
+
+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);
+
+  const { bookingPackageDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const selectedBookingPackageDetails = useMemo<BookingPackageOption | undefined>(() => {
+    return bookingPackageDetails?.options?.find((x) => x.isSelected);
+  }, [bookingPackageDetails]);
+
+  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
+        });
+      });
+
+      return Array.from(groupedMap.values());
+    });
+  }, [selectedBookingPackageDetails]);
+
+  if (!bookingPackageDetails) {
+    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 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);
+    }
+    console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
+    if (context?.onBook) {
+      context.onBook(bookingPackageDetails);
+    }
+  };
+
+  const calculateTotalPrice = () => {
+    const selectedOptions = selectedBookingPackageDetails?.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
+    const totalPrice = selectedOptions?.reduce((total, option) => total + (option.price || 0), 0);
+    return formatPrice(totalPrice, bookingPackageDetails?.currencyCode);
+  };
+
+  const getPriceDifference = (currentSelectedPrice: number | undefined, roomIndex: number, accommodationCode: string, regimeId?: string) => {
+    let targetPrice = 0;
+
+    const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
+
+    if (selectedOption?.price) {
+      targetPrice = selectedOption.price;
+    } else {
+      const firstOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.accommodationCode === accommodationCode);
+      targetPrice = firstOption?.price || 0;
+    }
+
+    if (regimeId) {
+      const regimeOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.entryLineGuid === regimeId);
+      targetPrice = regimeOption?.price || 0;
+    }
+
+    return targetPrice - (currentSelectedPrice || 0);
+  };
+
+  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 roomOption = getSelectedOptionForRoom(roomIndex);
+
+    const difference = getPriceDifference(roomOption?.price, roomIndex, accommodation.accommodationCode, regimeId);
+
+    return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, bookingPackageDetails.currencyCode)})` : ''}`;
+  };
+
+  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(selectedRoomOption?.price, 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?.regimeName}
+                          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">Total price: {calculateTotalPrice()}</div>
+
+        <div className="flyin__button-wrapper">
+          <button className="cta cta--select" onClick={handleConfirm}>
+            {translations.PRODUCT.BOOK_NOW}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GroupTourFlyIn;

package/styles/components/_booking.scss

@@ -120,7 +120,7 @@
 
     .booking__panel-heading {
       //padding: 0;
-      margin-bottom: 30px;
+      // margin-bottom: 30px;
     }
 
     .booking__panel-body {
@@ -707,7 +707,7 @@
   }
 
   &__header {
-    padding: 30px 0 0px;
+    padding: 15px 0 0px;
   }
 
   &__header-heading {

package/styles/components/_form.scss

@@ -4,7 +4,7 @@
   &__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 20rem;
+    gap: 2rem;
   }
 
   &__label {
@@ -1214,7 +1214,7 @@
     }
 
     &__container {
-      margin-top: -25px;
+      // margin-top: -25px;
     }
 
     &__header {
@@ -1502,7 +1502,7 @@
     background: var(--tide-booking-form-card-background);
     outline: var(--tide-booking-form-card-border);
     border-radius: var(--tide-booking-form-card-border-radius);
-    margin-top: -25px;
+    // margin-top: -25px;
   }
 
   .form__region {