@qite/tide-booking-component 1.4.112 → 1.4.114

package/build/build-esm/src/search-results/components/book-packaging-entry/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SearchSeed } from '../../types';
 interface BookPackagingEntryProps {
   activeSearchSeed: SearchSeed | null;
+  isLoading: boolean;
   isConfirmationPage?: boolean;
 }
 declare const BookPackagingEntry: React.FC<BookPackagingEntryProps>;

package/build/build-esm/src/search-results/components/book-packaging-entry/wl-sidebar.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { SearchSeed } from '../../types';
+import { PackagingAccommodationResponse } from '@qite/tide-client';
 interface WLSidebarProps {
   activeSearchSeed: SearchSeed | null;
+  packagingAccoResult: PackagingAccommodationResponse | null;
 }
 declare const WLSidebar: React.FC<WLSidebarProps>;
 export default WLSidebar;

package/build/build-esm/src/search-results/components/search-results-container/search-results-container.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const SearchResultsContainer: React.FC;
+interface SearchResultsContainerProps {
+  onBookingStarted?: () => void;
+}
+declare const SearchResultsContainer: React.FC<SearchResultsContainerProps>;
 export default SearchResultsContainer;

package/build/build-esm/src/search-results/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SearchResultsConfiguration } from './types';
 interface SearchResultsProps {
   configuration: SearchResultsConfiguration;
+  onBookingStarted?: () => void;
 }
 declare const SearchResults: React.FC<SearchResultsProps>;
 export default SearchResults;

package/build/build-esm/src/shared/booking/summary.d.ts

@@ -25,6 +25,7 @@ export interface SharedSummaryProps {
   isOffer?: boolean;
   customValidateText?: string;
   isSubmitting?: boolean;
+  skipPayment?: boolean;
   userValidated?: boolean;
   renderOptions: () => ReactNode;
   renderPreviousButton: () => ReactNode;

package/build/build-esm/src/shared/utils/booking-summary.d.ts

@@ -1 +1,2 @@
 export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any) => any;
+export declare const getImageSrcFromHtml: (html?: string | null) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.112",
+  "version": "1.4.114",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.172",
+    "@qite/tide-client": "^1.1.173",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/search-results/components/book-packaging-entry/index.tsx

@@ -16,13 +16,23 @@ import { useFormik } from 'formik';
 import { TravelersFormValues } from '../../../booking-wizard/types';
 import { setBookingNumber, setCurrentStep, setEditablePackagingEntry } from '../../store/search-results-slice';
 import validateForm from '../../../booking-wizard/features/travelers-form/validate-form';
-import { bookPackagingEntry, CountryItem, getCountries, PackagingEntry, PackagingRequestBase, TideClientConfig } from '@qite/tide-client';
+import {
+  bookPackagingEntry,
+  CountryItem,
+  getCountries,
+  PackagingAccommodationResponse,
+  PackagingEntry,
+  PackagingRequestBase,
+  TideClientConfig
+} from '@qite/tide-client';
 import SharedSummary from '../../../shared/booking/summary';
 import { renderEditablePackagingEntrySummaryOptions } from '../../../shared/utils/booking-summary';
 import SharedConfirmation from '../../../shared/booking/shared-confirmation';
+import Spinner from '../spinner/spinner';
 
 interface BookPackagingEntryProps {
   activeSearchSeed: SearchSeed | null;
+  isLoading: boolean;
   isConfirmationPage?: boolean;
 }
 
@@ -49,54 +59,70 @@ const travellersSettings: SharedTravelersSettings = {
   mainBookerFormFields
 };
 
-const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isConfirmationPage }) => {
+const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isLoading, isConfirmationPage }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const dispatch = useDispatch();
-  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber, selectedPackagingAccoResultCode, packagingAccoResults } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
 
   const [countries, setCountries] = useState<CountryItem[]>([]);
   const [userValidated, setUserValidated] = useState(true);
   const [remarks, setRemarks] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedPackagingAccoResult, setSelectedPackagingAccoResult] = useState<PackagingAccommodationResponse | null>(null);
 
