@qite/tide-booking-component 1.4.32 → 1.4.34

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

@@ -57,6 +57,7 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   const [hasTransfer, setHasTransfer] = useState<boolean>(false);
   const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
   const [searchResponse, setSearchResponse] = useState<BookingPackageItem[]>([]);
+  const [detailResponse, setDetailResponse] = useState<any>();
   const [dateRange, setDateRange] = useState<DateRange>();
   const [packageProductName, setPackageProductName] = useState<string>(productName);
   const [currencyCode, setCurrencyCode] = useState<string>('');
@@ -135,35 +136,14 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
 
       setIsLoading(true);
 
-      let detailResponse;
       if (displayMode === 'calendar' && searchType === 0) {
-        detailResponse = await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState);
+        setDetailResponse(await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState));
       }
 
       if (searchType === 1) {
         setSearchResponse(await packageApi.fetchSearch(searchRequest, signal, apiSettingsState));
       }
 
-      if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
-        const selectedOption = detailResponse.payload.options.find((x) => x.isSelected);
-
-        if (selectedOption) {
-          const hasFlight = selectedOption.includedServiceTypes.some((x) => x === 7);
-          const hasTranfer = selectedOption.includedServiceTypes.some((x) => x === 13);
-
-          setPrice(selectedOption.price);
-          setHasFlight(hasFlight);
-          setHasTransfer(hasTranfer);
-          setCurrencyCode(detailResponse.payload.currencyCode);
-          setPackageProductName(selectedOption.name);
-        }
-      } else {
-        setPrice(undefined);
-        setHasFlight(false);
-        setHasTransfer(false);
-        setCurrencyCode('');
-      }
-
       setIsLoading(false);
     }
   };
@@ -256,9 +236,11 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
       if (selectedItem) {
         setPrice(selectedItem.price);
         setPackageProductName(selectedItem.name);
+        setCurrencyCode(selectedItem.currencyCode);
       } else {
         setPrice(searchResponse[0].price);
         setPackageProductName(searchResponse[0].name);
+        setCurrencyCode(searchResponse[0].currencyCode);
       }
     } else {
       setSearchResults([]);
@@ -267,6 +249,28 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     }
   }, [searchResponse]);
 
