@qite/tide-booking-component 1.4.30 → 1.4.31

package/package.json

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

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);

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

@@ -31,6 +31,7 @@ interface SidebarProps {
   headerComponent?: JSX.Element;
   footerComponent?: JSX.Element;
   loaderComponent?: JSX.Element;
+  isUnavailable?: boolean;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -52,7 +53,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   isOnRequest,
   headerComponent,
   footerComponent,
-  loaderComponent
+  loaderComponent,
+  isUnavailable
 }) => {
   const [active, setActive] = useState<boolean>(false);
   const translations = useSelector(selectTranslations);
@@ -75,127 +77,133 @@ const Sidebar: React.FC<SidebarProps> = ({
       <div className="booking__sidebar-frame">
         <ProductCard productName={productName} thumbnailUrl={thumbnailUrl} handleToggleClick={handleToggleClick} />
         <div className="pricing-summary">
-          <div className="pricing-summary__wrapper">
-            <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
-              <div className="pricing-summary__group">
-                <h6 className="pricing-summary__title">{translations.SIDEBAR.TRAVEL_INFO}</h6>
-                {!isEmpty(travelerRooms) &&
-                  travelerRooms?.map((room, rIndex) => (
-                    <div className="pricing-summary__row" key={rIndex}>
-                      <div className="pricing-summary__property">
-                        {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
-                        {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+          {!isUnavailable ? (
+            <div className="pricing-summary__wrapper">
+              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                <div className="pricing-summary__group">
+                  <h6 className="pricing-summary__title">{translations.SIDEBAR.TRAVEL_INFO}</h6>
+                  {!isEmpty(travelerRooms) &&
+                    travelerRooms?.map((room, rIndex) => (
+                      <div className="pricing-summary__row" key={rIndex}>
+                        <div className="pricing-summary__property">
+                          {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
+                          {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+                        </div>
+
+                        <div className="pricing-summary__value">{room}</div>
                       </div>
+                    ))}
 
-                      <div className="pricing-summary__value">{room}</div>
+                  {startDateText && (
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">
+                        {startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE}
+                      </div>
+                      <div className="pricing-summary__value">{startDateText}</div>
                     </div>
-                  ))}
+                  )}
 
-                {startDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">
-                      {startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE}
+                  {endDateText && (
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">{translations.SIDEBAR.ARRIVAL}</div>
+                      <div className="pricing-summary__value">{endDateText}</div>
                     </div>
-                    <div className="pricing-summary__value">{startDateText}</div>
-                  </div>
-                )}
+                  )}
+                </div>
 
-                {endDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">{translations.SIDEBAR.ARRIVAL}</div>
-                    <div className="pricing-summary__value">{endDateText}</div>
-                  </div>
+                {isLoading && loaderComponent}
+                {!isLoading && departureFlightMetaData && (
+                  <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
                 )}
-              </div>
-
-              {isLoading && loaderComponent}
-              {!isLoading && departureFlightMetaData && (
-                <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
-              )}
 
-              {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
+                {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
 
-              {accommodations && (
-                <div className="pricing-summary__group">
-                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
-                  {accommodations.map((accommodation) => {
-                    let option = accommodation.options.find((x) => x.isSelected);
-                    return (
-                      <div key={accommodation.index}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">
-                            {option?.accommodationName}
-                            {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
-                            {option?.isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
-                          </div>
-                          {/*<div className="pricing-summary__value">
+                {accommodations && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
+                    {accommodations.map((accommodation) => {
+                      let option = accommodation.options.find((x) => x.isSelected);
+                      return (
+                        <div key={accommodation.index}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">
+                              {option?.accommodationName}
+                              {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                              {option?.isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                            </div>
+                            {/*<div className="pricing-summary__value">
                               {option && option.price > 0 && formatPrice(option?.price)}
                             </div>*/}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summarty__property">{option?.regimeName}</div>
+                            <div className="price-summary__value">{!isFlightOnly && getDatePeriodText(translations, option?.from, option?.to, true)}</div>
+                          </div>
                         </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summarty__property">{option?.regimeName}</div>
-                          <div className="price-summary__value">{!isFlightOnly && getDatePeriodText(option?.from, option?.to, true)}</div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {!isLoading && canShowPriceBreakdownSection && (
+                <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                  {basePrice !== undefined && basePrice > 0 && (
+                    <div className="pricing-summary__group">
+                      <div className="pricing-summary__row">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SIDEBAR.BASE_PRICE}</h6>
                         </div>
+                        <div className="pricing-summary__value">{formatPrice(basePrice, currencyCode)}</div>
                       </div>
-                    );
-                  })}
+                    </div>
+                  )}
+                  {!isEmpty(includedCosts) && (
+                    <div className="pricing-summary__group">
+                      <h6 className="pricing-summary__title">{translations.SIDEBAR.INCLUDED_COSTS}</h6>
+                      {includedCosts?.map((priceDetail, index) => (
+                        <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">{priceDetail.productName}</div>
+                            {priceDetail.showPrice && (
+                              <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                            )}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                          </div>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
+                  {!isEmpty(extraCosts) && (
+                    <div className="pricing-summary__group">
+                      <h6 className="pricing-summary__title">{translations.SIDEBAR.EXTRA_COSTS}</h6>
+                      {extraCosts?.map((priceDetail, index) => (
+                        <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">{priceDetail.productName}</div>
+                            {priceDetail.showPrice && (
+                              <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                            )}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                          </div>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
                 </div>
               )}
             </div>
+          ) : (
+            <div className="pricing-summary__region">
+              <h6 className="pricing-summary__title">{translations.SIDEBAR.PACKAGE_NOT_AVAILABLE}</h6>
+            </div>
+          )}
 
-            {!isLoading && canShowPriceBreakdownSection && (
-              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
-                {basePrice !== undefined && basePrice > 0 && (
-                  <div className="pricing-summary__group">
-                    <div className="pricing-summary__row">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">{translations.SIDEBAR.BASE_PRICE}</h6>
-                      </div>
-                      <div className="pricing-summary__value">{formatPrice(basePrice, currencyCode)}</div>
-                    </div>
-                  </div>
-                )}
-                {!isEmpty(includedCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">{translations.SIDEBAR.INCLUDED_COSTS}</h6>
-                    {includedCosts?.map((priceDetail, index) => (
-                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">{priceDetail.productName}</div>
-                          {priceDetail.showPrice && (
-                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
-                          )}
-                        </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-                {!isEmpty(extraCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">{translations.SIDEBAR.EXTRA_COSTS}</h6>
-                    {extraCosts?.map((priceDetail, index) => (
-                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">{priceDetail.productName}</div>
-                          {priceDetail.showPrice && (
-                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
-                          )}
-                        </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {!isLoading && canShowTotalPriceSection && (
+          {!isLoading && canShowTotalPriceSection && !isUnavailable && (
             <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
               {deposit && remainingAmount > 0 ? (
                 <div className="pricing-summary__group">

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

@@ -6,6 +6,7 @@ import { TravelersFormValues, RoomTraveler } from '../../types';
 
 export interface TravelersFormState {
   formValues?: TravelersFormValues;
+  isTravelersFirst?: boolean;
 }
 
 export const CHILD_MAX_AGE = 17;

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

@@ -1,7 +1,8 @@
 import { compact, get, sortBy } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { setCurrentStep } from '../booking/booking-slice';
+import { fetchPackage, setCurrentStep, setHasMounted, setIsFetching } from '../booking/booking-slice';
+import { selectBookingAttributes, selectHasMounted, selectIsFetching, selectIsUnavailable, selectTravelersFirstStep } from '../booking/selectors';
 import { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
 
 import { Link, navigate } from '@reach/router';
@@ -16,12 +17,12 @@ import SettingsContext from '../../settings-context';
 import { useAppDispatch } from '../../store';
 import { RoomTraveler, Traveler, TravelersFormValues } from '../../types';
 import { setBookingType } from '../booking/booking-slice';
-import { OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
 import { selectAgentAdressId, selectAgents, selectBookingQueryString, selectBookingType, selectStartDate, selectTranslations } from '../booking/selectors';
 import { fetchPriceDetails } from '../price-details/price-details-slice';
+import GenderControl from './controls/gender-control';
 import TypeAheadInput from './type-ahead-input';
 import validateForm from './validate-form';
-import GenderControl from './controls/gender-control';
 import PhoneInput from '../../components/phone-input';
 
 interface TravelersFormProps {}
@@ -94,6 +95,12 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
   const agents = useSelector(selectAgents);
   const agentAdressId = useSelector(selectAgentAdressId);
   const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+  const isUnavailable = useSelector(selectIsUnavailable);
+  const bookingAttributes = useSelector(selectBookingAttributes);
+  const isFetching = useSelector(selectIsFetching);
+  const hasMounted = useSelector(selectHasMounted);
+
   const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
 
   const initialValues =
@@ -135,12 +142,20 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           validateForm(values, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields),
         onSubmit: (values) => {
           dispatch(setFormValues(values));
-          dispatch(fetchPriceDetails());
+          dispatch(fetchPackage());
 
           if (settings.skipRouter) {
-            dispatch(setCurrentStep(SUMMARY_STEP));
+            if (travelersFirstStep) {
+              dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+            } else {
+              dispatch(setCurrentStep(SUMMARY_STEP));
+            }
           } else {
-            navigate(`${settings.basePath}${settings.summary.pathSuffix}?${bookingQueryString}`);
+            if (travelersFirstStep) {
+              navigate(`${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`);
+            } else {
+              navigate(`${settings.basePath}${settings.summary.pathSuffix}?${bookingQueryString}`);
+            }
           }
         }
       });
@@ -149,6 +164,51 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
     dispatch(fetchPriceDetails());
   }, []);
 
+  useEffect(() => {
+    if (!bookingAttributes?.rooms?.length || isFetching) return;
+
+    if (!hasMounted) {
+      dispatch(setHasMounted(true));
+      return;
+    }
+
+    const fetchAll = async () => {
+      dispatch(setIsFetching(true));
+
+      try {
+        await dispatch(fetchPackage());
+        await dispatch(fetchPriceDetails());
+      } finally {
+        dispatch(setIsFetching(false));
+      }
+    };
+
+    fetchAll();
+  }, [bookingAttributes?.rooms]);
+
+  // Update URL querystring when form data changes
+  useEffect(() => {
+    if (settings.skipRouter || !travelersFirstStep) return;
+    const params = new URLSearchParams(bookingQueryString);
+    params.delete('rooms');
+    const roomsString = formik.values.rooms
+      .map((room) => {
+        const adults = room.adults ? room.adults.length : 0;
+        const childAges = room.children && room.children.length ? room.children.map((c) => c.age).join(',') : '';
+        return `adults:${adults},childAges:(${childAges})`;
+      })
+      .map((s) => `(${s})`)
+      .join(',');
+    let query = params.toString();
+    if (query) {
+      query += `&rooms=(${roomsString})`;
+    } else {
+      query = `rooms=(${roomsString})`;
+    }
+    const newUrl = `${window.location.pathname}?${query}`;
+    navigate(newUrl, { replace: true });
+  }, [formik.values]);
+
   useEffect(() => {
     if (agents && settings.affiliateSlug) {
       const agent = agents.find((x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug);
@@ -206,6 +266,55 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
     dispatch(setBookingType('b2c'));
   };
 
+  const handleAddTraveler = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults: [...rooms[roomIndex].adults, newAdult]
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveTraveler = (roomIndex: number, travelerIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const adults = [...rooms[roomIndex].adults];
+    if (adults.length <= 1) {
+      return;
+    }
+    adults.splice(travelerIndex, 1);
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleAddRoom = () => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms.push({ adults: [newAdult], children: [] });
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveRoom = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    rooms.splice(roomIndex, 1);
+    formik.setFieldValue('rooms', rooms);
+  };
+
   const toggleAgent = (value: boolean) => {
     setShowAgents(value);
 
@@ -440,6 +549,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
       ) : (
         <>
           <div className="form__travelers__wrapper">
+            {/* map each room */}
             {formik.values.rooms.map((room, rIndex) => (
               <div key={rIndex}>
                 {formik.values.rooms.length > 1 && (
@@ -460,8 +570,14 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                         ]).join('')}
                       </p>
                     </div>
+                    {travelersFirstStep && formik.values.rooms.length > 1 && (
+                      <button type="button" className="cta cta--secondary" onClick={() => handleRemoveRoom(rIndex)}>
+                        Verwijder reisgezelschap
+                      </button>
+                    )}
                   </div>
                 )}
+                {/* map adults here for the room */}
                 {room.adults.map((travelerValues, index) => (
                   <div className="form__region" key={travelerValues.id}>
                     <div className="form__region-header">
@@ -581,6 +697,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                             value={travelerValues.birthDate}
                           />
                         </div>
+                        {travelersFirstStep && room.adults.length > 1 && (
+                          <button type="button" className="cta cta--secondary" onClick={() => handleRemoveTraveler(rIndex, index)}>
+                            {translations.TRAVELERS_FORM.REMOVE_TRAVELER}
+                          </button>
+                        )}
                       </>
                     )}
                   </div>
@@ -694,6 +815,13 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                     )}
                   </div>
                 ))}
+                {travelersFirstStep && (
+                  <div className="form__region">
+                    <button type="button" className="cta cta--select" onClick={() => handleAddTraveler(rIndex)}>
+                      {translations.TRAVELERS_FORM.ADD_TRAVELER}
+                    </button>
+                  </div>
+                )}
               </div>
             ))}
 
@@ -918,20 +1046,28 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           )}
         </>
       )}
+      {travelersFirstStep && (
+        <div className="booking__navigator">
+          <button type="button" className="cta cta--select" onClick={handleAddRoom}>
+            {translations.TRAVELERS_FORM.ADD_ROOM}
+          </button>
+        </div>
+      )}
+
       <div className="booking__navigator">
-        {settings.skipRouter ? (
+        {!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.options.pathSuffix}?${bookingQueryString}`}
             title={translations.STEPS.PREVIOUS}
             className="cta cta--secondary">
             {translations.STEPS.PREVIOUS}
           </Link>
-        )}
-        <button type="submit" title={translations.STEPS.NEXT} className="cta">
+        ) : null}
+        <button type="submit" title={translations.STEPS.NEXT} className={'cta' + (isUnavailable ? ' cta--disabled' : '')}>
           {translations.STEPS.NEXT}
         </button>
       </div>

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

@@ -25,7 +25,8 @@ const SettingsContext = React.createContext<WizardSettingsContextProps>({
     reportPrintActionId: null
   },
   travellers: {
-    pathSuffix: '/reizigers'
+    pathSuffix: '/reizigers',
+    travelersFirstStep: false
   },
   summary: {
     pathSuffix: '/samenvatting',

package/src/booking-wizard/types.ts

@@ -25,6 +25,7 @@ export interface Settings {
     formFields?: FormField[];
     mainBookerFormFields?: FormField[];
     countries?: Country[];
+    travelersFirstStep?: boolean;
   };
   summary: {
     pathSuffix: string;

package/src/shared/translations/en-GB.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Departure",
     "FLIGHT_ARRIVAL": "Arrival",
     "ON_REQUEST": "On request",
-    "CHANGES": "transfers"
+    "CHANGES": "transfers",
+    "PACKAGE_NOT_AVAILABLE": "Package not available"
   },
   "TRAVELERS_FORM": {
     "AGE": "Age",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "I want to book through my local travel agent",
     "CHOOSE_OFFICE": "I choose an office",
     "PERSON": "Person",
+    "REMOVE_TRAVELER": "Remove traveler",
+    "ADD_TRAVELER": "Add traveler",
+    "ADD_ROOM": "Add travel party",
     "COUNTRIES": {
       "BELGIUM": "Belgium",
       "NETHERLANDS": "Netherlands",

package/src/shared/translations/fr-BE.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Départ",
     "FLIGHT_ARRIVAL": "Arrivée",
     "ON_REQUEST": "Sur demande",
-    "CHANGES": "correspondances"
+    "CHANGES": "correspondances",
+    "PACKAGE_NOT_AVAILABLE": "Forfait non disponible"
   },
   "TRAVELERS_FORM": {
     "AGE": "Age",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "Je souhaite réserver auprès de mon agent de voyage local",
     "CHOOSE_OFFICE": "Je choisis une agence",
     "PERSON": "Personne",
+    "REMOVE_TRAVELER": "Supprimer le voyageur",
+    "ADD_TRAVELER": "Ajouter un voyageur",
+    "ADD_ROOM": "Ajouter un groupe de voyageurs",
     "COUNTRIES": {
       "BELGIUM": "Belgique",
       "NETHERLANDS": "Pays-Bas",

package/src/shared/translations/nl-BE.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Vertrek",
     "FLIGHT_ARRIVAL": "Aankomst",
     "ON_REQUEST": "Op aanvraag",
-    "CHANGES": "overstappen"
+    "CHANGES": "overstappen",
+    "PACKAGE_NOT_AVAILABLE": "Pakket niet beschikbaar"
   },
   "TRAVELERS_FORM": {
     "AGE": "Leeftijd",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "Ik wens te boeken bij mijn lokale reisagent",
     "CHOOSE_OFFICE": "Ik kies een kantoor",
     "PERSON": "Persoon",
+    "REMOVE_TRAVELER": "Verwijder reiziger",
+    "ADD_TRAVELER": "Voeg reiziger toe",
+    "ADD_ROOM": "Voeg reisgezelschap toe",
     "COUNTRIES": {
       "BELGIUM": "België",
       "NETHERLANDS": "Nederland",