-  if (!context || !editablePackagingEntry || !priceDetails) return null;
-
-  const config: TideClientConfig = {
-    host: context.tideConnection.host,
-    apiKey: context.tideConnection.apiKey
-  };
+  const translations = useMemo(() => getTranslations(context?.languageCode ?? 'en-GB'), [context?.languageCode]);
 
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
 
-  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
-  console.log('priceDetails in WLSidebar:', priceDetails);
+  const config: TideClientConfig | null = useMemo(() => {
+    if (!context) return null;
 
-  const initialValues = useMemo(() => createInitialValuesFromEditablePackagingEntry(editablePackagingEntry), [editablePackagingEntry?.transactionId]);
+    return {
+      host: context.tideConnection.host,
+      apiKey: context.tideConnection.apiKey
+    };
+  }, [context]);
+
+  const initialValues = useMemo(() => {
+    if (!editablePackagingEntry) {
+      return {} as TravelersFormValues;
+    }
+
+    return createInitialValuesFromEditablePackagingEntry(editablePackagingEntry);
+  }, [editablePackagingEntry?.transactionId]);
 
   const formik = useFormik<TravelersFormValues>({
     initialValues,
     enableReinitialize: true,
     validate: (values) => validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
     onSubmit: (values) => {
+      if (!editablePackagingEntry) return;
+
       dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
+
       dispatch(setCurrentStep(1));
     }
   });
 
   useEffect(() => {
-    if (!context) return;
+    if (!context || !config) return;
+
     const controller = new AbortController();
 
     (async () => {
       try {
         const result = await getCountries(config, controller.signal);
         setCountries(result.items);
-      } catch {}
+      } catch {
+        // optionally handle error
+      }
     })();
 
     return () => controller.abort();
-  }, []);
+  }, [context, config]);
 
   useEffect(() => {
     if (isConfirmationPage) {
@@ -104,6 +130,15 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
     }
   }, [isConfirmationPage, dispatch]);
 
+  useEffect(() => {
+    const selectedPackagingAccoResult = packagingAccoResults?.find((result) => result.code === selectedPackagingAccoResultCode);
+    if (selectedPackagingAccoResult) {
+      setSelectedPackagingAccoResult(selectedPackagingAccoResult);
+    }
+  }, [selectedPackagingAccoResultCode, packagingAccoResults]);
+
+  if (!context || !editablePackagingEntry || !priceDetails || !config) return <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />;
+
   const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
 
@@ -141,6 +176,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
         agentId: context.agentId,
         payload: updatedEditablePackagingEntry
       } as PackagingRequestBase<PackagingEntry>;
+
       const bookingResponse = await bookPackagingEntry(config, request);
 
       dispatch(setBookingNumber(bookingResponse.number));
@@ -149,11 +185,10 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
         window.location.href = bookingResponse.paymentUrl;
       } else {
         dispatch(setCurrentStep(2));
+        setIsSubmitting(false);
       }
     } catch (error) {
       dispatch(setCurrentStep(3));
-    } finally {
-      setIsSubmitting(false);
     }
   };
 
@@ -170,6 +205,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 {step + 1}.&nbsp;{stepLabels[step]}
               </>
             )}>
+            {isConfirmationPage && isLoading && <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />}
             {currentStep === 0 && (
               <SharedTravelersForm
                 formik={formik}
@@ -188,6 +224,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 translations={translations}
                 travelerFormValues={formik.values}
                 isSubmitting={isSubmitting}
+                skipPayment={!context.generatePaymentUrl}
                 userValidated={userValidated}
                 remarks={remarks}
                 enableVoucher={false}
@@ -204,22 +241,23 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 )}
               />
             )}
+
             {currentStep === 2 && (
               <SharedConfirmation
                 bookingNumber={bookingNumber ?? editablePackagingEntry?.dossierNumber ?? ''}
                 isOption={false}
                 isOffer={false}
                 translations={translations.CONFIRMATION}
-                // companyContactPhone={context?.companyContactPhone || ''}
-                // companyContactEmail={context?.companyContactEmail || ''}
-                // homeUrl={context?.homeUrl || '/'}
               />
             )}
