@qite/tide-booking-component 1.4.70 → 1.4.71

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

@@ -3,7 +3,7 @@ import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-clien
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
-  selectedHotelId: number | null;
+  selectedSearchResultId: number | null;
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
@@ -17,7 +17,7 @@ export interface SearchResultsState {
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
-  setSelectedHotel: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedHotel'>,
+  setSelectedSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedSearchResult'>,
   setSelectedFlight: import('@reduxjs/toolkit').ActionCreatorWithPayload<ExtendedFlightSearchResponseItem | null, 'searchResults/setSelectedFlight'>,
   setSelectedFlightDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     ExtendedFlightSearchResponseItem | null,

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

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

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

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

package/build/build-esm/src/shared/components/{flyin.d.ts → flyin/flyin.d.ts}

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SRPType } from '../types';
+import { SRPType } from '../../types';
 type FlyInProps = {
-  srpType?: SRPType;
+  title: string;
+  srpType: SRPType;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
   className?: string;

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -55,6 +55,7 @@ export declare const getTranslations: (language: string) => {
     FLIGHTS_FOUND_1: string;
     FLIGHTS_FOUND_2: string;
     FLIGHTS_FOUND_3: string;
+    SELECT_YOUR_FARE: string;
   };
   PRODUCT: {
     STAY_INCLUDED: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.70",
+  "version": "1.4.71",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.141",
+    "@qite/tide-client": "^1.1.143",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -12,7 +12,7 @@ import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
 import TravelNationalityPicker from '../travel-nationality-picker';
-import { addDays, addMonths } from 'date-fns';
+import { addDays, addMonths, addYears } from 'date-fns';
 import { DateRange } from '../../../booking-product/types';
 import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
 import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
@@ -74,6 +74,18 @@ const QSMContainer: React.FC = () => {
 
   const handleQsmTypeChange = (value: SRPType) => {
     dispatch(setSelectedQsmType(value));
+
+    if (value === 'groupTour') {
+      handleDateChange({
+        fromDate: new Date(fromDate ?? Date.now()),
+        toDate: addYears(new Date(fromDate ?? Date.now()), 1)
+      });
+    } else {
+      handleDateChange({
+        fromDate: new Date(fromDate ?? Date.now()),
+        toDate: addDays(new Date(fromDate ?? Date.now()), 7)
+      });
+    }
   };
 
   const handleSubmit = () => {

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

@@ -3,6 +3,9 @@ import Icon from '../icon';
 import { BookingPackageItem } from '@qite/tide-client';
 import { format } from 'date-fns';
 import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSelectedSearchResult } from '../../store/search-results-slice';
 
 interface GroupTourCardProps {
   result: BookingPackageItem;
@@ -10,13 +13,19 @@ interface GroupTourCardProps {
 }
 
 const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode }) => {
+  const dispatch = useDispatch();
   const translations = getTranslations(languageCode ?? 'en-GB');
+  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const genders = result.allotment?.travellerGenders || [];
   const maleCount = genders.filter((g) => g === 0).length;
   const femaleCount = genders.filter((g) => g === 1).length;
   const otherCount = genders.filter((g) => g === 2).length;
 
+  const handleChange = (productId: number) => {
+    dispatch(setSelectedSearchResult(productId));
+  };
+
   return (
     <div className="search__result-card">
       <div className="search__result-card__allotment">
@@ -76,7 +85,12 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode }) =
             </div>
             {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
           </div>
-          <button className="cta cta--select">Bekijk reis</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>
         </div>
       </div>
     </div>

package/src/search-results/components/hotel/hotel-card.tsx

@@ -3,7 +3,7 @@ import { HotelResult } from '../../types';
 import Icon from '../icon';
 import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
-import { setSelectedHotel } from '../../store/search-results-slice';
+import { setSelectedSearchResult } from '../../store/search-results-slice';
 
 interface HotelCardProps {
   result: HotelResult;
@@ -12,10 +12,10 @@ interface HotelCardProps {
 
 const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
   const dispatch = useDispatch();
-  const { selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  const handleChange = (hotelProductId: number) => {
-    dispatch(setSelectedHotel(hotelProductId));
+  const handleChange = (productId: number) => {
+    dispatch(setSelectedSearchResult(productId));
   };
 
   return (
@@ -71,12 +71,15 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
           <p className="search__result-card__description">{result.description}</p>
         </div>
         <div className="search__result-card__footer">
-          <button type="button" className={`cta ${selectedHotelId === result.id ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result.id)}>
-            {selectedHotelId === result.id ? 'Selected' : 'Select'}
+          <button
+            type="button"
+            className={`cta ${selectedSearchResultId === result.id ? 'cta--selected' : 'cta--select'}`}
+            onClick={() => handleChange(result.id)}>
+            {selectedSearchResultId === result.id ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
           </button>
-          <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
+          {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
             {translations?.SRP.VIEW_DETAILS}
-          </button>
+          </button> */}
         </div>
       </div>
     </div>

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

@@ -7,7 +7,7 @@ import {
   setSortKey,
   setResults,
   setIsLoading,
-  setSelectedHotel,
+  setSelectedSearchResult,
   setBookingPackageDetails,
   setEntry,
   setFlyInIsOpen,
@@ -33,7 +33,7 @@ import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
 import Itinerary from '../itinerary';
 import TabViews from '../tab-views';
-import FlyIn from '../../../shared/components/flyin';
+import FlyIn from '../../../shared/components/flyin/flyin';
 import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
 import RoundTripResults from '../round-trip/round-trip-results';
 import { enrichFiltersWithResults } from '../filters/utility';
@@ -51,7 +51,7 @@ const SearchResultsContainer: React.FC = () => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
-  const { results, filteredResults, bookingPackageDetails, entry, isLoading, filters, sortKey, selectedHotelId, flyInIsOpen } = useSelector(
+  const { results, filteredResults, bookingPackageDetails, entry, isLoading, filters, sortKey, selectedSearchResultId, flyInIsOpen } = useSelector(
     (state: SearchResultsRootState) => state.searchResults
   );
 
@@ -222,6 +222,8 @@ const SearchResultsContainer: React.FC = () => {
       }
     };
 
+    console.log('Built search request from query params', searchRequest);
+
     return searchRequest;
   };
 
@@ -268,7 +270,7 @@ const SearchResultsContainer: React.FC = () => {
       var room = { index: i, pax: [] } as BookingPackageRequestRoom;
       range(0, x.adults).forEach(() => {
         room.pax.push({
-          age: 30
+          age: Math.floor(Math.random() * 100)
         } as BookingPackagePax);
       });
       x.childAges.forEach((x) => {
@@ -343,10 +345,12 @@ const SearchResultsContainer: React.FC = () => {
             const matching = packageSearchResults.find((r) => r.productId === entry?.id);
 
             if (matching) {
-              dispatch(setSelectedHotel(matching.productId));
+              dispatch(setSelectedSearchResult(matching.productId));
             }
           } else {
-            dispatch(setSelectedHotel(packageSearchResults[0]?.productId));
+            if (context.type === 'hotel-flight') {
+              dispatch(setSelectedSearchResult(packageSearchResults[0]?.productId));
+            }
           }
         }
 
@@ -367,7 +371,11 @@ const SearchResultsContainer: React.FC = () => {
   // Seperate detailsCall
   useEffect(() => {
     const fetchPackageDetails = async () => {
-      if (!selectedHotelId || !context) return;
+      if (!selectedSearchResultId || !context) return;
+
+      if (context?.type === 'hotel' || context?.type === 'groupTour') {
+        handleFlyInToggle(true);
+      }
 
       try {
         const config: TideClientConfig = {
@@ -375,7 +383,7 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const selectedItem = results.find((r) => r.productId === selectedHotelId);
+        const selectedItem = results.find((r) => r.productId === selectedSearchResultId);
         if (!selectedItem) {
           // TODO: handle this case better, show an error message to the user
           return;
@@ -429,7 +437,7 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     fetchPackageDetails();
-  }, [selectedHotelId]);
+  }, [selectedSearchResultId]);
 
   useEffect(() => {
     const filteredResults = applyFilters(results, filters);
@@ -444,7 +452,13 @@ const SearchResultsContainer: React.FC = () => {
             {context.type === 'flight' && (
               <FlightSearchProvider tideConnection={context.tideConnection}>
                 <FlightResultsContainer isMobile={isMobile} />
-                <FlyIn srpType={context.type} isOpen={flyInIsOpen} setIsOpen={handleFlyInToggle} onPanelRef={(el) => (panelRef.current = el)} />
+                <FlyIn
+                  title="Select your fare"
+                  srpType={context.type}
+                  isOpen={flyInIsOpen}
+                  setIsOpen={handleFlyInToggle}
+                  onPanelRef={(el) => (panelRef.current = el)}
+                />
               </FlightSearchProvider>
             )}
             {(context.type === 'hotel-flight' || context.type === 'hotel' || context.type === 'groupTour' || context.type === 'roundTrip') && (
@@ -532,10 +546,16 @@ const SearchResultsContainer: React.FC = () => {
                     )}
                   </div>
                 </div>
+                {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
+                <FlyIn
+                  title={`${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`}
+                  srpType={context.type}
+                  isOpen={flyInIsOpen}
+                  setIsOpen={handleFlyInToggle}
+                  onPanelRef={(el) => (panelRef.current = el)}
+                />
               </>
             )}
-            {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button>
-            <FlyIn srpType={context.type} isOpen={flyInIsOpen} setIsOpen={handleFlyInToggle} onPanelRef={(el) => (panelRef.current = el)} /> */}
           </div>
         </div>
       )}

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

@@ -5,7 +5,7 @@ import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-clien
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
-  selectedHotelId: number | null;
+  selectedSearchResultId: number | null;
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
@@ -21,7 +21,7 @@ export interface SearchResultsState {
 const initialState: SearchResultsState = {
   results: [],
   filteredResults: [],
-  selectedHotelId: null,
+  selectedSearchResultId: null,
   selectedFlight: null,
   selectedFlightDetails: null,
   bookingPackageDetails: null,
@@ -44,8 +44,8 @@ const searchResultsSlice = createSlice({
     setFilteredResults(state, action: PayloadAction<BookingPackageItem[]>) {
       state.filteredResults = action.payload;
     },
-    setSelectedHotel(state, action: PayloadAction<number | null>) {
-      state.selectedHotelId = action.payload;
+    setSelectedSearchResult(state, action: PayloadAction<number | null>) {
+      state.selectedSearchResultId = action.payload;
     },
     setSelectedFlight(state, action: PayloadAction<ExtendedFlightSearchResponseItem | null>) {
       state.selectedFlight = action.payload;
@@ -115,7 +115,7 @@ const searchResultsSlice = createSlice({
 export const {
   setResults,
   setFilteredResults,
-  setSelectedHotel,
+  setSelectedSearchResult,
   setSelectedFlight,
   setSelectedFlightDetails,
   setBookingPackageDetails,

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

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import Spinner from '../../../search-results/components/spinner/spinner';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { getTranslations } from '../../utils/localization-util';
+
+type AccommodationFlyInProps = {
+  isLoading: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  // TODO: go to booking page?
+  const handleConfirm = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flyin__content">
+        TODO
+        {/* {isLoading && (
+          <Spinner />
+        )} */}
+      </div>
+    </>
+  );
+};
+
+export default AccommodationFlyIn;