@qite/tide-booking-component 1.4.125 → 1.4.127

package/build/build-cjs/index.js

@@ -17658,14 +17658,14 @@ const updateBookingGroups = (groups, changedLines) => {
 };
 
 const fetchPriceDetails = toolkit.createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
-    dispatch(setFetchingPriceDetails(true));
-    dispatch(resetPriceDetails());
     const state = getState();
     const languageCode = selectLanguageCode(state);
     const request = selectBookingPackageBookRequest(state);
     if (!request) {
         throw Error('Product not available.');
     }
+    dispatch(setFetchingPriceDetails(true));
+    dispatch(resetPriceDetails());
     const priceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
     dispatch(setFetchingPriceDetails(false));
     const packageDetails = selectPackageDetails(state);
@@ -17702,6 +17702,9 @@ const priceDetailsSlice = toolkit.createSlice({
                 state.notifications = action.payload.notifications;
             }
         });
+        builder.addCase(fetchPriceDetails.rejected, (state) => {
+            state.isBusy = false;
+        });
     }
 });
 const { setFetchingPriceDetails } = priceDetailsSlice.actions;
@@ -17710,7 +17713,6 @@ const selectNotifications = (state) => state.priceDetails.notifications;
 var priceDetailsReducer = priceDetailsSlice.reducer;
 
 const selectHasMounted = (state) => state.booking.hasMounted;
-const selectIsFetching = (state) => state.booking.isFetching;
 const selectGeneratePaymentUrl = (state) => state.booking.generatePaymentUrl;
 const selectSkipPaymentWithAgent = (state) => state.booking.skipPaymentWithAgent;
 const selectIsFetchingProductOptions = (state) => state.booking.isBusy;
@@ -17786,6 +17788,7 @@ const selectCalculateDeposit = (state) => state.booking.calculateDeposit;
 const selectShowCommission = (state) => state.booking.showCommission;
 const selectIsRetry = (state) => state.booking.isRetry;
 const selectStartDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
+const selectEndDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.toDate;
 const selectAgents = (state) => state.booking.agents;
 const selectCountries = (state) => state.booking.countries;
 const selectProductCode = (state) => state.booking.productAttributes?.productCode;
@@ -18001,7 +18004,6 @@ const initialState$5 = {
     currentStep: OPTIONS_FORM_STEP,
     translations: undefined,
     travelersFirstStep: false,
-    isFetching: false,
     hasMounted: false,
     countries: undefined
 };
@@ -18220,9 +18222,6 @@ const bookingSlice = toolkit.createSlice({
         setHasMounted(state, action) {
             state.hasMounted = action.payload;
         },
-        setIsFetching(state, action) {
-            state.isFetching = action.payload;
-        },
         setOfficeId(state, action) {
             state.officeId = action.payload;
         },
@@ -18436,7 +18435,7 @@ const bookingSlice = toolkit.createSlice({
         });
     }
 });
-const { setOfficeId, setLanguageCode, setTranslations, setBookingOptions, setBookingType, setProductAttributes, setBookingAttributes, setCalculateDeposit, setShowCommission, setBookingNumber: setBookingNumber$1, setIsRetry, setFetchingPackage, setIsFetching, setHasMounted, setPackage, setPackageRooms, setPackageOptionPax, setPackageOptionUnits, setPackageGroups, setSkipPayment, setGeneratePaymentUrl, setTagIds, setAgentAdressId, setBookingRemarks, setVoucherCodes, setCurrentStep: setCurrentStep$1, setPackageAirlineGroups, setPackageAirportGroups, setFlights, setAccommodationViewId, setIsOption, setTravelersFirstStep, setIsUnavailable } = bookingSlice.actions;
+const { setOfficeId, setLanguageCode, setTranslations, setBookingOptions, setBookingType, setProductAttributes, setBookingAttributes, setCalculateDeposit, setShowCommission, setBookingNumber: setBookingNumber$1, setIsRetry, setFetchingPackage, setHasMounted, setPackage, setPackageRooms, setPackageOptionPax, setPackageOptionUnits, setPackageGroups, setSkipPayment, setGeneratePaymentUrl, setTagIds, setAgentAdressId, setBookingRemarks, setVoucherCodes, setCurrentStep: setCurrentStep$1, setPackageAirlineGroups, setPackageAirportGroups, setFlights, setAccommodationViewId, setIsOption, setTravelersFirstStep, setIsUnavailable } = bookingSlice.actions;
 var bookingReducer = bookingSlice.reducer;
 
 const SettingsContext = React__default["default"].createContext({
@@ -18508,18 +18507,19 @@ const StepIndicators$1 = ({ currentStep, stepLabels }) => {
             React__default["default"].createElement("div", { className: "step-indicators__text" }, stepName)))))));
 };
 
