@qite/tide-booking-component 1.4.31 → 1.4.33

package/package.json

@@ -1,77 +1,77 @@
-{
-  "name": "@qite/tide-booking-component",
-  "version": "1.4.31",
-  "description": "React Booking wizard & Booking product component for Tide",
-  "main": "build/build-cjs/index.js",
-  "module": "build/build-esm/index.js",
-  "scripts": {
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "tsc": "tsc --noEmit",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
-  },
-  "keywords": [
-    "tide",
-    "booking",
-    "react",
-    "component"
-  ],
-  "author": "Qite",
-  "license": "OBSD",
-  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
-  "devDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.123",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/flat": "^5.0.2",
-    "@types/lodash": "^4.14.171",
-    "@types/reach__router": "^1.3.9",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/uuid": "^8.3.1",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "husky": "^9.1.7",
-    "lodash": "^4.17.21",
-    "prettier": "^2.3.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "rollup": "^2.53.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "0.36.0",
-    "tslib": "^2.3.1",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
-  },
-  "peerDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "immer": "^9.0.5",
-    "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "uuid": "^8.3.2"
-  },
-  "dependencies": {
-    "react-html-comment": "^2.0.16"
-  }
-}
+{
+  "name": "@qite/tide-booking-component",
+  "version": "1.4.33",
+  "description": "React Booking wizard & Booking product component for Tide",
+  "main": "build/build-cjs/index.js",
+  "module": "build/build-esm/index.js",
+  "scripts": {
+    "start": "rollup -c -w",
+    "build": "rollup -c",
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
+  },
+  "keywords": [
+    "tide",
+    "booking",
+    "react",
+    "component"
+  ],
+  "author": "Qite",
+  "license": "OBSD",
+  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
+  "devDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@qite/tide-client": "^1.1.123",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@types/flat": "^5.0.2",
+    "@types/lodash": "^4.14.171",
+    "@types/reach__router": "^1.3.9",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/uuid": "^8.3.1",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "husky": "^9.1.7",
+    "lodash": "^4.17.21",
+    "prettier": "^2.3.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "rollup": "^2.53.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "0.36.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.3.5",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "immer": "^9.0.5",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "uuid": "^8.3.2"
+  },
+  "dependencies": {
+    "react-html-comment": "^2.0.16"
+  }
+}

package/src/booking-product/components/date-range-picker/index.tsx

@@ -1,8 +1,9 @@
 import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, startOfDay } from 'date-fns';
 
 import { isNil } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Calendar from './calendar';
+import SettingsContext from '../../settings-context';
 
 interface DateRangePickerProps {
   fromDate?: Date;
@@ -17,6 +18,7 @@ interface DateRangePickerProps {
   onFromDateChange?: (date?: Date) => void;
   onToDateChange?: (date?: Date) => void;
   onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
+  toDateByFromDate?: (fromDate?: Date) => Date | undefined;
 }
 
 const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
@@ -29,39 +31,50 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
     }
   );
   const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