+
             {currentStep === 3 && <div>{/* error */}</div>}
           </BookingPanel>
         </div>
+
         <div className="backdrop" id="backdrop"></div>
-        <WLSidebar activeSearchSeed={activeSearchSeed} />
+
+        <WLSidebar activeSearchSeed={activeSearchSeed} packagingAccoResult={selectedPackagingAccoResult} />
       </div>
     </div>
   );

package/src/search-results/components/book-packaging-entry/wl-sidebar.tsx

@@ -10,12 +10,14 @@ import { SearchSeed } from '../../types';
 import { getTravelersText } from '../../../booking-wizard/features/sidebar/sidebar-util';
 import { RoomTraveler } from '../../../booking-wizard/types';
 
-import { BookingPackageFlightMetaData, BookingPriceDetail, PackagingEntryLine } from '@qite/tide-client';
+import { BookingPackageFlightMetaData, BookingPriceDetail, PackagingAccommodationResponse, PackagingEntryLine, PortalQsmType } from '@qite/tide-client';
 import Spinner from '../spinner/spinner';
 import SharedSidebar from '../../../shared/booking/shared-sidebar';
+import { getImageSrcFromHtml } from '../../../shared/utils/booking-summary';
 
 interface WLSidebarProps {
   activeSearchSeed: SearchSeed | null;
+  packagingAccoResult: PackagingAccommodationResponse | null;
 }
 
 const mapToSidebarFlightMetaData = (entryLine: PackagingEntryLine) => {
@@ -66,18 +68,12 @@ const selectSeparatePackagePriceDetails = (priceDetails: BookingPriceDetail[]) =
   return result;
 };
 
-const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed }) => {
+const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed, packagingAccoResult }) => {
   const context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
+
   const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  // Map editablePackagingEntry to sidebar props (example, adjust as needed)
-  if (!editablePackagingEntry) {
-    return null;
-  }
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
   const sortedLines = useMemo(() => {
     return [...(editablePackagingEntry?.lines ?? [])].sort((a, b) => {
@@ -92,16 +88,31 @@ const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed }) => {
     });
   }, [editablePackagingEntry]);
 
+  const accoImage = useMemo(() => {
+    return getImageSrcFromHtml(packagingAccoResult?.contents);
+  }, [packagingAccoResult?.contents]);
+
+  if (!context || !editablePackagingEntry) {
+    return null;
+  }
+
   const firstEntryLine = first(sortedLines);
   const accommodationLines = editablePackagingEntry.lines.filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE);
   const accommodationLine = first(accommodationLines) ?? firstEntryLine;
 
   const location =