-const StepIndicators = ({ currentStep }) => {
-    const { flightOptions, roomOptions } = React.useContext(SettingsContext);
-    const translations = reactRedux.useSelector(selectTranslations);
-    const travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
+// Single source of truth for the ordered step labels shown in the indicator and
+// the panel title. Kept in one place so step-route.tsx and step-indicator.tsx
+// can never drift out of sync. The ERROR step is intentionally excluded — it is
+// not part of the indicator sequence.
+const buildStepLabels = ({ travelersFirstStep, flightOptionsHidden, roomOptionsHidden, translations }) => {
     const stepLabels = [];
     if (travelersFirstStep) {
         stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
     }
-    if (!flightOptions.isHidden) {
+    if (!flightOptionsHidden) {
         stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
     }
-    if (!roomOptions.isHidden) {
+    if (!roomOptionsHidden) {
         stepLabels.push(translations.STEPS.ROOM_OPTIONS);
     }
     stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
@@ -18528,6 +18528,19 @@ const StepIndicators = ({ currentStep }) => {
     }
     stepLabels.push(translations.STEPS.SUMMARY);
     stepLabels.push(translations.STEPS.CONFIRMATION);
+    return stepLabels;
+};
+
+const StepIndicators = ({ currentStep }) => {
+    const { flightOptions, roomOptions } = React.useContext(SettingsContext);
+    const translations = reactRedux.useSelector(selectTranslations);
+    const travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
+    const stepLabels = buildStepLabels({
+        travelersFirstStep,
+        flightOptionsHidden: flightOptions.isHidden,
+        roomOptionsHidden: roomOptions.isHidden,
+        translations
+    });
     return React__default["default"].createElement(StepIndicators$1, { currentStep: currentStep, stepLabels: stepLabels });
 };
 
@@ -18544,22 +18557,12 @@ const StepRoute = ({ number, title, component }) => {
     const { flightOptions, roomOptions } = React.useContext(SettingsContext);
     const translations = reactRedux.useSelector(selectTranslations);
     const travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
-    const stepLabels = [];
-    if (travelersFirstStep) {
-        stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-    }
-    if (!flightOptions.isHidden) {
-        stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
-    }
-    if (!roomOptions.isHidden) {
-        stepLabels.push(translations.STEPS.ROOM_OPTIONS);
-    }
-    stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
-    if (!travelersFirstStep) {
-        stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-    }
-    stepLabels.push(translations.STEPS.SUMMARY);
-    stepLabels.push(translations.STEPS.CONFIRMATION);
+    const stepLabels = buildStepLabels({
+        travelersFirstStep,
+        flightOptionsHidden: flightOptions.isHidden,
+        roomOptionsHidden: roomOptions.isHidden,
+        translations
+    });
     return (React__default["default"].createElement(BookingPanel, { currentStep: number, stepLabels: stepLabels, StepIndicatorsComponent: StepIndicators, renderTitle: (step) => (React__default["default"].createElement(React__default["default"].Fragment, null,
             step + 1,
             ". ",
@@ -21659,6 +21662,7 @@ const Summary = () => {
     const [remarks, setRemarks] = React.useState('');
     const [voucher, setVoucher] = React.useState({});
     const bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
+    const travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
     const travelerFormValues = reactRedux.useSelector(selectTravelersFormValues);
     const packageDetails = reactRedux.useSelector(selectPackageDetails);
     const activeOption = reactRedux.useSelector(selectActiveOption);
@@ -21808,7 +21812,7 @@ const Summary = () => {
         dispatch(fetchPriceDetails());
     };
     const goPrevious = () => {
-        dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
+        dispatch(setCurrentStep$1(travelersFirstStep ? OPTIONS_FORM_STEP : TRAVELERS_FORM_STEP));
     };
     const translations = reactRedux.useSelector(selectTranslations);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -21968,7 +21972,7 @@ const Summary = () => {
                                                         __html: checkbox.text
                                                     } }))))))))))),
             React__default["default"].createElement("div", { className: "booking__navigator" },
-                settings.skipRouter ? (React__default["default"].createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default["default"].createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
+                settings.skipRouter ? (React__default["default"].createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default["default"].createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${travelersFirstStep ? settings.options.pathSuffix : settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
                 settings.allowOption && (React__default["default"].createElement("button", { title: translations.STEPS.SUBMIT_OPTION, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "option" }, translations.STEPS.SUBMIT_OPTION)),
                 React__default["default"].createElement("button", { title: settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "default" }, settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING))))));
 };
@@ -22023,8 +22027,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (lodash.isEmpty(adult.birthDate)) {
                 lodash.set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(adult.birthDate, values.startDate);
+            else if (values.endDate) {
+                // If you are younger than the maxChildAge at the end of the trip, you are considered a child, so we check the endDate here instead of the startDate
+                const age = getAge(adult.birthDate, values.endDate);
                 if (age <= maxChildAge) {
                     lodash.set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerIsNoAdult(rIndex + 1, index + 1));
                 }
@@ -22045,8 +22050,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (lodash.isEmpty(child.birthDate)) {
                 lodash.set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(child.birthDate, values.startDate);
+            else if (values.endDate) {
+                // You need to be under the maxChildAge until the end of the trip, so we check the endDate here instead of the startDate
+                const age = getAge(child.birthDate, values.endDate);
                 if (age > maxChildAge) {
                     lodash.set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1));
                 }
@@ -22270,10 +22276,11 @@ function createTraveler(traveler, followNumber, personTranslation, isCompact) {
         gender: ''
     };
 }
-function createInitialValuesFromRooms(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
+function createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, personTranslation, isCompact) {
     const followNumber = { number: 1 };
     const initialValues = {
         startDate,
+        endDate,
         rooms: formRooms.map((room) => ({
             adults: room.adults.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact)),
             children: room.children.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact))
@@ -22323,7 +22330,7 @@ function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, a
             })
         };
     });
-    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), editablePackagingEntry?.lines?.[0]?.from, agentAdressId);
+    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), lodash.first(editablePackagingEntry?.lines)?.from, lodash.last(editablePackagingEntry?.lines)?.to, agentAdressId);
     values.rooms = rooms;
     values.mainBookerId = pax.find((x) => x.isMainBooker)?.id ?? rooms[0]?.adults?.[0]?.id ?? -1;
     const address = editablePackagingEntry?.address;