+  const { searchType = 0 } = useContext(SettingsContext);
 
   const handleDayClick = (day: Date) => {
     const { onSelectionChange } = props;
 
     if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
-      setToDate(day);
-      setWaitingForToDate(false);
-
-      if (props.onToDateChange) {
-        props.onToDateChange(undefined);
-      }
+      if (searchType === 1) {
+        // Only allow selecting the exact toDate
+        const expectedToDate = props.toDateByFromDate?.(fromDate);
+        if (expectedToDate && isEqual(day, expectedToDate)) {
+          setToDate(day);
+          setWaitingForToDate(false);
+
+          props.onToDateChange?.(undefined);
+          onSelectionChange?.(fromDate, day);
+        }
+      } else {
+        // searchType === 0 (original behavior)
+        setToDate(day);
+        setWaitingForToDate(false);
 
-      if (onSelectionChange) {
-        onSelectionChange(fromDate, day);
+        props.onToDateChange?.(undefined);
+        onSelectionChange?.(fromDate, day);
       }
     } else {
       setFromDate(day);
 
-      if (props.duration) {
-        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
+      if (searchType === 1 && props.toDateByFromDate) {
+        const to = props.toDateByFromDate(day);
         setToDate(to);
 
-        if (onSelectionChange) {
-          onSelectionChange(day, to);
+        if (to) {
+          onSelectionChange?.(day, to);
         }
+      } else if (props.duration) {
+        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
+        setToDate(to);
+        onSelectionChange?.(day, to);
       } else {
         setToDate(undefined);
         setWaitingForToDate(true);
       }
 
-      if (props.onFromDateChange) {
-        props.onFromDateChange(day);
-      }
+      props.onFromDateChange?.(day);
     }
   };
 

package/src/booking-product/components/dates.tsx

@@ -1,4 +1,4 @@
-import { format, isBefore, startOfDay } from 'date-fns';
+import { format, isBefore, startOfDay, isSameDay } from 'date-fns';
 import React, { useContext, useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import { buildClassName } from '../../shared/utils/class-util';
@@ -12,9 +12,11 @@ interface DatesProps {
   value?: DateRange;
   duration?: number;
   onChange?: (value: DateRange) => void;
+  availableDatePairs?: { fromDate: Date; toDate: Date }[];
+  isLoading?: boolean;
 }
 
-const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
+const Dates: React.FC<DatesProps> = ({ value, duration, onChange, availableDatePairs, isLoading }) => {
   const { language } = useContext(SettingsContext);
   const translations = getTranslations(language);
   const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)') : undefined;
@@ -23,6 +25,7 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [panelActive, setPanelActive] = useState<boolean>(false);
+  const { searchType = 0 } = useContext(SettingsContext);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: mql?.matches ? 'top' : 'bottom',
@@ -50,6 +53,21 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
     if (!panelActive) setPanelActive(true);
   };
 
+  // Only allow selecting fromDates that are in availableDatePairs
+  const disabledDaysFunction = (date: Date) => {
+    if (!availableDatePairs || availableDatePairs.length === 0) {
+      return isBefore(date, startOfDay(new Date()));
+    }
+    return !availableDatePairs.some((pair) => isSameDay(pair.fromDate, date));
+  };
+
+  // Given a fromDate, find the corresponding toDate
+  const findToDateByFromDate = (fromDate?: Date) => {
+    if (!fromDate || !availableDatePairs) return undefined;
+    const found = availableDatePairs.find((pair) => isSameDay(pair.fromDate, fromDate));
+    return found ? found.toDate : undefined;
+  };
+
   const handleSelectionChange = (fromDate?: Date, toDate?: Date) => {
     if (onChange) {
       onChange({ fromDate, toDate });
@@ -77,7 +95,11 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
         {translations.PRODUCT.TRAVEL_PERIOD}
       </div>
       <div className="form__group form__group--datepicker form__group--icon">
-        <div className="form__group-input">
+        <div
+          className={
+            'form__group-input' +
+            ((searchType === 1 && availableDatePairs && availableDatePairs.length === 0) || isLoading ? ' form__group-input--disabled' : '')
+          }>
           <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
           <input
             type="text"
@@ -89,7 +111,7 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
           />
         </div>
 
-        <div className="form__group-input">
+        <div className={'form__group-input' + (searchType === 1 || isLoading ? ' form__group-input--disabled' : '')}>
           <label className="form__label">{translations.PRODUCT.RETURN}</label>
           <input
             type="text"
@@ -113,7 +135,8 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
             fromDate={value?.fromDate}
             toDate={value?.toDate}
             duration={duration}
-            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
+            disabledDaysFunction={disabledDaysFunction}
+            toDateByFromDate={findToDateByFromDate}
             onSelectionChange={handleSelectionChange}
           />
           {!mql?.matches && (

package/src/booking-product/components/list-view.tsx

@@ -0,0 +1,54 @@
+import { BookingPackageItem } from '@qite/tide-client';
+import React, { useContext } from 'react';
+import { getTranslations } from '../../shared/utils/localization-util';
+import SettingsContext from '../settings-context';
+import { differenceInCalendarDays } from 'date-fns';
+import { isEmpty } from 'lodash';
+
+interface ListViewProps {
+  searchResults: BookingPackageItem[];
+  onSelect?: (selectedItem: BookingPackageItem) => void;
+}
+
+const ListView: React.FC<ListViewProps> = ({ searchResults, onSelect }) => {
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const formatDate = (dateString: string) => {
+    return new Intl.DateTimeFormat(language).format(new Date(dateString));
+  };
+
+  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedDate = event.target.value;
+    const selectedItem = searchResults.find((item) => item.fromDate === selectedDate);
+    if (selectedItem && onSelect) {
+      onSelect(selectedItem);
+    }
+  };
+
+  const getNightsAndDays = (result: BookingPackageItem) => {
+    const nights = differenceInCalendarDays(new Date(result.toDate), new Date(result.fromDate));
+    return `${nights} ${translations.PRODUCT.NIGHTS}, ${nights + 1} ${translations.PRODUCT.DAYS}`;
+  };
+
+  const getDayLongFormat = (dateString: string) => {
+    const day = new Date(dateString).toLocaleDateString(language, { weekday: 'long' });
+    return day.charAt(0).toUpperCase() + day.slice(1);
+  };
+
+  return (
+    <div className="dropdown">
+      <select name="selectDate" id="selectDate" onChange={handleOptionChange}>
+        {!isEmpty(searchResults) &&
+          searchResults.map((result, index) => (
+            <option key={index} value={result.fromDate}>
+              {getDayLongFormat(result.fromDate)} {formatDate(result.fromDate)} - {getDayLongFormat(result.toDate)} {formatDate(result.toDate)} ({' '}
+              {getNightsAndDays(result)} ) - {result.price.toFixed(2)} {result.currencyCode}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export default ListView;

package/src/booking-product/components/product.tsx

@@ -1,8 +1,15 @@
 import JsonURL from '@jsonurl/jsonurl';
-import { BookingPackageDetailsRequest, BookingPackagePax, BookingPackageRequest, BookingPackageRequestRoom } from '@qite/tide-client/build/types';
-import { addDays, addMonths, format, formatISO } from 'date-fns';
-import { omit } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
+import {
+  BookingPackageDetailsRequest,
+  BookingPackageItem,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageSearchRequest
+} from '@qite/tide-client/build/types';
+import { addDays, addMonths, addYears, format, formatISO } from 'date-fns';
+import { isEmpty, now, omit } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { ApiSettingsState } from '../../shared/types';
 import { getTranslations } from '../../shared/utils/localization-util';
 import { getDateAsDateFromParams, getRoomsFromParams } from '../../shared/utils/query-string-util';
@@ -13,7 +20,9 @@ import { formatPriceByMode } from '../utils/price';
 import Dates from './dates';
 import Footer from './footer';
 import Header from './header';
+import ListView from './list-view';
 import Rooms from './rooms';
+import { DATE_FORMAT } from '../constants';
 
 interface ProductProps {
   productCode: string;
@@ -23,8 +32,21 @@ interface ProductProps {
 }
 
 const Product: React.FC<ProductProps> = ({ productCode, productName, duration, rating }) => {
-  const { apiKey, apiUrl, officeId, agentId, catalogueId, includeFlights, language, basePath, priceMode, addProductToQuery, isOffer } =
-    useContext(SettingsContext);
+  const {
+    apiKey,
+    apiUrl,
+    officeId,
+    agentId,
+    catalogueId,
+    includeFlights,
+    language,
+    basePath,
+    priceMode,
+    addProductToQuery,
+    isOffer,
+    displayMode = 'calendar',
+    searchType = 0
+  } = useContext(SettingsContext);
   const translations = getTranslations(language);
 
   const [loaded, setLoaded] = useState<boolean>(false);
@@ -34,11 +56,19 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   const [hasFlight, setHasFlight] = useState<boolean>(false);
   const [hasTransfer, setHasTransfer] = useState<boolean>(false);
   const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
+  const [searchResponse, setSearchResponse] = useState<BookingPackageItem[]>([]);
   const [dateRange, setDateRange] = useState<DateRange>();
   const [packageProductName, setPackageProductName] = useState<string>(productName);
   const [currencyCode, setCurrencyCode] = useState<string>('');
+  const [searchResults, setSearchResults] = useState<BookingPackageItem[]>([]);
+  const skipNextFetchRef = useRef(false);
 
   const fetchPackage = async (signal: AbortSignal) => {
+    if (displayMode === 'list' && searchType !== 1) {
+      console.error('The combination of searchType and displayMode is not supported.' + " Please set searchType to 1 when using displayMode 'list'.");
+      return;
+    }
+
     if (loaded && productCode && dateRange?.fromDate && dateRange?.toDate && rooms) {
       const apiSettingsState =
         apiKey && apiUrl
@@ -72,7 +102,7 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
         return requestRoom;
       });
 
-      const request = {
+      const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
         officeId: officeId,
         agentId: agentId,
         payload: {
@@ -83,13 +113,40 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
           toDate: endDate,
           includeFlights: includeFlights,
           rooms: requestRooms
-        } as BookingPackageDetailsRequest
-      } as BookingPackageRequest<BookingPackageDetailsRequest>;
+        }
+      };
+
+      const searchRequest: BookingPackageRequest<BookingPackageSearchRequest> = {
+        officeId: officeId,
+        agentId: agentId,
+        payload: {
+          searchType: 1,
+          useExactDates: false,
+          earliestFromOffset: 0,
+          latestToOffset: 0,
+          catalogueIds: [catalogueId],
+          productCodes: [productCode],
+          fromDate: new Date(now()).toISOString(),
+          toDate: addYears(new Date(now()), 1).toISOString(),
+          includeFlights: includeFlights,
+          rooms: requestRooms
+        }
+      };
 
       setIsLoading(true);
-      const response = await packageApi.fetchDetails(request, signal, language, apiSettingsState);
-      if (!response.errorCode && response.payload) {
-        const selectedOption = response.payload.options.find((x) => x.isSelected);
+
+      let detailResponse;
+      if (displayMode === 'calendar' && searchType === 0) {
+        detailResponse = await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState);
+      }
+
+      if (searchType === 1) {
+        setSearchResponse(await packageApi.fetchSearch(searchRequest, signal, apiSettingsState));
+      }
+
+      if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+        const selectedOption = detailResponse.payload.options.find((x) => x.isSelected);
+
         if (selectedOption) {
           const hasFlight = selectedOption.includedServiceTypes.some((x) => x === 7);
           const hasTranfer = selectedOption.includedServiceTypes.some((x) => x === 13);
@@ -97,11 +154,8 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
           setPrice(selectedOption.price);
           setHasFlight(hasFlight);
           setHasTransfer(hasTranfer);
-          setCurrencyCode(response.payload.currencyCode);
-
-          if (!productName) {
-            setPackageProductName(selectedOption.name);
-          }
+          setCurrencyCode(detailResponse.payload.currencyCode);
+          setPackageProductName(selectedOption.name);
         }
       } else {
         setPrice(undefined);
@@ -129,11 +183,11 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     }
 
     if (dateRange?.fromDate) {
-      params['startDate'] = format(dateRange.fromDate, 'yyyy-MM-dd');
+      params['startDate'] = format(dateRange.fromDate, DATE_FORMAT);
     }
 
     if (dateRange?.toDate) {
-      params['endDate'] = format(dateRange.toDate, 'yyyy-MM-dd');
+      params['endDate'] = format(dateRange.toDate, DATE_FORMAT);
     }
 
     params['catalogueId'] = catalogueId.toString();
@@ -158,10 +212,67 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   };
 
   const handleDateChange = (value: DateRange) => {
+    if (searchType === 1) {
+      skipNextFetchRef.current = true;
+    }
     setDateRange(value);
+
+    if (value.fromDate && value.toDate && searchType === 1 && searchResults.length > 0) {
+      const from = format(value.fromDate, DATE_FORMAT);
+      const to = format(value.toDate, DATE_FORMAT);
+
+      const selectedItem = searchResults.find((item) => {
+        const itemFrom = format(new Date(item.fromDate), DATE_FORMAT);
+        const itemTo = format(new Date(item.toDate), DATE_FORMAT);
+
+        return itemFrom === from && itemTo === to;
+      });
+
+      if (selectedItem) {
+        setPrice(selectedItem.price);
+        setPackageProductName(selectedItem.name);
+      }
+    }
+  };
+
+  const handleDateSelect = (selectedItem: BookingPackageItem) => {
+    if (searchType === 1) {
+      skipNextFetchRef.current = true;
+    }
+    const fromDate = new Date(selectedItem.fromDate);
+    const toDate = new Date(selectedItem.toDate);
+
+    setDateRange({ fromDate, toDate });
+    setPrice(selectedItem.price);
+    setPackageProductName(selectedItem.name);
   };
 
   useEffect(() => {
+    if (searchResponse && !isEmpty(searchResponse)) {
+      setSearchResults(searchResponse);
+      const selectedItem = searchResponse.find(
+        (item) => new Date(item.fromDate).getTime() === dateRange?.fromDate?.getTime() && new Date(item.toDate).getTime() === dateRange?.toDate?.getTime()
+      );
+      if (selectedItem) {
+        setPrice(selectedItem.price);
+        setPackageProductName(selectedItem.name);
+      } else {
+        setPrice(searchResponse[0].price);
+        setPackageProductName(searchResponse[0].name);
+      }
+    } else {
+      setSearchResults([]);
+      setIsLoading(false);
+      setPackageProductName(translations.PRODUCT.NOT_AVAILABLE);
+    }
+  }, [searchResponse]);
+
+  useEffect(() => {
+    if (searchType === 1 && skipNextFetchRef.current) {
+      skipNextFetchRef.current = false;
+      return;
+    }
+
     const controller = new AbortController();
     const { signal } = controller;
 
@@ -207,6 +318,15 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     setLoaded(true);
   }, [location]);
 
+  useEffect(() => {
+    if (searchType === 1 && searchResults.length > 0 && !dateRange) {
+      const first = searchResults[0];
+      setDateRange({ fromDate: new Date(first.fromDate), toDate: new Date(first.toDate) });
+      setPackageProductName(first.name);
+      setPrice(first.price);
+    }
+  }, [searchResults]);
+
   const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
   const durationCount = 0;
   const priceText = formatPriceByMode(
@@ -225,7 +345,19 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
       <Header name={packageProductName} rating={rating} priceText={priceText} isLoading={isLoading} hasFlight={hasFlight} hasTransfer={hasTransfer} />
       <div className="booking-product__body">
         <Rooms rooms={rooms} isDisabled={roomsIsDisabled} setIsDisabled={setRoomsIsDisabled} onChange={handleRoomChange} />
-        <Dates value={dateRange} duration={duration} onChange={handleDateChange} />
+        {displayMode === 'calendar' && (
+          <Dates
+            value={dateRange}
+            duration={duration}
+            isLoading={isLoading}
+            onChange={handleDateChange}
+            availableDatePairs={searchResults.map((item) => ({
+              fromDate: new Date(item.fromDate),
+              toDate: new Date(item.toDate)
+            }))}
+          />
+        )}
+        {displayMode === 'list' && <ListView searchResults={searchResults} onSelect={handleDateSelect} />}
       </div>
       <Footer priceText={priceText} isLoading={isLoading} isOffer={isOffer} roomsIsDisabled={roomsIsDisabled} handleBookClick={handleBookClick} />
     </div>

package/src/booking-product/constants.ts

@@ -0,0 +1 @@
+export const DATE_FORMAT = 'yyyy-MM-dd';

package/src/booking-product/settings-context.ts

@@ -8,7 +8,9 @@ const SettingsContext = React.createContext<ProductSettingsContextProps>({
   catalogueId: 1,
   language: 'nl-BE',
   basePath: 'boeken',
-  priceMode: 0
+  priceMode: 0,
+  displayMode: 'calendar',
+  searchType: 0
 });
 
 export default SettingsContext;

package/src/booking-product/types.ts

@@ -11,6 +11,8 @@ export interface Settings {
   apiKey?: string;
   addProductToQuery?: boolean;
   isOffer?: boolean;
+  displayMode?: 'list' | 'calendar';
+  searchType?: number;
 
   alternativeActionText?: string;
   alternativeAction?: () => void;