-    accommodationLine?.location?.name ??
-    accommodationLine?.oord?.name ??
-    accommodationLine?.region?.name ??
-    accommodationLine?.country?.name ??
-    firstEntryLine?.location?.name;
+    context.searchConfiguration.qsmType === PortalQsmType.Accommodation
+      ? packagingAccoResult?.name ??
+        accommodationLine?.location?.name ??
+        accommodationLine?.oord?.name ??
+        accommodationLine?.region?.name ??
+        accommodationLine?.country?.name ??
+        firstEntryLine?.location?.name
+      : accommodationLine?.location?.name ??
+        accommodationLine?.oord?.name ??
+        accommodationLine?.region?.name ??
+        accommodationLine?.country?.name ??
+        firstEntryLine?.location?.name;
 
   const rooms =
     activeSearchSeed?.rooms.map((room) => {
@@ -136,7 +147,7 @@ const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed }) => {
   return (
     <SharedSidebar
       productName={location ?? ''}
-      thumbnailUrl={context.destinationImage?.url}
+      thumbnailUrl={accoImage ?? context.destinationImage?.url}
       translations={translations}
       travelerRooms={travelerRooms}
       startDateText={first(sortedLines)?.from && formatDate(new Date(first(sortedLines)!.from))}

package/src/search-results/components/flight/flight-selection/independent-flight-selection.tsx

@@ -94,9 +94,12 @@ const IndependentFlightSelection: React.FC<IndependentFlightSelectionProps> = ({
   }, [searchResults, selectedReturnKey]);
 
   const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+  const firstResultReturnDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
 
   const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
   const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+  const firstResultReturnDay = firstResultReturnDate ? format(firstResultReturnDate, 'd') : null;
+  const firstResultReturnMonth = firstResultReturnDate ? format(firstResultReturnDate, 'MMM') : null;
 
   return (
     <>
@@ -138,8 +141,8 @@ const IndependentFlightSelection: React.FC<IndependentFlightSelectionProps> = ({
 
       <div className="search__results__label search__results__label--secondary">
         <div className="search__results__label__date">
-          {/* <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
-          <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p> */}
+          <p className="search__results__label__date-date">{firstResultReturnDay}</p>
+          <p>{firstResultReturnMonth}</p>
         </div>
         <div className="search__results__label__text">
           <Icon name="ui-flight" height={16} fill="white" />

package/src/search-results/components/hotel/hotel-accommodation-results.tsx

@@ -175,12 +175,21 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
   const visibleResults = React.useMemo(() => {
     const shouldShowAll = context?.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight || isFlyIn;
 
+    let filteredMapperResults = mappedResults;
+
+    if (selectedPackagingAccoResult) {
+      filteredMapperResults = mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code);
+    }
+
     if (shouldShowAll) {
-      return mappedResults;
+      if (isFlyIn) {
+        return mappedResults;
+      }
+      return filteredMapperResults;
     }
 
     if (selectedPackagingAccoResult) {
-      return mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code).slice(0, 2);
+      return filteredMapperResults.filter((result) => result.code !== selectedPackagingAccoResult.code).slice(0, 2);
     }
 
     return mappedResults.slice(0, 3);

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

@@ -128,7 +128,11 @@ type BuildPackagingEntryPartialArgs = {
   language: string;
 };
 
-const SearchResultsContainer: React.FC = () => {
+interface SearchResultsContainerProps {
+  onBookingStarted?: () => void;
+}
+
+const SearchResultsContainer: React.FC<SearchResultsContainerProps> = ({ onBookingStarted }) => {
   const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
 
   const dispatch = useDispatch();
@@ -361,8 +365,8 @@ const SearchResultsContainer: React.FC = () => {
     if (typeof window !== 'undefined') {
       window.scrollTo(0, 0);
     }
-    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 18).length;
-    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 18).length;
+    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 12).length;
+    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 12).length;
     var babies = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! < 2).length;
 
     return {
@@ -812,6 +816,12 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [context?.packagingEntry]);
 
+  useEffect(() => {
+    if (bookPackagingEntry && onBookingStarted) {
+      onBookingStarted();
+    }
+  }, [bookPackagingEntry, onBookingStarted]);
+
   // separate detailsCall
   useEffect(() => {
     const fetchDetails = async () => {
@@ -1435,12 +1445,12 @@ const SearchResultsContainer: React.FC = () => {
     seed.rooms?.forEach((room, roomIndex) => {
       const paxIds = room.pax.map((_, paxIndex) => {
         const id = paxId++;
-
         pax.push({
           id,
-          firstName: '',
-          lastName: '',
-          dateOfBirth: null,
+          firstName: _.firstName || '',
+          lastName: _.lastName || '',
+          dateOfBirth: _.dateOfBirth || null,
+          age: _.age || null,
           isMainBooker: roomIndex === 0 && paxIndex === 0
         });
 
@@ -1479,7 +1489,11 @@ const SearchResultsContainer: React.FC = () => {
       {context && (
         <div className="search">
           {bookPackagingEntry ? (
-            <BookPackagingEntry activeSearchSeed={activeSearchSeed} isConfirmationPage={isBookingConfirmation} />
+            <BookPackagingEntry
+              activeSearchSeed={activeSearchSeed}
+              isLoading={itineraryIsLoading || pricesAreLoading}
+              isConfirmationPage={isBookingConfirmation}
+            />
           ) : (
             <div className="search__container">
               {context.searchConfiguration.qsmType === PortalQsmType.Flight && (

package/src/search-results/index.tsx

@@ -7,15 +7,16 @@ import { createSearchResultsStore } from './store/search-results-store';
 
 interface SearchResultsProps {
   configuration: SearchResultsConfiguration;
+  onBookingStarted?: () => void;
 }
 
-const SearchResults: React.FC<SearchResultsProps> = ({ configuration }) => {
+const SearchResults: React.FC<SearchResultsProps> = ({ configuration, onBookingStarted }) => {
   const store = React.useMemo(() => createSearchResultsStore(), []);
 
   return (
     <Provider store={store}>
       <SearchResultsConfigurationContext.Provider value={configuration}>
-        <SearchResultsContainer />
+        <SearchResultsContainer onBookingStarted={onBookingStarted} />
       </SearchResultsConfigurationContext.Provider>
     </Provider>
   );

package/src/shared/booking/summary.tsx

@@ -1,9 +1,9 @@
 import { compact, findIndex, isEmpty, isNil, uniqBy } from 'lodash';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { SummaryCheckbox, TravelersFormValues } from '../../booking-wizard/types';
-import Loader from '../components/loader';
 import { buildClassName } from '../utils/class-util';
 import Icon from '../components/icon';
+import Spinner from '../../search-results/components/spinner/spinner';
 
 export interface SummaryNotification {
   id: number;
@@ -32,6 +32,7 @@ export interface SharedSummaryProps {
   isOffer?: boolean;
   customValidateText?: string;
   isSubmitting?: boolean;
+  skipPayment?: boolean;
   userValidated?: boolean;
   renderOptions: () => ReactNode;
   renderPreviousButton: () => ReactNode;
@@ -66,6 +67,7 @@ const SharedSummary: React.FC<SharedSummaryProps> = ({
   isOffer = false,
   customValidateText,
   isSubmitting = false,
+  skipPayment = false,
   userValidated = true,
   renderOptions,
   renderPreviousButton,
@@ -122,7 +124,7 @@ const SharedSummary: React.FC<SharedSummaryProps> = ({
 
   return (
     <>
-      {isSubmitting && (renderLoader?.() || <Loader />)}
+      {isSubmitting && <Spinner label={skipPayment ? translations.SUMMARY.PROCESS_BOOKING : translations.SUMMARY.REDIRECT} />}
       {!isSubmitting && (
         <form className="form" name="booking--summary" id="booking--summary" onSubmit={onSubmit}>
           <div className="form__booking--summary">

package/src/shared/booking/travelers-form.tsx

@@ -98,13 +98,13 @@ export function createInitialValuesFromRooms(
 }
 
 export function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues {
-  console.log('editablePackagingEntry?.pax:', editablePackagingEntry?.pax);
   const pax = editablePackagingEntry?.pax ?? [];
   const rooms = editablePackagingEntry.rooms.map((room) => {
     const roomPax = pax.filter((x: PackagingEntryPax) => room.paxIds.includes(x.id));
-    // TODO children/dateofbirth is missing at this point
+    const adults = roomPax.filter((x: PackagingEntryPax) => x.age! >= 18);
+    const children = roomPax.filter((x: PackagingEntryPax) => x.age! < 18);
     return {
-      adults: roomPax.map((roomTraveler: PackagingEntryPax) => {
+      adults: adults.map((roomTraveler: PackagingEntryPax) => {
         return {
           id: roomTraveler.id,
           firstName: roomTraveler.firstName ?? '',
@@ -113,7 +113,15 @@ export function createInitialValuesFromEditablePackagingEntry(editablePackagingE
           gender: ''
         } as Traveler;
       }),
-      children: [] as Traveler[]
+      children: children.map((roomTraveler: PackagingEntryPax) => {
+        return {
+          id: roomTraveler.id,
+          firstName: roomTraveler.firstName ?? '',
+          lastName: roomTraveler.lastName ?? '',
+          birthDate: roomTraveler.dateOfBirth ? format(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
+          gender: ''
+        } as Traveler;
+      })
     };
   });
 
@@ -144,8 +152,6 @@ export function createInitialValuesFromEditablePackagingEntry(editablePackagingE
 
 export function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues) {
   const travelers = values.rooms.flatMap((room) => [...room.adults, ...room.children]);
-  console.log('Applying form values:', values);
-  console.log('editablePackagingEntry:', editablePackagingEntry);
 
   return {
     ...editablePackagingEntry,

package/src/shared/components/flyin/flyin.tsx

@@ -4,6 +4,7 @@ import { useFlightSearch } from '../../../search-results/components/flight/fligh
 import { useDispatch, useSelector } from 'react-redux';
 import {
   resetFilters,
+  setBookPackagingEntry,
   setFilters,
   setFlyInType,
   setSelectedFlight,
@@ -125,6 +126,14 @@ const FlyIn: React.FC<FlyInProps> = ({
     }
   };
 
+  const onHandleConfirm = () => {
+    if (context?.packagingEntry) {
+      handleConfirm?.();
+    } else {
+      dispatch(setBookPackagingEntry(true));
+    }
+  };
+
   return (
     <div
       className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow || flyInType === 'acco-results' ? 'flyin--large' : ''} ${
@@ -211,7 +220,7 @@ const FlyIn: React.FC<FlyInProps> = ({
         )}
 
         {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && flyInType === 'acco-details' && (
-          <AccommodationFlyIn isLoading={detailsLoading} handleConfirm={handleConfirm!} />
+          <AccommodationFlyIn isLoading={detailsLoading} handleConfirm={onHandleConfirm} />
         )}
 
         {srpType === PortalQsmType.AccommodationAndFlight && (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') && (

package/src/shared/translations/ar-SA.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "تحقق من القسيمة",
     "ADD_VOUCHER": "إضافة قسيمة",
     "VOUCHER_VALID": "القسيمة صالحة",
-    "VOUCHER_INVALID": "القسيمة غير صالحة"
+    "VOUCHER_INVALID": "القسيمة غير صالحة",
+    "REDIRECT": "إعادة التوجيه إلى مزود الدفع...",
+    "PROCESS_BOOKING": "يرجى الانتظار، جاري معالجة حجزك"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "تم طلب عرضك رقم {0}",

package/src/shared/translations/da-DK.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valider voucher",
     "ADD_VOUCHER": "Tilføj voucher",
     "VOUCHER_VALID": "Voucher er gyldig",
-    "VOUCHER_INVALID": "Voucher er ikke gyldig"
+    "VOUCHER_INVALID": "Voucher er ikke gyldig",
+    "REDIRECT": "Omdirigerer til betalingsudbyder...",
+    "PROCESS_BOOKING": "Vent venligst, din booking behandles"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Dit tilbud med nummer {0} er blevet anmodet",

package/src/shared/translations/de-DE.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Gutschein prüfen",
     "ADD_VOUCHER": "Gutschein hinzufügen",
     "VOUCHER_VALID": "Gutschein ist gültig",
-    "VOUCHER_INVALID": "Gutschein ist ungültig"
+    "VOUCHER_INVALID": "Gutschein ist ungültig",
+    "REDIRECT": "Weiterleitung zum Zahlungsanbieter...",
+    "PROCESS_BOOKING": "Bitte warten Sie, Ihre Buchung wird bearbeitet"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Ihr Angebot mit der Nummer {0} wurde angefordert",

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

@@ -229,7 +229,9 @@
     "VOUCHER_VALIDATE": "Validate voucher",
     "ADD_VOUCHER": "Add voucher",
     "VOUCHER_VALID": "Voucher is valid",
-    "VOUCHER_INVALID": "Voucher is not valid"
+    "VOUCHER_INVALID": "Voucher is not valid",
+    "REDIRECT": "Redirecting to payment provider...",
+    "PROCESS_BOOKING": "Please wait, your booking is being processed"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Your quote with number {0} has been requested",

package/src/shared/translations/es-ES.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validar vale",
     "ADD_VOUCHER": "Agregar vale",
     "VOUCHER_VALID": "Vale válido",
-    "VOUCHER_INVALID": "Vale no válido"
+    "VOUCHER_INVALID": "Vale no válido",
+    "REDIRECT": "Redirigiendo al proveedor de pagos...",
+    "PROCESS_BOOKING": "Por favor, espere, su reserva se está procesando"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Su presupuesto con número {0} ha sido solicitado",