@@ -22601,6 +22608,7 @@ const TravelersForm = () => {
     const navigate = settings.skipRouter ? () => { } : reactRouter.useNavigate();
     const bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
     const startDate = reactRedux.useSelector(selectStartDate);
+    const endDate = reactRedux.useSelector(selectEndDate);
     const selectFormRooms = React.useMemo(() => makeSelectFormRooms(settings.maxChildAge), [settings.maxChildAge]);
     const formRooms = reactRedux.useSelector(selectFormRooms);
     const bookingType = reactRedux.useSelector(selectBookingType);
@@ -22610,13 +22618,14 @@ const TravelersForm = () => {
     const travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
     const isUnavailable = reactRedux.useSelector(selectIsUnavailable);
     const bookingAttributes = reactRedux.useSelector(selectBookingAttributes);
-    const isFetching = reactRedux.useSelector(selectIsFetching);
     const hasMounted = reactRedux.useSelector(selectHasMounted);
     const countries = reactRedux.useSelector(selectCountries);
+    const inFlight = React.useRef(false);
+    const pendingRefetch = React.useRef(false);
     const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
     const showAllCountries = !!settings.travellers.showAllCountries;
     const initialValues = reactRedux.useSelector(selectTravelersFormValues) ??
-        createInitialValuesFromRooms(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
+        createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
     const [showAgentSelection, setShowAgentSelection] = React.useState(!settings.agentAdressId && !settings.hideAgentSelection);
     const formik$1 = formik.useFormik({
         initialValues,
@@ -22644,40 +22653,46 @@ const TravelersForm = () => {
         dispatch(fetchPriceDetails());
     }, [dispatch]);
     React.useEffect(() => {
-        if (!bookingAttributes?.rooms?.length || isFetching)
+        if (!bookingAttributes?.rooms?.length)
             return;
         if (!hasMounted) {
             dispatch(setHasMounted(true));
             return;
         }
+        if (inFlight.current) {
+            pendingRefetch.current = true;
+            return;
+        }
         const fetchAll = async () => {
-            dispatch(setIsFetching(true));
+            inFlight.current = true;
             try {
-                await dispatch(fetchPackage());
-                await dispatch(fetchPriceDetails());
+                do {
+                    pendingRefetch.current = false;
+                    await dispatch(fetchPackage());
+                    await dispatch(fetchPriceDetails());
+                } while (pendingRefetch.current);
             }
             finally {
-                dispatch(setIsFetching(false));
+                inFlight.current = false;
             }
         };
         fetchAll();
-    }, [bookingAttributes?.rooms, dispatch, hasMounted, isFetching]);
+    }, [bookingAttributes?.rooms, dispatch, hasMounted]);
+    const roomsQuery = React.useMemo(() => formik$1.values.rooms
+        .map((room) => {
+        const adults = room.adults ? room.adults.length : 0;
+        const childAges = room.children?.length ? room.children.map((child) => child.age).join(',') : '';
+        return `(adults:${adults},childAges:(${childAges}))`;
+    })
+        .join(','), [formik$1.values.rooms]);
     React.useEffect(() => {
-        if (settings.skipRouter || !travelersFirstStep)
+        if (settings.skipRouter || !travelersFirstStep || !bookingQueryString)
             return;
         const params = new URLSearchParams(bookingQueryString);
         params.delete('rooms');
-        const roomsString = formik$1.values.rooms
-            .map((room) => {
-            const adults = room.adults ? room.adults.length : 0;
-            const childAges = room.children?.length ? room.children.map((child) => child.age).join(',') : '';
-            return `adults:${adults},childAges:(${childAges})`;
-        })
-            .map((room) => `(${room})`)
-            .join(',');
-        const nextQuery = `${params.toString()}${params.toString() ? '&' : ''}rooms=(${roomsString})`;
+        const nextQuery = `${params.toString()}${params.toString() ? '&' : ''}rooms=(${roomsQuery})`;
         navigate(`${window.location.pathname}?${nextQuery}`, { replace: true });
-    }, [formik$1.values.rooms, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]);
+    }, [roomsQuery, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]);
     React.useEffect(() => {
         if (!agents || !settings.affiliateSlug)
             return;
@@ -22892,10 +22907,17 @@ const Booking = ({ productCode, productName, thumbnailUrl }) => {
             promise.abort();
         };
     }, [productAttributes]);
-    let numberIndex = 1;
-    // No-op when `customTranslationsUrl` isn't configured (translationsReady
-    // starts `true` in that case). Only suppresses the initial render when a
-    // host actively opts into the custom-translations fetch.
+    let numberIndex = 0;
+    const getFirstStep = () => {
+        if (travelersFirstStep)
+            return { path: travellers.pathSuffix, title: translations.STEPS.PERSONAL_DETAILS, component: React__default["default"].createElement(TravelersForm, null) };
+        if (!flightOptions.isHidden && flightOptions.pathSuffix)
+            return { path: flightOptions.pathSuffix, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default["default"].createElement(FlightOptionsForm, null) };
+        if (!roomOptions.isHidden && roomOptions.pathSuffix)
+            return { path: roomOptions.pathSuffix, title: translations.STEPS.ROOM_OPTIONS, component: React__default["default"].createElement(RoomOptionsForm, null) };
+        return { path: options.pathSuffix, title: translations.STEPS.EXTRA_OPTIONS, component: React__default["default"].createElement(OptionsForm, null) };
+    };
+    const firstStep = getFirstStep();
     if (!translationsReady) {
         return null;
     }
@@ -22904,8 +22926,9 @@ const Booking = ({ productCode, productName, thumbnailUrl }) => {
             React__default["default"].createElement("div", { className: "booking__content" },
                 React__default["default"].createElement("div", { className: "booking__panel" },
                     React__default["default"].createElement(reactRouter.Routes, null,
-                        travelersFirstStep && (React__default["default"].createElement(reactRouter.Route, { path: "/", element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default["default"].createElement(TravelersForm, null) }) })),
-                        !flightOptions.isHidden && flightOptions.pathSuffix && (React__default["default"].createElement(reactRouter.Route, { path: '/', element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default["default"].createElement(FlightOptionsForm, null) }) })),
+                        firstStep.path !== '/' && React__default["default"].createElement(reactRouter.Route, { path: "/", element: React__default["default"].createElement(StepRoute, { number: 0, title: firstStep.title, component: firstStep.component }) }),
+                        travelersFirstStep && (React__default["default"].createElement(reactRouter.Route, { path: travellers.pathSuffix, element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default["default"].createElement(TravelersForm, null) }) })),
+                        !flightOptions.isHidden && flightOptions.pathSuffix && (React__default["default"].createElement(reactRouter.Route, { path: flightOptions.pathSuffix, element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default["default"].createElement(FlightOptionsForm, null) }) })),
                         !roomOptions.isHidden && roomOptions.pathSuffix && (React__default["default"].createElement(reactRouter.Route, { path: roomOptions.pathSuffix, element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.ROOM_OPTIONS, component: React__default["default"].createElement(RoomOptionsForm, null) }) })),
                         React__default["default"].createElement(reactRouter.Route, { path: options.pathSuffix, element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.EXTRA_OPTIONS, component: React__default["default"].createElement(OptionsForm, null) }) }),
                         !travelersFirstStep && (React__default["default"].createElement(reactRouter.Route, { path: travellers.pathSuffix, element: React__default["default"].createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default["default"].createElement(TravelersForm, null) }) })),

package/build/build-cjs/src/booking-wizard/components/build-step-labels.d.ts

@@ -0,0 +1,8 @@
+interface BuildStepLabelsParams {
+    travelersFirstStep: boolean;
+    flightOptionsHidden?: boolean | null;
+    roomOptionsHidden?: boolean | null;
+    translations: Record<string, any>;
+}
+export declare const buildStepLabels: ({ travelersFirstStep, flightOptionsHidden, roomOptionsHidden, translations }: BuildStepLabelsParams) => string[];
+export {};

package/build/build-cjs/src/booking-wizard/features/booking/booking-slice.d.ts