+  useEffect(() => {
+    if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+      const selectedOption = detailResponse.payload.options.find((x: any) => x.isSelected);
+
+      if (selectedOption) {
+        const hasFlight = selectedOption.includedServiceTypes.some((x: any) => x === 7);
+        const hasTranfer = selectedOption.includedServiceTypes.some((x: any) => x === 13);
+
+        setPrice(selectedOption.price);
+        setHasFlight(hasFlight);
+        setHasTransfer(hasTranfer);
+        setCurrencyCode(detailResponse.payload.currencyCode);
+        setPackageProductName(selectedOption.name);
+      }
+    } else if (detailResponse !== undefined) {
+      setPrice(undefined);
+      setHasFlight(false);
+      setHasTransfer(false);
+      setCurrencyCode('');
+    }
+  }, [detailResponse]);
+
   useEffect(() => {
     if (searchType === 1 && skipNextFetchRef.current) {
       skipNextFetchRef.current = false;

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

@@ -87,7 +87,8 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
     flightOptions,
     accommodationViewId,
     isOffer,
-    allowOption
+    allowOption,
+    travellers
   } = useContext(SettingsContext);
 
   const dispatch = useAppDispatch();
@@ -135,6 +136,8 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
     if (!isNil(bookingNumber)) {
       dispatch(setBookingNumber(bookingNumber));
       dispatch(setCurrentStep(CONFIRMATION_STEP));
+    } else if (travellers.travelersFirstStep) {
+      dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
     } else if (!flightOptions.isHidden) {
       dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
     } else if (!roomOptions.isHidden) {

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -14,14 +14,15 @@ import Icon from '../icon';
 import TravelNationalityPicker from '../travel-nationality-picker';
 import { addDays, addMonths } from 'date-fns';
 import { DateRange } from '../../../booking-product/types';
-import { setFromDate, setToDate } from '../../store/qsm-slice';
+import { QSMState, setFromDate, setToDate } from '../../store/qsm-slice';
+import { FieldConfig } from '../../types';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
   const isMobile = useMediaQuery('(max-width: 768px)');
   const qsmState = useSelector((state: QSMRootState) => state.qsm);
   const { mobileFilterType, fromDate, toDate } = qsmState;
-  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit } = useContext(QSMConfigurationContext);
+  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit, travelTypes } = useContext(QSMConfigurationContext);
 
   useEffect(() => {
     if (fromDate || toDate) return;
@@ -50,58 +51,38 @@ const QSMContainer: React.FC = () => {
   const handleSubmit = () => {
     if (!onSubmit) return;
 
-    const {
-      selectedOrigin,
-      selectedDestination,
-      selectedAirport,
-      fromDate,
-      toDate,
-      travelers,
-      selectedTravelClass,
-      selectedTravelType,
-      selectedNationality,
-      adults,
-      kids,
-      babies,
-      rooms,
-      selectedFlexRange,
-      language
-    } = qsmState;
+    const { fromDate, toDate, travelers, selectedTravelClass, selectedTravelType, selectedNationality, adults, kids, babies, rooms, selectedFlexRange } =
+      qsmState;
+
+    const selectedTravelTypeValue = travelTypes.find((t) => t.label === selectedTravelType);
 
     const payload = {
-      selectedOrigin,
-      selectedDestination,
-      selectedAirport,
       fromDate,
       toDate,
-      travelers,
       travelClass: selectedTravelClass,
-      travelType: selectedTravelType,
+      travelType: selectedTravelTypeValue,
       nationality: selectedNationality,
-      adults,
-      kids,
-      babies,
-      rooms,
-      dateFlexibility: selectedFlexRange,
-      language
+      rooms
     };
 
     addSearchFieldsToPayload(payload, searchFields, qsmState);
     onSubmit(payload);
   };
 
-  const addSearchFieldsToPayload = (payload: any, fields: typeof searchFields, state: any) => {
+  const addSearchFieldsToPayload = (payload: any, fields: FieldConfig[], state: QSMState) => {
     fields.forEach((field) => {
       if (field.type === 'single') {
         const key = field.fieldKey;
-        payload[key] = state[key];
+        const option = field.options.find((opt) => opt.value === state[key]);
+        payload[key] = option ?? state[key];
       }
 
       if (field.type === 'double' && field.fields) {
         // recursively add each nested field
         field.fields.forEach((nestedField) => {
           const key = nestedField.fieldKey;
-          payload[key] = state[key];
+          const option = nestedField.options.find((opt) => opt.value === state[key]);
+          payload[key] = option ?? state[key];
         });
       }
     });

package/src/qsm/store/qsm-slice.ts

@@ -20,7 +20,6 @@ export interface QSMState {
     value: string;
     options: TypeaheadOption[];
   } | null;
-  language: 'nl' | 'fr' | 'en';
   mobileDatePickerMode: 'range' | 'single';
   minDate?: string;
   maxDate?: string;
@@ -64,7 +63,6 @@ const initialState: QSMState = {
   activeSearchField: null,
   activeSearchFieldProps: null,
   searchResults: [],
-  language: 'nl',
   mobileDatePickerMode: 'range',
   minDate: undefined,
   maxDate: undefined,
@@ -142,9 +140,6 @@ const qsmSlice = createSlice({
     setSearchResults: (state, action: PayloadAction<TypeaheadOption[]>) => {
       state.searchResults = action.payload;
     },
-    setLanguage: (state, action: PayloadAction<'nl' | 'fr' | 'en'>) => {
-      state.language = action.payload;
-    },
     setMobileDatePickerMode: (state, action: PayloadAction<'range' | 'single'>) => {
       state.mobileDatePickerMode = action.payload;
     },
@@ -239,7 +234,6 @@ export const {
   setActiveSearchField,
   setActiveSearchFieldProps,
   setSearchResults,
-  setLanguage,
   setMobileDatePickerMode,
   setMinDate,
   setMaxDate,

package/src/qsm/types.ts

@@ -56,6 +56,7 @@ export interface QSMConfiguration {
   submitIcon: ReactNode;
 
   nationalities: Nationality[];
+  languageCode?: string;
 }
 
 export interface BaseFieldConfig {

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

@@ -47,13 +47,15 @@ const SearchResultsContainer: React.FC = () => {
         }
 
         const params = new URLSearchParams(location.search);
-        let from = getDateFromParams(params, 'from');
-        let to = getDateFromParams(params, 'to');
+        let from = getDateFromParams(params, 'fromDate');
+        let to = getDateFromParams(params, 'toDate');
         const rooms = getRoomsFromParams(params, 'rooms');
         let country = getNumberFromParams(params, 'country');
         let region = getNumberFromParams(params, 'region');
         let oord = getNumberFromParams(params, 'oord');
         let city = getNumberFromParams(params, 'location');
+        let hotel = getNumberFromParams(params, 'hotel');
+        let tagId = getNumberFromParams(params, 'tagId');
 
         // temp hardcoded params
         if (!from || !to) {
@@ -117,7 +119,9 @@ const SearchResultsContainer: React.FC = () => {
             maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
             useExactDates: true,
             onlyCachedResults: false,
-            includeAllAllotments: true
+            includeAllAllotments: true,
+            productIds: hotel ? [hotel] : [],
+            productTagIds: tagId ? [tagId] : []
           }
         };