@qite/tide-booking-component 1.4.29 → 1.4.31

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

@@ -1,14 +1,16 @@
-import { Filter, SearchResult } from '../types';
+import { Filter } from '../types';
+import { BookingPackageItem } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
-  results: SearchResult[];
+  results: BookingPackageItem[];
   isLoading: boolean;
   filters: Filter[];
   sortKey: string | null;
+  activeTab: string | null;
   currentPage: number;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     {
-      results: any[];
+      results: BookingPackageItem[];
     },
     'searchResults/setResults'
   >,
@@ -16,6 +18,7 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   setFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setFilters'>,
   resetFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/resetFilters'>,
   setSortKey: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSortKey'>,
+  setActiveTab: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setActiveTab'>,
   setCurrentPage: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentPage'>,
   resetSearchState: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<'searchResults/resetSearchState'>;
 declare const _default: import('redux').Reducer<SearchResultsState, import('redux').AnyAction>;

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

@@ -19,8 +19,6 @@ export interface SearchResultsConfiguration {
   showCustomCards?: boolean;
   customCardRenderer?: (result: SearchResult) => ReactNode;
   onResultClick?: (id: string) => void;
-  sortingOptions?: SortingOption[];
-  onSortChange?: (sortKey: string) => void;
   showMapView?: boolean;
   noResultsLabel?: string;
   isLoading?: boolean;
@@ -38,6 +36,7 @@ export interface SearchResultsConfiguration {
     loading?: string;
     searchResultCTA?: string;
   };
+  cmsHotelData?: any[];
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 export type FilterProperty = 'regime' | 'max-duration' | 'price' | 'rating' | 'theme';
@@ -59,15 +58,6 @@ export interface Filter {
   selectedMax?: number;
   selectedRating?: number;
 }
-export interface Sort {
-  label: string;
-  icon?: ReactNode;
-}
-export interface SortingOption {
-  key: 'price-asc' | 'price-desc' | 'duration-asc' | 'duration-desc' | 'rating-asc' | 'rating-desc';
-  label: string;
-  icon?: ReactNode;
-}
 export interface PaginationConfig {
   totalResults: number;
   currentPage: number;
@@ -81,9 +71,11 @@ export interface BaseSearchResult {
   description?: string;
   location?: string;
   tags?: Tag[];
-  price: string;
+  price: string | number;
   ctaText: string;
   stars?: number;
+  accommodation?: string;
+  regime?: string;
 }
 export interface HotelResult extends BaseSearchResult {
   type: 'hotel';
@@ -121,3 +113,8 @@ export interface TravelClass {
   label: string;
   icon?: ReactNode;
 }
+export interface SortingOption {
+  key: 'price-asc' | 'price-desc' | 'departure-date' | 'duration-asc' | 'duration-desc' | 'rating-asc' | 'rating-desc';
+  label: string;
+  icon?: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.29",
+  "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",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.75",
+    "@qite/tide-client": "^1.1.123",
     "@reach/router": "^1.3.4",
     "@reduxjs/toolkit": "^1.6.0",
     "@rollup/plugin-commonjs": "^19.0.1",
@@ -72,7 +72,6 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "^1.1.122",
     "react-html-comment": "^2.0.16"
   }
 }

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

@@ -17,15 +17,20 @@ interface DatesProps {
 const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
   const { language } = useContext(SettingsContext);
   const translations = getTranslations(language);
-  const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1200px)') : undefined;
+  const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)') : undefined;
+  const mqm = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)') : undefined;
 
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [panelActive, setPanelActive] = useState<boolean>(false);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top',
+    placement: mql?.matches ? 'top' : 'bottom',
     modifiers: [
+      {
+        name: 'flip',
+        enabled: false
+      },
       {
         name: 'offset',
         options: {
@@ -100,9 +105,9 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
           className={buildClassName([
             'qsm__panel qsm__panel--bordered qsm__panel--dates-pricing',
             panelActive && 'qsm__panel--active',
-            !mql?.matches && 'qsm__panel--mobile'
+            !mqm?.matches && 'qsm__panel--mobile'
           ])}
-          style={mql?.matches ? styles.popper : undefined}
+          style={mqm?.matches ? styles.popper : undefined}
           {...attributes.popper}>
           <DateRangePicker
             fromDate={value?.fromDate}

package/src/booking-wizard/components/step-indicator.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { buildClassName } from '../../shared/utils/class-util';
-import { selectTranslations } from '../features/booking/selectors';
+import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
 import SettingsContext from '../settings-context';
 
 interface StepIndicatorsProps {
@@ -10,9 +10,15 @@ interface StepIndicatorsProps {
 
 const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
   const { flightOptions, roomOptions } = useContext(SettingsContext);
+
   const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
   const allSteps = [];
+
+  if (travelersFirstStep) {
+    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+  }
   if (!flightOptions.isHidden) {
     allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
   }
@@ -21,7 +27,10 @@ const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
   }
 
   allSteps.push(translations.STEPS.EXTRA_OPTIONS);
-  allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+
+  if (!travelersFirstStep) {
+    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+  }
   allSteps.push(translations.STEPS.SUMMARY);
   allSteps.push(translations.STEPS.CONFIRMATION);
 

package/src/booking-wizard/features/booking/booking-slice.ts

@@ -64,6 +64,9 @@ export interface BookingState {
   accommodationViewId?: number;
   accommodationViews?: { [key: string]: string };
   isOption?: boolean;
+  travelersFirstStep: boolean;
+  isFetching?: boolean;
+  hasMounted: boolean;
 }
 
 const initialState: BookingState = {
@@ -99,7 +102,10 @@ const initialState: BookingState = {
   tagIds: [],
   agentAdressId: undefined,
   currentStep: OPTIONS_FORM_STEP,
-  translations: undefined
+  translations: undefined,
+  travelersFirstStep: false,
+  isFetching: false,
+  hasMounted: false
 };
 
 export const fetchPackage = createAsyncThunk('booking/fetchPackage', async (_, { dispatch }) => {
@@ -333,6 +339,12 @@ const bookingSlice = createSlice({
   name: 'booking',
   initialState,
   reducers: {
+    setHasMounted(state, action: PayloadAction<boolean>) {
+      state.hasMounted = action.payload;
+    },
+    setIsFetching(state, action: PayloadAction<boolean>) {
+      state.isFetching = action.payload;
+    },
     setOfficeId(state, action: PayloadAction<number>) {
       state.officeId = action.payload;
     },
@@ -429,6 +441,12 @@ const bookingSlice = createSlice({
     },
     setIsOption(state, action: PayloadAction<boolean>) {
       state.isOption = action.payload;
+    },
+    setTravelersFirstStep(state, action: PayloadAction<boolean>) {
+      state.travelersFirstStep = action.payload;
+    },
+    setIsUnavailable(state, action: PayloadAction<boolean>) {
+      state.isUnavailable = action.payload;
     }
   },
   extraReducers: (builder) => {
@@ -443,9 +461,12 @@ const bookingSlice = createSlice({
 
         if (!action.payload.payload) {
           state.isUnavailable = true;
+          /* state.package = undefined; */
           return;
         }
 
+        state.isUnavailable = false;
+
         const bookingRooms = state.bookingAttributes?.rooms;
         const flight = state.bookingAttributes?.flight;
         const packageDetails = action.payload.payload;
@@ -562,6 +583,8 @@ export const {
   setBookingNumber,
   setIsRetry,
   setFetchingPackage,
+  setIsFetching,
+  setHasMounted,
   setPackage,
   setPackageRooms,
   setPackageOptionPax,
@@ -578,7 +601,9 @@ export const {
   setPackageAirportGroups,
   setFlights,
   setAccommodationViewId,
-  setIsOption
+  setIsOption,
+  setTravelersFirstStep,
+  setIsUnavailable
 } = bookingSlice.actions;
 
 export default bookingSlice.reducer;

package/src/booking-wizard/features/booking/booking.tsx

@@ -20,13 +20,15 @@ import {
   setCalculateDeposit,
   setGeneratePaymentUrl,
   setIsRetry,
+  setIsUnavailable,
   setLanguageCode,
   setOfficeId,
   setPackage,
   setProductAttributes,
   setSkipPayment,
   setTagIds,
-  setTranslations
+  setTranslations,
+  setTravelersFirstStep
 } from './booking-slice';
 
 import { isEqual, isNil } from 'lodash';
@@ -51,7 +53,8 @@ import {
   selectIsUnavailable,
   selectPackageDetails,
   selectProductAttributes,
-  selectTranslations
+  selectTranslations,
+  selectTravelersFirstStep
 } from './selectors';
 
 interface BookingProps {
@@ -95,8 +98,9 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
   const bookingNumber = useSelector(selectBookingNumber);
   const isRetry = useSelector(selectIsRetry);
   const packageDetails = useSelector(selectPackageDetails);
-  const isUnvailable = useSelector(selectIsUnavailable);
+  const isUnavailable = useSelector(selectIsUnavailable);
   const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
   useEffect(() => {
     return () => {
@@ -116,7 +120,18 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     const startDate = getDateFromParams(params, 'startDate');
     const endDate = getDateFromParams(params, 'endDate');
     const catalogueId = getNumberFromParams(params, 'catalogueId') ?? getNumberFromParams(params, 'catalog');
-    const rooms = getRoomsFromParams(params, 'rooms');
+
+    let rooms = getRoomsFromParams(params, 'rooms');
+
+    if (!rooms || !rooms.length) {
+      dispatch(setTravelersFirstStep(true));
+      rooms = [{ adults: 2, children: 0, childAges: [] }];
+    }
+
+    if (travellers.travelersFirstStep === true) {
+      dispatch(setTravelersFirstStep(true));
+    }
+
     const flight = getFlightsFromParams(params, 'flight');
     const flightRouteId = getStringFromParams(params, 'flightRouteId');
     const vendorConfigurationId = getNumberFromParams(params, 'vendorConfigurationId');
@@ -169,6 +184,7 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     // Retried
     dispatch(setIsRetry(false));
 
+    dispatch(setIsUnavailable(false));
     // Fetch data
     const promise = dispatch(fetchPackage());
     return () => {
@@ -235,7 +251,7 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     return () => {
       promise.abort();
     };
-  }, [productAttributes, bookingAttributes, rooms, bookingNumber, packageDetails]);
+  }, [productAttributes]);
 
   let numberIndex = 1;
 
@@ -246,30 +262,31 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
           <div className="booking__content">
             <div className="booking__panel">
               <Router basepath={basePath}>
+                {travelersFirstStep && (
+                  <StepRoute path={'/'} number={numberIndex++} title={translations.STEPS.PERSONAL_DETAILS} component={<TravelersForm />} />
+                )}
                 {!flightOptions.isHidden && flightOptions.pathSuffix && (
-                  <StepRoute
-                    path={flightOptions.pathSuffix}
-                    number={numberIndex++}
-                    title={translations.STEPS.FLIGHT_OPTIONS}
-                    component={<FlightOptionsForm />}
-                  />
+                  <StepRoute path={'/'} number={numberIndex++} title={translations.STEPS.FLIGHT_OPTIONS} component={<FlightOptionsForm />} />
                 )}
                 {!roomOptions.isHidden && roomOptions.pathSuffix && (
                   <StepRoute path={roomOptions.pathSuffix} number={numberIndex++} title={translations.STEPS.ROOM_OPTIONS} component={<RoomOptionsForm />} />
                 )}
                 <StepRoute path={options.pathSuffix} number={numberIndex++} title={translations.STEPS.EXTRA_OPTIONS} component={<OptionsForm />} />
-                <StepRoute path={travellers.pathSuffix} number={numberIndex++} title={translations.STEPS.PERSONAL_DETAILS} component={<TravelersForm />} />
+                {!travelersFirstStep && (
+                  <StepRoute path={travellers.pathSuffix} number={numberIndex++} title={translations.STEPS.PERSONAL_DETAILS} component={<TravelersForm />} />
+                )}
                 <StepRoute path={summary.pathSuffix} number={numberIndex++} title={translations.STEPS.SUMMARY} component={<Summary />} />
                 <StepRoute path={confirmation.pathSuffix} number={numberIndex++} title={translations.STEPS.CONFIRMATION} component={<Confirmation />} />
                 <StepRoute path={error.pathSuffix} number={numberIndex++} title={translations.STEPS.ERROR} component={<Error />} />
               </Router>
             </div>
             <div className="backdrop" id="backdrop"></div>
-            {packageDetails && <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />}
+            <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />
           </div>
         </div>
       )}
-      {!packageDetails && !bookingNumber && !isUnvailable && (
+
+      {!packageDetails && !bookingNumber && !isUnavailable && (
         <div className="booking">
           <div className="booking__loader">
             {loaderComponent}
@@ -279,7 +296,7 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
           </div>
         </div>
       )}
-      {isUnvailable && (
+      {isUnavailable && !travelersFirstStep && (
         <div className="booking">
           <div className="booking__loader">
             <p className="booking__loader-text">{translations.MAIN.PRODUCT_UNAVAILABLE}</p>

package/src/booking-wizard/features/booking/selectors.ts

@@ -10,6 +10,10 @@ import { FlightInfo, Room, Traveler } from '../../types';
 import { selectNotifications } from '../price-details/price-details-slice';
 import { selectAgentId, selectTravelersFormValues } from '../travelers-form/travelers-form-slice';
 
+export const selectHasMounted = (state: RootState) => state.booking.hasMounted;
+
+export const selectIsFetching = (state: RootState) => state.booking.isFetching;
+
 export const selectCurrentStep = (state: RootState) => state.booking.currentStep;
 
 export const selectGeneratePaymentUrl = (state: RootState) => state.booking.generatePaymentUrl;
@@ -373,6 +377,8 @@ export const selectBookingPackageBookRequest = createSelector(
   }
 );
 
+export const selectTravelersFirstStep = (state: any) => state.booking.travelersFirstStep;
+
 const buildPax = (traveler: Traveler, mainBookerId?: number) => {
   return {
     id: traveler.id,

package/src/booking-wizard/features/flight-options/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 
 import { BookingPackageFlight } from '@qite/tide-client/build/types';
-import { navigate } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import { isEmpty } from 'lodash';
 import { useSelector } from 'react-redux';
 import { buildClassName } from '../../../shared/utils/class-util';
@@ -9,8 +9,15 @@ import SettingsContext from '../../settings-context';
 import { useAppDispatch } from '../../store';
 import { FlightFilterOptions, GroupedFlights } from '../../types';
 import { setCurrentStep, setFlights, setPackage } from '../booking/booking-slice';
-import { ROOM_OPTIONS_FORM_STEP } from '../booking/constants';
-import { selectBookingQueryString, selectIsFetchingProductOptions, selectPackageDetails, selectPackageFlights, selectTranslations } from '../booking/selectors';
+import { ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
+import {
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageDetails,
+  selectPackageFlights,
+  selectTranslations,
+  selectTravelersFirstStep
+} from '../booking/selectors';
 import { fetchPriceDetails } from '../price-details/price-details-slice';
 import FlightFilter from './flight-filter';
 import FlightOption from './flight-option';
@@ -28,6 +35,7 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
   const bookingQueryString = useSelector(selectBookingQueryString);
   const isLoading = useSelector(selectIsFetchingProductOptions);
   const flights = useSelector(selectPackageFlights);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
   const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
   const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
@@ -92,6 +100,10 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
   const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
   const resultCount = filteredGroups.length;
 
+  const goPrevious = () => {
+    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+  };
+
   return (
     <>
       <FlightOptionModal />
@@ -129,6 +141,18 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
           )}
         </div>
         <div className="booking__navigator">
+          {travelersFirstStep && settings.skipRouter ? (
+            <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </button>
+          ) : travelersFirstStep ? (
+            <Link
+              to={`${settings.basePath}${settings.travellers.pathSuffix}?${bookingQueryString}`}
+              title={translations.STEPS.PREVIOUS}
+              className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </Link>
+          ) : null}
           <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
             {translations.STEPS.NEXT}
           </button>

package/src/booking-wizard/features/product-options/option-room.tsx

@@ -32,7 +32,7 @@ const OptionRoom: React.FC<OptionRoomProps> = ({ packageRoom, pax, optionPax, on
     if (selectedOption) {
       startDate = getDateText(selectedOption.from, true) ?? '';
       endDate = getDateText(selectedOption.to, true) ?? '';
-      daysAndNightsText = getDatePeriodText(selectedOption.from, selectedOption.to) ?? '';
+      daysAndNightsText = getDatePeriodText(translations, selectedOption.from, selectedOption.to) ?? '';
 
       const productAttributes = useSelector(selectProductAttributes);
       productName = productAttributes?.productName ?? '';

package/src/booking-wizard/features/product-options/options-form.tsx

@@ -29,7 +29,7 @@ import {
   setPackageRooms,
   setTagIds
 } from '../booking/booking-slice';
-import { FLIGHT_OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
+import { FLIGHT_OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, SUMMARY_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
 import {
   selectAvailabilities,
   selectBookingPackagePax,
@@ -46,7 +46,8 @@ import {
   selectPackageTags,
   selectRequestRooms,
   selectTagIds,
-  selectTranslations
+  selectTranslations,
+  selectTravelersFirstStep
 } from '../booking/selectors';
 import { fetchPriceDetails } from '../price-details/price-details-slice';
 import { updatePackageRooms } from '../room-options/room-utils';
@@ -78,6 +79,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   const optionPax = useSelector(selectPackageOptionPax);
   const availabilities = useSelector(selectAvailabilities);
   const includedServiceTypes = useSelector(selectIncludedServiceTypes);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
   // ROOMS
   const showRoomOptions = settings.options.showRoomOptions ?? settings.roomOptions.isHidden;
@@ -111,9 +113,17 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+      if (travelersFirstStep) {
+        dispatch(setCurrentStep(SUMMARY_STEP));
+      } else {
+        dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+      }
     } else {
-      navigate(`${settings.basePath}${settings.travellers.pathSuffix}?${bookingQueryString}`);
+      if (travelersFirstStep) {
+        navigate(`${settings.basePath}${settings.summary.pathSuffix}?${bookingQueryString}`);
+      } else {
+        navigate(`${settings.basePath}${settings.travellers.pathSuffix}?${bookingQueryString}`);
+      }
     }
 
     e.preventDefault();

package/src/booking-wizard/features/room-options/room.tsx

@@ -86,7 +86,7 @@ const RoomOption: React.FC<RoomOptionProps> = ({ room, hasAlternatives, selected
             <p className="form__room__dates">
               {getDateText(room.from)} - {getDateText(room.to)}
             </p>
-            <span className="form__room__days">{getDatePeriodText(room.from, room.to)}</span>
+            <span className="form__room__days">{getDatePeriodText(translations, room.from, room.to)}</span>
           </div>
           <div className="form__room__footer__bottom">
             {selectedRoomPrice != undefined && (

package/src/booking-wizard/features/sidebar/index.tsx

@@ -3,6 +3,8 @@ import {
   selectIncludedServiceTypes,
   selectIsFetchingProductOptions,
   selectIsOnRequest,
+  selectIsUnavailable,
+  selectPackageDetails,
   selectPackageRooms,
   selectReturnFlight,
   selectRoomOptionDepartureFlightsMetaData,
@@ -44,7 +46,7 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
   const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
   const accommodations = useSelector(selectPackageRooms);
   const includedServiceTypes = useSelector(selectIncludedServiceTypes);
-
+  const isUnavailable = useSelector(selectIsUnavailable) || false;
   const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
 
   return (
@@ -68,6 +70,7 @@ const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl })
       headerComponent={sidebarHeaderComponent ?? undefined}
       footerComponent={sidebarFooterComponent ?? undefined}
       loaderComponent={loaderComponent ?? undefined}
+      isUnavailable={isUnavailable}
     />
   );
 };

package/src/booking-wizard/features/sidebar/sidebar-util.ts

@@ -35,13 +35,11 @@ export const getDateText = (date: string | undefined, hideYear?: boolean): strin
   }
 };
 
-export const getDatePeriodText = (from?: string, to?: string, nightsOnly?: boolean) => {
+export const getDatePeriodText = (translations: Record<string, any>, from?: string, to?: string, nightsOnly?: boolean) => {
   if (!from || !to) {
     return undefined;
   }
 
-  const translations = useSelector(selectTranslations);
-
   try {
     const fromDate = parseISO(from);
     const toDate = parseISO(to);