@@ -33,7 +33,6 @@ export interface BookingState {
     };
     isOption?: boolean;
     travelersFirstStep: boolean;
-    isFetching?: boolean;
     hasMounted: boolean;
     countries?: CountryItem[];
 }
@@ -57,6 +56,6 @@ export declare const fetchCountries: import("@reduxjs/toolkit").AsyncThunk<impor
     fulfilledMeta?: unknown;
     rejectedMeta?: unknown;
 }>;
-export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setOfficeId">, setLanguageCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setLanguageCode">, setTranslations: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "booking/setTranslations">, setBookingOptions: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptions, "booking/setBookingOptions">, setBookingType: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingType">, setProductAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<ProductAttributes | undefined, "booking/setProductAttributes">, setBookingAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingAttributes | undefined, "booking/setBookingAttributes">, setCalculateDeposit: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setCalculateDeposit">, setShowCommission: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean | undefined, "booking/setShowCommission">, setBookingNumber: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingNumber">, setIsRetry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsRetry">, setFetchingPackage: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setFetchingPackage">, setIsFetching: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsFetching">, setHasMounted: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setHasMounted">, setPackage: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingPackage | undefined, "booking/setPackage">, setPackageRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageRoom[], "booking/setPackageRooms">, setPackageOptionPax: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionPax[], "booking/setPackageOptionPax">, setPackageOptionUnits: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionUnit[], "booking/setPackageOptionUnits">, setPackageGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionGroup<PerBookingPackageOption>[], "booking/setPackageGroups">, setSkipPayment: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setSkipPayment">, setGeneratePaymentUrl: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setGeneratePaymentUrl">, setTagIds: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number[] | undefined, "booking/setTagIds">, setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number | undefined, "booking/setAgentAdressId">, setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingRemarks">, setVoucherCodes: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "booking/setVoucherCodes">, setCurrentStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingStep, "booking/setCurrentStep">, setPackageAirlineGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirlineGroup<AirlineBookingPackageOption>[], "booking/setPackageAirlineGroups">, setPackageAirportGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirportGroup<AirportBookingPackageOption>[], "booking/setPackageAirportGroups">, setFlights: import("@reduxjs/toolkit").ActionCreatorWithPayload<GroupedFlights, "booking/setFlights">, setAccommodationViewId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setAccommodationViewId">, setIsOption: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsOption">, setTravelersFirstStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setTravelersFirstStep">, setIsUnavailable: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsUnavailable">;
+export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setOfficeId">, setLanguageCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setLanguageCode">, setTranslations: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "booking/setTranslations">, setBookingOptions: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptions, "booking/setBookingOptions">, setBookingType: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingType">, setProductAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<ProductAttributes | undefined, "booking/setProductAttributes">, setBookingAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingAttributes | undefined, "booking/setBookingAttributes">, setCalculateDeposit: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setCalculateDeposit">, setShowCommission: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean | undefined, "booking/setShowCommission">, setBookingNumber: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingNumber">, setIsRetry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsRetry">, setFetchingPackage: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setFetchingPackage">, setHasMounted: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setHasMounted">, setPackage: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingPackage | undefined, "booking/setPackage">, setPackageRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageRoom[], "booking/setPackageRooms">, setPackageOptionPax: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionPax[], "booking/setPackageOptionPax">, setPackageOptionUnits: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionUnit[], "booking/setPackageOptionUnits">, setPackageGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionGroup<PerBookingPackageOption>[], "booking/setPackageGroups">, setSkipPayment: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setSkipPayment">, setGeneratePaymentUrl: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setGeneratePaymentUrl">, setTagIds: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number[] | undefined, "booking/setTagIds">, setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number | undefined, "booking/setAgentAdressId">, setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingRemarks">, setVoucherCodes: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "booking/setVoucherCodes">, setCurrentStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingStep, "booking/setCurrentStep">, setPackageAirlineGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirlineGroup<AirlineBookingPackageOption>[], "booking/setPackageAirlineGroups">, setPackageAirportGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirportGroup<AirportBookingPackageOption>[], "booking/setPackageAirportGroups">, setFlights: import("@reduxjs/toolkit").ActionCreatorWithPayload<GroupedFlights, "booking/setFlights">, setAccommodationViewId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setAccommodationViewId">, setIsOption: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsOption">, setTravelersFirstStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setTravelersFirstStep">, setIsUnavailable: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsUnavailable">;
 declare const _default: import("@reduxjs/toolkit").Reducer<BookingState>;
 export default _default;

package/build/build-cjs/src/booking-wizard/features/booking/selectors.d.ts

@@ -2,7 +2,6 @@ import { BookingPackageAddress, BookingPackageBookRequest, BookingPackagePax, Bo
 import { RootState } from '../../store';
 import { Room } from '../../types';
 export declare const selectHasMounted: (state: RootState) => boolean;
-export declare const selectIsFetching: (state: RootState) => boolean | undefined;
 export declare const selectCurrentStep: (state: RootState) => import("./constants").BookingStep;
 export declare const selectGeneratePaymentUrl: (state: RootState) => boolean;
 export declare const selectSkipPaymentWithAgent: (state: RootState) => boolean;
@@ -257,6 +256,7 @@ export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectShowCommission: (state: RootState) => boolean | undefined;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;
+export declare const selectEndDate: (state: RootState) => string | undefined;
 export declare const selectAgents: (state: RootState) => import("@qite/tide-client").BookingTravelAgent[] | undefined;
 export declare const selectCountries: (state: RootState) => import("@qite/tide-client").CountryItem[] | undefined;
 export declare const selectProductCode: (state: RootState) => string | undefined;

package/build/build-cjs/src/booking-wizard/types.d.ts

@@ -163,6 +163,7 @@ export interface FlightInfo {
 export interface TravelersFormValues {
     rooms: TravelersFormRoomValues[];
     startDate?: string;
+    endDate?: string;
     mainBookerId: number;
     street: string;
     houseNumber: string;

package/build/build-cjs/src/shared/booking/travelers-form.d.ts

@@ -44,7 +44,7 @@ export declare function createTraveler(traveler: RoomTraveler, followNumber: {
 export declare function createInitialValuesFromRooms(formRooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
-}[], startDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean): TravelersFormValues;
+}[], startDate?: string, endDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean): TravelersFormValues;
 export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues;
 export declare function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues): {
     pax: PackagingEntryPax[];

package/build/build-esm/index.js

@@ -17629,14 +17629,14 @@ const updateBookingGroups = (groups, changedLines) => {
 };
 
 const fetchPriceDetails = createAsyncThunk('priceDetails/fetchPriceDetails', async (_, { dispatch, getState, signal }) => {
-    dispatch(setFetchingPriceDetails(true));
-    dispatch(resetPriceDetails());
     const state = getState();
     const languageCode = selectLanguageCode(state);
     const request = selectBookingPackageBookRequest(state);
     if (!request) {
         throw Error('Product not available.');
     }
+    dispatch(setFetchingPriceDetails(true));
+    dispatch(resetPriceDetails());
     const priceDetails = await priceDetailsApi.fetchPriceDetails(state.apiSettings, request, signal, languageCode);
     dispatch(setFetchingPriceDetails(false));
     const packageDetails = selectPackageDetails(state);
@@ -17673,6 +17673,9 @@ const priceDetailsSlice = createSlice({
                 state.notifications = action.payload.notifications;
             }
         });
+        builder.addCase(fetchPriceDetails.rejected, (state) => {
+            state.isBusy = false;
+        });
     }
 });
 const { setFetchingPriceDetails } = priceDetailsSlice.actions;
