@qite/tide-booking-component 1.4.86 → 1.4.87

package/build/build-cjs/index.js

@@ -45956,11 +45956,15 @@ var GroupTourCard = function (_a) {
   var result = _a.result,
     languageCode = _a.languageCode,
     cmsItem = _a.cmsItem;
-  var dispatch = reactRedux.useDispatch();
-  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
+  var context = React.useContext(SearchResultsConfigurationContext);
   var selectedSearchResultId = reactRedux.useSelector(function (state) {
     return state.searchResults;
   }).selectedSearchResultId;
+  if (!context) {
+    return;
+  }
+  var dispatch = reactRedux.useDispatch();
+  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
   var genders = ((_b = result.allotment) === null || _b === void 0 ? void 0 : _b.travellerGenders) || [];
   var maleCount = genders.filter(function (g) {
     return g === 0;
@@ -45972,6 +45976,7 @@ var GroupTourCard = function (_a) {
     return g === 2;
   }).length;
   var handleChange = function (productId) {
+    console.log('Selected product ID:', productId);
     dispatch(setSelectedSearchResult(productId));
   };
   return React__default['default'].createElement(
@@ -46092,6 +46097,17 @@ var GroupTourCard = function (_a) {
             translations.PRODUCT.PER_PERSON
           )
         ),
+        React__default['default'].createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'cta cta--select',
+            onClick: function () {
+              return context.onBook && context.onBook(result);
+            }
+          },
+          translations === null || translations === void 0 ? void 0 : translations.PRODUCT.BOOK_NOW
+        ),
         React__default['default'].createElement(
           'button',
           {
@@ -47023,11 +47039,11 @@ var SearchResultsContainer = function () {
     function () {
       var fetchDetails = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
+          var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsResponse, err_3;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
               case 0:
+                console.log('Fetching details for selected search result', selectedSearchResultId);
                 if (!selectedSearchResultId || !context) return [2 /*return*/];
                 if (
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
@@ -47035,9 +47051,9 @@ var SearchResultsContainer = function () {
                 ) {
                   handleFlyInToggle(true);
                 }
-                _c.label = 1;
+                _a.label = 1;
               case 1:
-                _c.trys.push([1, 6, , 7]);
+                _a.trys.push([1, 6, , 7]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
@@ -47081,36 +47097,20 @@ var SearchResultsContainer = function () {
                 requestRooms = getRequestRoomsFromEntry(entry.rooms);
                 return [4 /*yield*/, build.details(config, detailsRequest)];
               case 2:
-                detailsResponse = _c.sent();
+                detailsResponse = _a.sent();
                 console.log('Details:', detailsResponse);
                 dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
                 return [3 /*break*/, 5];
               case 3:
-                return [4 /*yield*/, build.detailsWL(config, detailsRequest)];
+                return [4 /*yield*/, build.details(config, detailsRequest)];
               case 4:
-                detailsWLResponse = _c.sent();
-                console.log('Details with entryLight:', detailsWLResponse);
-                dispatch(
-                  setBookingPackageDetails({
-                    details:
-                      (_a = detailsWLResponse === null || detailsWLResponse === void 0 ? void 0 : detailsWLResponse.payload) === null || _a === void 0
-                        ? void 0
-                        : _a.bookingPackage
-                  })
-                );
-                dispatch(
-                  setEntry({
-                    entry:
-                      (_b = detailsWLResponse === null || detailsWLResponse === void 0 ? void 0 : detailsWLResponse.payload) === null || _b === void 0
-                        ? void 0
-                        : _b.entry
-                  })
-                );
-                _c.label = 5;
+                detailsResponse = _a.sent();
+                dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
+                _a.label = 5;
               case 5:
                 return [3 /*break*/, 7];
               case 6:
-                err_3 = _c.sent();
+                err_3 = _a.sent();
                 console.error('Failed to fetch package details', err_3);
                 return [3 /*break*/, 7];
               case 7:

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

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

package/build/build-esm/index.js

@@ -45708,11 +45708,15 @@ var GroupTourCard = function (_a) {
   var result = _a.result,
     languageCode = _a.languageCode,
     cmsItem = _a.cmsItem;
-  var dispatch = useDispatch();
-  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
+  var context = useContext(SearchResultsConfigurationContext);
   var selectedSearchResultId = useSelector(function (state) {
     return state.searchResults;
   }).selectedSearchResultId;
+  if (!context) {
+    return;
+  }
+  var dispatch = useDispatch();
+  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
   var genders = ((_b = result.allotment) === null || _b === void 0 ? void 0 : _b.travellerGenders) || [];
   var maleCount = genders.filter(function (g) {
     return g === 0;
@@ -45724,6 +45728,7 @@ var GroupTourCard = function (_a) {
     return g === 2;
   }).length;
   var handleChange = function (productId) {
+    console.log('Selected product ID:', productId);
     dispatch(setSelectedSearchResult(productId));
   };
   return React__default.createElement(
@@ -45844,6 +45849,17 @@ var GroupTourCard = function (_a) {
             translations.PRODUCT.PER_PERSON
           )
         ),
+        React__default.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'cta cta--select',
+            onClick: function () {
+              return context.onBook && context.onBook(result);
+            }
+          },
+          translations === null || translations === void 0 ? void 0 : translations.PRODUCT.BOOK_NOW
+        ),
         React__default.createElement(
           'button',
           {
@@ -46775,11 +46791,11 @@ var SearchResultsContainer = function () {
     function () {
       var fetchDetails = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
+          var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsResponse, err_3;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
               case 0:
+                console.log('Fetching details for selected search result', selectedSearchResultId);
                 if (!selectedSearchResultId || !context) return [2 /*return*/];
                 if (
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
@@ -46787,9 +46803,9 @@ var SearchResultsContainer = function () {
                 ) {
                   handleFlyInToggle(true);
                 }
-                _c.label = 1;
+                _a.label = 1;
               case 1:
-                _c.trys.push([1, 6, , 7]);
+                _a.trys.push([1, 6, , 7]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
@@ -46833,36 +46849,20 @@ var SearchResultsContainer = function () {
                 requestRooms = getRequestRoomsFromEntry(entry.rooms);
                 return [4 /*yield*/, build.details(config, detailsRequest)];
               case 2:
-                detailsResponse = _c.sent();
+                detailsResponse = _a.sent();
                 console.log('Details:', detailsResponse);
                 dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
                 return [3 /*break*/, 5];
               case 3:
-                return [4 /*yield*/, build.detailsWL(config, detailsRequest)];
+                return [4 /*yield*/, build.details(config, detailsRequest)];
               case 4:
-                detailsWLResponse = _c.sent();
-                console.log('Details with entryLight:', detailsWLResponse);
-                dispatch(
-                  setBookingPackageDetails({
-                    details:
-                      (_a = detailsWLResponse === null || detailsWLResponse === void 0 ? void 0 : detailsWLResponse.payload) === null || _a === void 0
-                        ? void 0
-                        : _a.bookingPackage
-                  })
-                );
-                dispatch(
-                  setEntry({
-                    entry:
-                      (_b = detailsWLResponse === null || detailsWLResponse === void 0 ? void 0 : detailsWLResponse.payload) === null || _b === void 0
-                        ? void 0
-                        : _b.entry
-                  })
-                );
-                _c.label = 5;
+                detailsResponse = _a.sent();
+                dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
+                _a.label = 5;
               case 5:
                 return [3 /*break*/, 7];
               case 6:
-                err_3 = _c.sent();
+                err_3 = _a.sent();
                 console.error('Failed to fetch package details', err_3);
                 return [3 /*break*/, 7];
               case 7:

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.86",
+  "version": "1.4.87",
   "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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Icon from '../icon';
 import { BookingPackageItem } from '@qite/tide-client';
 import { format } from 'date-fns';
@@ -7,6 +7,7 @@ import { SearchResultsRootState } from '../../store/search-results-store';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSelectedSearchResult } from '../../store/search-results-slice';
 import he from 'he';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 
 interface GroupTourCardProps {
   result: BookingPackageItem;
@@ -15,9 +16,13 @@ interface GroupTourCardProps {
 }
 
 const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  if (!context) {
+    return;
+  }
   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;
@@ -88,6 +93,9 @@ 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'}`}

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

@@ -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;
-
       if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
         handleFlyInToggle(true);
       }
@@ -632,10 +632,13 @@ const SearchResultsContainer: React.FC = () => {
           console.log('Details:', detailsResponse);
           dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
         } else {
-          const detailsWLResponse = await detailsWL(config, detailsRequest);
-          console.log('Details with entryLight:', detailsWLResponse);
-          dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
-          dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
+          // const detailsWLResponse = await detailsWL(config, detailsRequest);
+          // console.log('Details with entryLight:', detailsWLResponse);
+          // dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
+          // dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
+
+          const detailsResponse = await details(config, detailsRequest);
+          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
         }
       } catch (err) {
         console.error('Failed to fetch package details', err);

package/src/search-results/types.ts

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