@@ -17681,7 +17684,6 @@ const selectNotifications = (state) => state.priceDetails.notifications;
 var priceDetailsReducer = priceDetailsSlice.reducer;
 
 const selectHasMounted = (state) => state.booking.hasMounted;
-const selectIsFetching = (state) => state.booking.isFetching;
 const selectGeneratePaymentUrl = (state) => state.booking.generatePaymentUrl;
 const selectSkipPaymentWithAgent = (state) => state.booking.skipPaymentWithAgent;
 const selectIsFetchingProductOptions = (state) => state.booking.isBusy;
@@ -17757,6 +17759,7 @@ const selectCalculateDeposit = (state) => state.booking.calculateDeposit;
 const selectShowCommission = (state) => state.booking.showCommission;
 const selectIsRetry = (state) => state.booking.isRetry;
 const selectStartDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
+const selectEndDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.toDate;
 const selectAgents = (state) => state.booking.agents;
 const selectCountries = (state) => state.booking.countries;
 const selectProductCode = (state) => state.booking.productAttributes?.productCode;
@@ -17972,7 +17975,6 @@ const initialState$5 = {
     currentStep: OPTIONS_FORM_STEP,
     translations: undefined,
     travelersFirstStep: false,
-    isFetching: false,
     hasMounted: false,
     countries: undefined
 };
@@ -18191,9 +18193,6 @@ const bookingSlice = createSlice({
         setHasMounted(state, action) {
             state.hasMounted = action.payload;
         },
-        setIsFetching(state, action) {
-            state.isFetching = action.payload;
-        },
         setOfficeId(state, action) {
             state.officeId = action.payload;
         },
@@ -18407,7 +18406,7 @@ const bookingSlice = createSlice({
         });
     }
 });
-const { setOfficeId, setLanguageCode, setTranslations, setBookingOptions, setBookingType, setProductAttributes, setBookingAttributes, setCalculateDeposit, setShowCommission, setBookingNumber: setBookingNumber$1, setIsRetry, setFetchingPackage, setIsFetching, setHasMounted, setPackage, setPackageRooms, setPackageOptionPax, setPackageOptionUnits, setPackageGroups, setSkipPayment, setGeneratePaymentUrl, setTagIds, setAgentAdressId, setBookingRemarks, setVoucherCodes, setCurrentStep: setCurrentStep$1, setPackageAirlineGroups, setPackageAirportGroups, setFlights, setAccommodationViewId, setIsOption, setTravelersFirstStep, setIsUnavailable } = bookingSlice.actions;
+const { setOfficeId, setLanguageCode, setTranslations, setBookingOptions, setBookingType, setProductAttributes, setBookingAttributes, setCalculateDeposit, setShowCommission, setBookingNumber: setBookingNumber$1, setIsRetry, setFetchingPackage, setHasMounted, setPackage, setPackageRooms, setPackageOptionPax, setPackageOptionUnits, setPackageGroups, setSkipPayment, setGeneratePaymentUrl, setTagIds, setAgentAdressId, setBookingRemarks, setVoucherCodes, setCurrentStep: setCurrentStep$1, setPackageAirlineGroups, setPackageAirportGroups, setFlights, setAccommodationViewId, setIsOption, setTravelersFirstStep, setIsUnavailable } = bookingSlice.actions;
 var bookingReducer = bookingSlice.reducer;
 
 const SettingsContext = React__default.createContext({
@@ -18479,18 +18478,19 @@ const StepIndicators$1 = ({ currentStep, stepLabels }) => {
             React__default.createElement("div", { className: "step-indicators__text" }, stepName)))))));
 };
 
-const StepIndicators = ({ currentStep }) => {
-    const { flightOptions, roomOptions } = useContext(SettingsContext);
-    const translations = useSelector(selectTranslations);
-    const travelersFirstStep = useSelector(selectTravelersFirstStep);
+// Single source of truth for the ordered step labels shown in the indicator and
+// the panel title. Kept in one place so step-route.tsx and step-indicator.tsx
+// can never drift out of sync. The ERROR step is intentionally excluded — it is
+// not part of the indicator sequence.
+const buildStepLabels = ({ travelersFirstStep, flightOptionsHidden, roomOptionsHidden, translations }) => {
     const stepLabels = [];
     if (travelersFirstStep) {
         stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
     }
-    if (!flightOptions.isHidden) {
+    if (!flightOptionsHidden) {
         stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
     }
-    if (!roomOptions.isHidden) {
+    if (!roomOptionsHidden) {
         stepLabels.push(translations.STEPS.ROOM_OPTIONS);
     }
     stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
@@ -18499,6 +18499,19 @@ const StepIndicators = ({ currentStep }) => {
     }
     stepLabels.push(translations.STEPS.SUMMARY);
     stepLabels.push(translations.STEPS.CONFIRMATION);
+    return stepLabels;
+};
+
+const StepIndicators = ({ currentStep }) => {
+    const { flightOptions, roomOptions } = useContext(SettingsContext);
+    const translations = useSelector(selectTranslations);
+    const travelersFirstStep = useSelector(selectTravelersFirstStep);
+    const stepLabels = buildStepLabels({
+        travelersFirstStep,
+        flightOptionsHidden: flightOptions.isHidden,
+        roomOptionsHidden: roomOptions.isHidden,
+        translations
+    });
     return React__default.createElement(StepIndicators$1, { currentStep: currentStep, stepLabels: stepLabels });
 };
 
@@ -18515,22 +18528,12 @@ const StepRoute = ({ number, title, component }) => {
     const { flightOptions, roomOptions } = useContext(SettingsContext);
     const translations = useSelector(selectTranslations);
     const travelersFirstStep = useSelector(selectTravelersFirstStep);
-    const stepLabels = [];
-    if (travelersFirstStep) {
-        stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-    }
-    if (!flightOptions.isHidden) {
-        stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
-    }
-    if (!roomOptions.isHidden) {
-        stepLabels.push(translations.STEPS.ROOM_OPTIONS);
-    }
-    stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
-    if (!travelersFirstStep) {
-        stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-    }
-    stepLabels.push(translations.STEPS.SUMMARY);
-    stepLabels.push(translations.STEPS.CONFIRMATION);
+    const stepLabels = buildStepLabels({
+        travelersFirstStep,
+        flightOptionsHidden: flightOptions.isHidden,
+        roomOptionsHidden: roomOptions.isHidden,
+        translations
+    });
     return (React__default.createElement(BookingPanel, { currentStep: number, stepLabels: stepLabels, StepIndicatorsComponent: StepIndicators, renderTitle: (step) => (React__default.createElement(React__default.Fragment, null,
             step + 1,
             ". ",
@@ -21630,6 +21633,7 @@ const Summary = () => {
     const [remarks, setRemarks] = useState('');
     const [voucher, setVoucher] = useState({});
     const bookingQueryString = useSelector(selectBookingQueryString);
+    const travelersFirstStep = useSelector(selectTravelersFirstStep);
     const travelerFormValues = useSelector(selectTravelersFormValues);
     const packageDetails = useSelector(selectPackageDetails);
     const activeOption = useSelector(selectActiveOption);
@@ -21779,7 +21783,7 @@ const Summary = () => {
         dispatch(fetchPriceDetails());
     };
     const goPrevious = () => {
-        dispatch(setCurrentStep$1(TRAVELERS_FORM_STEP));
+        dispatch(setCurrentStep$1(travelersFirstStep ? OPTIONS_FORM_STEP : TRAVELERS_FORM_STEP));
     };
     const translations = useSelector(selectTranslations);
     return (React__default.createElement(React__default.Fragment, null,
@@ -21939,7 +21943,7 @@ const Summary = () => {
                                                         __html: checkbox.text
                                                     } }))))))))))),
             React__default.createElement("div", { className: "booking__navigator" },
-                settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
+                settings.skipRouter ? (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => goPrevious(), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React__default.createElement(Link, { to: `${!settings.skipBasePathInRouting ? settings.basePath : ''}${travelersFirstStep ? settings.options.pathSuffix : settings.travellers.pathSuffix}?${bookingQueryString}`, title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
                 settings.allowOption && (React__default.createElement("button", { title: translations.STEPS.SUBMIT_OPTION, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "option" }, translations.STEPS.SUBMIT_OPTION)),
                 React__default.createElement("button", { title: settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING, className: buildClassName(['cta', !userValidated && 'cta--disabled']), disabled: !userValidated, name: "default" }, settings.isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING))))));
 };
@@ -21994,8 +21998,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (isEmpty$1(adult.birthDate)) {
                 set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(adult.birthDate, values.startDate);
+            else if (values.endDate) {
+                // If you are younger than the maxChildAge at the end of the trip, you are considered a child, so we check the endDate here instead of the startDate
+                const age = getAge(adult.birthDate, values.endDate);
                 if (age <= maxChildAge) {
                     set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerIsNoAdult(rIndex + 1, index + 1));
                 }
@@ -22016,8 +22021,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (isEmpty$1(child.birthDate)) {
                 set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(child.birthDate, values.startDate);
+            else if (values.endDate) {
+                // You need to be under the maxChildAge until the end of the trip, so we check the endDate here instead of the startDate
+                const age = getAge(child.birthDate, values.endDate);
                 if (age > maxChildAge) {
                     set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1));
                 }
@@ -22241,10 +22247,11 @@ function createTraveler(traveler, followNumber, personTranslation, isCompact) {
         gender: ''
     };
 }
-function createInitialValuesFromRooms(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
+function createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, personTranslation, isCompact) {
     const followNumber = { number: 1 };
     const initialValues = {
         startDate,
+        endDate,
         rooms: formRooms.map((room) => ({
             adults: room.adults.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact)),
             children: room.children.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact))
@@ -22294,7 +22301,7 @@ function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, a
             })
         };
     });
-    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), editablePackagingEntry?.lines?.[0]?.from, agentAdressId);
+    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), first(editablePackagingEntry?.lines)?.from, last(editablePackagingEntry?.lines)?.to, agentAdressId);
     values.rooms = rooms;
     values.mainBookerId = pax.find((x) => x.isMainBooker)?.id ?? rooms[0]?.adults?.[0]?.id ?? -1;
     const address = editablePackagingEntry?.address;
@@ -22572,6 +22579,7 @@ const TravelersForm = () => {
     const navigate = settings.skipRouter ? () => { } : useNavigate();
     const bookingQueryString = useSelector(selectBookingQueryString);
     const startDate = useSelector(selectStartDate);
+    const endDate = useSelector(selectEndDate);
     const selectFormRooms = useMemo(() => makeSelectFormRooms(settings.maxChildAge), [settings.maxChildAge]);
     const formRooms = useSelector(selectFormRooms);
     const bookingType = useSelector(selectBookingType);
@@ -22581,13 +22589,14 @@ const TravelersForm = () => {
     const travelersFirstStep = useSelector(selectTravelersFirstStep);
     const isUnavailable = useSelector(selectIsUnavailable);
     const bookingAttributes = useSelector(selectBookingAttributes);
-    const isFetching = useSelector(selectIsFetching);
     const hasMounted = useSelector(selectHasMounted);
     const countries = useSelector(selectCountries);
+    const inFlight = useRef(false);
+    const pendingRefetch = useRef(false);
     const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
     const showAllCountries = !!settings.travellers.showAllCountries;
     const initialValues = useSelector(selectTravelersFormValues) ??
-        createInitialValuesFromRooms(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
+        createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
     const [showAgentSelection, setShowAgentSelection] = useState(!settings.agentAdressId && !settings.hideAgentSelection);
     const formik = useFormik({
         initialValues,
@@ -22615,40 +22624,46 @@ const TravelersForm = () => {
         dispatch(fetchPriceDetails());
     }, [dispatch]);
     useEffect(() => {
-        if (!bookingAttributes?.rooms?.length || isFetching)
+        if (!bookingAttributes?.rooms?.length)
             return;
         if (!hasMounted) {
             dispatch(setHasMounted(true));
             return;
         }
+        if (inFlight.current) {
+            pendingRefetch.current = true;
+            return;
+        }
         const fetchAll = async () => {
-            dispatch(setIsFetching(true));
+            inFlight.current = true;
             try {
-                await dispatch(fetchPackage());
-                await dispatch(fetchPriceDetails());
+                do {
+                    pendingRefetch.current = false;
+                    await dispatch(fetchPackage());
+                    await dispatch(fetchPriceDetails());
+                } while (pendingRefetch.current);
             }
             finally {
-                dispatch(setIsFetching(false));
+                inFlight.current = false;
             }
         };
         fetchAll();
-    }, [bookingAttributes?.rooms, dispatch, hasMounted, isFetching]);
+    }, [bookingAttributes?.rooms, dispatch, hasMounted]);
+    const roomsQuery = useMemo(() => formik.values.rooms
+        .map((room) => {
+        const adults = room.adults ? room.adults.length : 0;
+        const childAges = room.children?.length ? room.children.map((child) => child.age).join(',') : '';
+        return `(adults:${adults},childAges:(${childAges}))`;
+    })
+        .join(','), [formik.values.rooms]);
     useEffect(() => {
-        if (settings.skipRouter || !travelersFirstStep)
+        if (settings.skipRouter || !travelersFirstStep || !bookingQueryString)
             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?.length ? room.children.map((child) => child.age).join(',') : '';
-            return `adults:${adults},childAges:(${childAges})`;
-        })
-            .map((room) => `(${room})`)
-            .join(',');
-        const nextQuery = `${params.toString()}${params.toString() ? '&' : ''}rooms=(${roomsString})`;
+        const nextQuery = `${params.toString()}${params.toString() ? '&' : ''}rooms=(${roomsQuery})`;
         navigate(`${window.location.pathname}?${nextQuery}`, { replace: true });
-    }, [formik.values.rooms, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]);
+    }, [roomsQuery, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]);
     useEffect(() => {
         if (!agents || !settings.affiliateSlug)
             return;
@@ -22863,10 +22878,17 @@ const Booking = ({ productCode, productName, thumbnailUrl }) => {
             promise.abort();
         };
     }, [productAttributes]);
-    let numberIndex = 1;
-    // No-op when `customTranslationsUrl` isn't configured (translationsReady
-    // starts `true` in that case). Only suppresses the initial render when a
-    // host actively opts into the custom-translations fetch.
+    let numberIndex = 0;
+    const getFirstStep = () => {
+        if (travelersFirstStep)
+            return { path: travellers.pathSuffix, title: translations.STEPS.PERSONAL_DETAILS, component: React__default.createElement(TravelersForm, null) };
+        if (!flightOptions.isHidden && flightOptions.pathSuffix)
+            return { path: flightOptions.pathSuffix, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default.createElement(FlightOptionsForm, null) };
+        if (!roomOptions.isHidden && roomOptions.pathSuffix)
+            return { path: roomOptions.pathSuffix, title: translations.STEPS.ROOM_OPTIONS, component: React__default.createElement(RoomOptionsForm, null) };
+        return { path: options.pathSuffix, title: translations.STEPS.EXTRA_OPTIONS, component: React__default.createElement(OptionsForm, null) };
+    };
+    const firstStep = getFirstStep();
     if (!translationsReady) {
         return null;
     }
@@ -22875,8 +22897,9 @@ const Booking = ({ productCode, productName, thumbnailUrl }) => {
             React__default.createElement("div", { className: "booking__content" },
                 React__default.createElement("div", { className: "booking__panel" },
                     React__default.createElement(Routes, null,
-                        travelersFirstStep && (React__default.createElement(Route, { path: "/", element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default.createElement(TravelersForm, null) }) })),
-                        !flightOptions.isHidden && flightOptions.pathSuffix && (React__default.createElement(Route, { path: '/', element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default.createElement(FlightOptionsForm, null) }) })),
+                        firstStep.path !== '/' && React__default.createElement(Route, { path: "/", element: React__default.createElement(StepRoute, { number: 0, title: firstStep.title, component: firstStep.component }) }),
+                        travelersFirstStep && (React__default.createElement(Route, { path: travellers.pathSuffix, element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default.createElement(TravelersForm, null) }) })),
+                        !flightOptions.isHidden && flightOptions.pathSuffix && (React__default.createElement(Route, { path: flightOptions.pathSuffix, element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.FLIGHT_OPTIONS, component: React__default.createElement(FlightOptionsForm, null) }) })),
                         !roomOptions.isHidden && roomOptions.pathSuffix && (React__default.createElement(Route, { path: roomOptions.pathSuffix, element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.ROOM_OPTIONS, component: React__default.createElement(RoomOptionsForm, null) }) })),
                         React__default.createElement(Route, { path: options.pathSuffix, element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.EXTRA_OPTIONS, component: React__default.createElement(OptionsForm, null) }) }),
                         !travelersFirstStep && (React__default.createElement(Route, { path: travellers.pathSuffix, element: React__default.createElement(StepRoute, { number: numberIndex++, title: translations.STEPS.PERSONAL_DETAILS, component: React__default.createElement(TravelersForm, null) }) })),

package/build/build-esm/src/booking-wizard/components/build-step-labels.d.ts

@@ -0,0 +1,8 @@
+interface BuildStepLabelsParams {
+    travelersFirstStep: boolean;
+    flightOptionsHidden?: boolean | null;
+    roomOptionsHidden?: boolean | null;
+    translations: Record<string, any>;
+}
+export declare const buildStepLabels: ({ travelersFirstStep, flightOptionsHidden, roomOptionsHidden, translations }: BuildStepLabelsParams) => string[];
+export {};

package/build/build-esm/src/booking-wizard/features/booking/booking-slice.d.ts

@@ -33,7 +33,6 @@ export interface BookingState {
     };
     isOption?: boolean;
     travelersFirstStep: boolean;
-    isFetching?: boolean;
     hasMounted: boolean;
     countries?: CountryItem[];
 }
@@ -57,6 +56,6 @@ export declare const fetchCountries: import("@reduxjs/toolkit").AsyncThunk<impor
     fulfilledMeta?: unknown;
     rejectedMeta?: unknown;
 }>;
-export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setOfficeId">, setLanguageCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setLanguageCode">, setTranslations: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "booking/setTranslations">, setBookingOptions: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptions, "booking/setBookingOptions">, setBookingType: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingType">, setProductAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<ProductAttributes | undefined, "booking/setProductAttributes">, setBookingAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingAttributes | undefined, "booking/setBookingAttributes">, setCalculateDeposit: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setCalculateDeposit">, setShowCommission: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean | undefined, "booking/setShowCommission">, setBookingNumber: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingNumber">, setIsRetry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsRetry">, setFetchingPackage: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setFetchingPackage">, setIsFetching: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsFetching">, setHasMounted: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setHasMounted">, setPackage: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingPackage | undefined, "booking/setPackage">, setPackageRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageRoom[], "booking/setPackageRooms">, setPackageOptionPax: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionPax[], "booking/setPackageOptionPax">, setPackageOptionUnits: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionUnit[], "booking/setPackageOptionUnits">, setPackageGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionGroup<PerBookingPackageOption>[], "booking/setPackageGroups">, setSkipPayment: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setSkipPayment">, setGeneratePaymentUrl: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setGeneratePaymentUrl">, setTagIds: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number[] | undefined, "booking/setTagIds">, setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number | undefined, "booking/setAgentAdressId">, setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingRemarks">, setVoucherCodes: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "booking/setVoucherCodes">, setCurrentStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingStep, "booking/setCurrentStep">, setPackageAirlineGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirlineGroup<AirlineBookingPackageOption>[], "booking/setPackageAirlineGroups">, setPackageAirportGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirportGroup<AirportBookingPackageOption>[], "booking/setPackageAirportGroups">, setFlights: import("@reduxjs/toolkit").ActionCreatorWithPayload<GroupedFlights, "booking/setFlights">, setAccommodationViewId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setAccommodationViewId">, setIsOption: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsOption">, setTravelersFirstStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setTravelersFirstStep">, setIsUnavailable: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsUnavailable">;
+export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setOfficeId">, setLanguageCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setLanguageCode">, setTranslations: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "booking/setTranslations">, setBookingOptions: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptions, "booking/setBookingOptions">, setBookingType: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingType">, setProductAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<ProductAttributes | undefined, "booking/setProductAttributes">, setBookingAttributes: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingAttributes | undefined, "booking/setBookingAttributes">, setCalculateDeposit: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setCalculateDeposit">, setShowCommission: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean | undefined, "booking/setShowCommission">, setBookingNumber: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingNumber">, setIsRetry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsRetry">, setFetchingPackage: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setFetchingPackage">, setHasMounted: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setHasMounted">, setPackage: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<BookingPackage | undefined, "booking/setPackage">, setPackageRooms: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageRoom[], "booking/setPackageRooms">, setPackageOptionPax: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionPax[], "booking/setPackageOptionPax">, setPackageOptionUnits: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionUnit[], "booking/setPackageOptionUnits">, setPackageGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingOptionGroup<PerBookingPackageOption>[], "booking/setPackageGroups">, setSkipPayment: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setSkipPayment">, setGeneratePaymentUrl: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setGeneratePaymentUrl">, setTagIds: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number[] | undefined, "booking/setTagIds">, setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<number | undefined, "booking/setAgentAdressId">, setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "booking/setBookingRemarks">, setVoucherCodes: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "booking/setVoucherCodes">, setCurrentStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingStep, "booking/setCurrentStep">, setPackageAirlineGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirlineGroup<AirlineBookingPackageOption>[], "booking/setPackageAirlineGroups">, setPackageAirportGroups: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingAirportGroup<AirportBookingPackageOption>[], "booking/setPackageAirportGroups">, setFlights: import("@reduxjs/toolkit").ActionCreatorWithPayload<GroupedFlights, "booking/setFlights">, setAccommodationViewId: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "booking/setAccommodationViewId">, setIsOption: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsOption">, setTravelersFirstStep: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setTravelersFirstStep">, setIsUnavailable: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "booking/setIsUnavailable">;
 declare const _default: import("@reduxjs/toolkit").Reducer<BookingState>;
 export default _default;

package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts

@@ -2,7 +2,6 @@ import { BookingPackageAddress, BookingPackageBookRequest, BookingPackagePax, Bo
 import { RootState } from '../../store';
 import { Room } from '../../types';
 export declare const selectHasMounted: (state: RootState) => boolean;
-export declare const selectIsFetching: (state: RootState) => boolean | undefined;
 export declare const selectCurrentStep: (state: RootState) => import("./constants").BookingStep;
 export declare const selectGeneratePaymentUrl: (state: RootState) => boolean;
 export declare const selectSkipPaymentWithAgent: (state: RootState) => boolean;
@@ -257,6 +256,7 @@ export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectShowCommission: (state: RootState) => boolean | undefined;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;
+export declare const selectEndDate: (state: RootState) => string | undefined;
 export declare const selectAgents: (state: RootState) => import("@qite/tide-client").BookingTravelAgent[] | undefined;
 export declare const selectCountries: (state: RootState) => import("@qite/tide-client").CountryItem[] | undefined;
 export declare const selectProductCode: (state: RootState) => string | undefined;

package/build/build-esm/src/booking-wizard/types.d.ts

@@ -163,6 +163,7 @@ export interface FlightInfo {
 export interface TravelersFormValues {
     rooms: TravelersFormRoomValues[];
     startDate?: string;
+    endDate?: string;
     mainBookerId: number;
     street: string;
     houseNumber: string;

package/build/build-esm/src/shared/booking/travelers-form.d.ts

@@ -44,7 +44,7 @@ export declare function createTraveler(traveler: RoomTraveler, followNumber: {
 export declare function createInitialValuesFromRooms(formRooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
-}[], startDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean): TravelersFormValues;
+}[], startDate?: string, endDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean): TravelersFormValues;
 export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues;
 export declare function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues): {
     pax: PackagingEntryPax[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.125",
+  "version": "1.4.127",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",