@qite/tide-booking-component 1.4.110 → 1.4.112

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

@@ -1,43 +1,223 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { getTranslations } from '../../../shared/utils/localization-util';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { useDispatch, useSelector } from 'react-redux';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import BookingPanel from '../../../shared/booking/BookingPanel';
-import StepIndicators from '../../../shared/booking/StepIndicators';
+import BookingPanel from '../../../shared/booking/booking-panel';
+import StepIndicators from '../../../shared/booking/step-indicators';
 import WLSidebar from './wl-sidebar';
 import { SearchSeed } from '../../types';
+import SharedTravelersForm, {
+  applyTravelersFormValuesToEditablePackagingEntry,
+  createInitialValuesFromEditablePackagingEntry,
+  SharedTravelersSettings
+} from '../../../shared/booking/travelers-form';
+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 SharedSummary from '../../../shared/booking/summary';
+import { renderEditablePackagingEntrySummaryOptions } from '../../../shared/utils/booking-summary';
+import SharedConfirmation from '../../../shared/booking/shared-confirmation';
 
 interface BookPackagingEntryProps {
   activeSearchSeed: SearchSeed | null;
+  isConfirmationPage?: boolean;
 }
 
-const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed }) => {
+const travelerFormFields = [{ type: 'gender' }, { type: 'firstName' }, { type: 'lastName' }, { type: 'birthDate' }];
+
+const mainBookerFormFields = [
+  { type: 'street' },
+  { type: 'houseNumber' },
+  { type: 'box' },
+  { type: 'zipCode' },
+  { type: 'place' },
+  { type: 'country' },
+  { type: 'phone' },
+  { type: 'email' }
+];
+
+const travellersSettings: SharedTravelersSettings = {
+  countries: [
+    { iso2: 'BE', name: 'Belgium', phonePrefix: '+32' },
+    { iso2: 'NL', name: 'Netherlands', phonePrefix: '+31' },
+    { iso2: 'FR', name: 'France', phonePrefix: '+33' }
+  ],
+  formFields: travelerFormFields,
+  mainBookerFormFields
+};
+
+const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isConfirmationPage }) => {
   const context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-  const { currentStep } = useSelector((state: SearchResultsRootState) => state.searchResults);
   const dispatch = useDispatch();
+  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const [countries, setCountries] = useState<CountryItem[]>([]);
+  const [userValidated, setUserValidated] = useState(true);
+  const [remarks, setRemarks] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!context || !editablePackagingEntry || !priceDetails) return null;
+
+  const config: TideClientConfig = {
+    host: context.tideConnection.host,
+    apiKey: context.tideConnection.apiKey
+  };
 
+  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 initialValues = useMemo(() => createInitialValuesFromEditablePackagingEntry(editablePackagingEntry), [editablePackagingEntry?.transactionId]);
+
+  const formik = useFormik<TravelersFormValues>({
+    initialValues,
+    enableReinitialize: true,
+    validate: (values) => validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
+    onSubmit: (values) => {
+      dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
+      dispatch(setCurrentStep(1));
+    }
+  });
+
+  useEffect(() => {
+    if (!context) return;
+    const controller = new AbortController();
+
+    (async () => {
+      try {
+        const result = await getCountries(config, controller.signal);
+        setCountries(result.items);
+      } catch {}
+    })();
+
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    if (isConfirmationPage) {
+      dispatch(setCurrentStep(2));
+    }
+  }, [isConfirmationPage, dispatch]);
+
+  const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+
+    setIsSubmitting(true);
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+
+    let updatedEditablePackagingEntry: PackagingEntry = {
+      ...editablePackagingEntry,
+      remarks
+    };
+
+    if (context.generatePaymentUrl && typeof window !== 'undefined') {
+      const redirectUrl = new URL(window.location.href);
+
+      redirectUrl.searchParams.set('bookingConfirmation', 'true');
+      redirectUrl.searchParams.set('link', '');
+
+      updatedEditablePackagingEntry = {
+        ...updatedEditablePackagingEntry,
+        redirectUrl: redirectUrl.toString(),
+        returnPaymentUrl: true
+      };
+    }
+
+    dispatch(setEditablePackagingEntry(updatedEditablePackagingEntry));
+
+    try {
+      const request = {
+        language: context.languageCode ?? 'en-GB',
+        officeId: context.tideConnection.officeId,
+        catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+        agentId: context.agentId,
+        payload: updatedEditablePackagingEntry
+      } as PackagingRequestBase<PackagingEntry>;
+      const bookingResponse = await bookPackagingEntry(config, request);
+
+      dispatch(setBookingNumber(bookingResponse.number));
+
+      if (bookingResponse.paymentUrl) {
+        window.location.href = bookingResponse.paymentUrl;
+      } else {
+        dispatch(setCurrentStep(2));
+      }
+    } catch (error) {
+      dispatch(setCurrentStep(3));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <div className="booking">
       <div className="booking__content">
-        <BookingPanel
-          currentStep={currentStep}
-          stepLabels={stepLabels}
-          StepIndicatorsComponent={StepIndicators}
-          renderTitle={(step) => (
-            <>
-              {step + 1}.&nbsp;{stepLabels[step]}
-            </>
-          )}>
-          {/* Panel body content goes here */}
-          <div></div>
-        </BookingPanel>
+        <div className="booking__panel">
+          <BookingPanel
+            currentStep={currentStep}
+            stepLabels={stepLabels}
+            StepIndicatorsComponent={StepIndicators}
+            renderTitle={(step) => (
+              <>
+                {step + 1}.&nbsp;{stepLabels[step]}
+              </>
+            )}>
+            {currentStep === 0 && (
+              <SharedTravelersForm
+                formik={formik}
+                translations={translations}
+                travellersSettings={travellersSettings}
+                countries={countries}
+                travelersFirstStep={false}
+                isUnavailable={false}
+                useCompactForm={false}
+                showAgentSelection={false}
+              />
+            )}
+
+            {currentStep === 1 && (
+              <SharedSummary
+                translations={translations}
+                travelerFormValues={formik.values}
+                isSubmitting={isSubmitting}
+                userValidated={userValidated}
+                remarks={remarks}
+                enableVoucher={false}
+                allowOption={false}
+                isOffer={false}
+                onUserValidatedChange={setUserValidated}
+                onRemarksChange={setRemarks}
+                onSubmit={handleSummarySubmit}
+                renderOptions={() => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails, translations)}
+                renderPreviousButton={() => (
+                  <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => dispatch(setCurrentStep(0))} className="cta cta--secondary">
+                    {translations.STEPS.PREVIOUS}
+                  </button>
+                )}
+              />
+            )}
+            {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} />
       </div>

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

@@ -3,7 +3,6 @@ import { formatDate, getDateOnlyTime, getTranslations } from '../../../shared/ut
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { useSelector } from 'react-redux';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import SharedSidebar from '../../../shared/booking/Sidebar';
 
 import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
 import { first, last, sum } from 'lodash';
@@ -13,6 +12,7 @@ import { RoomTraveler } from '../../../booking-wizard/types';
 
 import { BookingPackageFlightMetaData, BookingPriceDetail, PackagingEntryLine } from '@qite/tide-client';
 import Spinner from '../spinner/spinner';
+import SharedSidebar from '../../../shared/booking/shared-sidebar';
 
 interface WLSidebarProps {
   activeSearchSeed: SearchSeed | null;
@@ -79,9 +79,6 @@ const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed }) => {
     return null;
   }
 
-  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
-  console.log('priceDetails in WLSidebar:', priceDetails);
-
   const sortedLines = useMemo(() => {
     return [...(editablePackagingEntry?.lines ?? [])].sort((a, b) => {
       const dateA = getDateOnlyTime(a.from);

package/src/search-results/components/group-tour/group-tour-card.tsx

@@ -19,7 +19,7 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cms
   const context = useContext(SearchResultsConfigurationContext);
   const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
   if (!context) {
-    return;
+    return null;
   }
   const dispatch = useDispatch();
   const translations = getTranslations(languageCode ?? 'en-GB');

package/src/search-results/components/group-tour/group-tour-results.tsx

@@ -15,7 +15,7 @@ interface GroupTourResultsProps {
 const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
   const context = useContext(SearchResultsConfigurationContext);
   if (!context) {
-    return;
+    return null;
   }
 
   if (isLoading) {

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

@@ -29,7 +29,8 @@ import {
   setInitialFlightFilters,
   resetFlightFilters,
   setFilters,
-  setInitialFilters
+  setInitialFilters,
+  setBookPackagingEntry
 } from '../../store/search-results-slice';
 import { FlyInType, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
@@ -58,7 +59,11 @@ import {
   PackagingFlightResponse,
   PackagingAccommodationResponse,
   FlightSearchResponseFlightSegment,
-  PackagingEntryLineFlightLine
+  PackagingEntryLineFlightLine,
+  PackagingEntryAddress,
+  PackagingEntryPax,
+  PackagingEntryRoom,
+  PackagingRequestBase
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { concat, first, isEmpty, last, range } from 'lodash';
@@ -99,7 +104,6 @@ import FullItinerary from '../itinerary/full-itinerary';
 import { getFlightKey } from '../../utils/flight-utils';
 import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
 import { Spinner } from '../../..';
-import { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
 import {
   selectSelectedCombinationFlight,
   selectSelectedOutward,
@@ -167,6 +171,7 @@ const SearchResultsContainer: React.FC = () => {
   const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
 
   const [itineraryOpen, setItineraryOpen] = useState(false);
+  const [isBookingConfirmation, setIsBookingConfirmation] = useState(false);
 
   const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
 
@@ -472,7 +477,6 @@ const SearchResultsContainer: React.FC = () => {
   const handleConfirmHotelSwap = () => {
     const updatedEntry = swapHotelInPackagingEntry();
     if (!updatedEntry) return;
-
     dispatch(setEditablePackagingEntry(updatedEntry));
     handleFlyInToggle(false);
   };
@@ -797,6 +801,14 @@ const SearchResultsContainer: React.FC = () => {
     if (context?.packagingEntry) {
       dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
       dispatch(setTransactionId(context.packagingEntry.transactionId));
+
+      const params = new URLSearchParams(location.search);
+      const bookingConfirmation = getStringFromParams(params, 'bookingConfirmation');
+      console.log('bookingConfirmation', bookingConfirmation);
+      if (bookingConfirmation == 'true') {
+        setIsBookingConfirmation(true);
+        dispatch(setBookPackagingEntry(true));
+      }
     }
   }, [context?.packagingEntry]);
 
@@ -1111,7 +1123,6 @@ const SearchResultsContainer: React.FC = () => {
     });
 
     if (!nextEntry) return;
-
     dispatch(setEditablePackagingEntry(nextEntry));
 
     if (selectedCombinationFlight) {
@@ -1418,28 +1429,43 @@ const SearchResultsContainer: React.FC = () => {
     }
 
     let paxId = 0;
+    const pax: PackagingEntryPax[] = [];
+    const rooms: PackagingEntryRoom[] = [];
+
+    seed.rooms?.forEach((room, roomIndex) => {
+      const paxIds = room.pax.map((_, paxIndex) => {
+        const id = paxId++;
 
-    const pax =
-      seed.rooms?.flatMap((room, roomIndex) =>
-        room.pax.map((_, paxIndex) => ({
-          id: paxId++,
+        pax.push({
+          id,
           firstName: '',
           lastName: '',
           dateOfBirth: null,
           isMainBooker: roomIndex === 0 && paxIndex === 0
-        }))
-      ) ?? [];
+        });
+
+        return id;
+      });
+
+      rooms.push({
+        id: roomIndex,
+        paxIds
+      });
+    });
 
     return {
       language,
       transactionId,
       dossierNumber: '',
-      status: 0,
+      status: context?.entryStatus,
+      customStatusId: context?.customEntryStatusId,
       bookingDate: null,
       price: 0,
       depositAmount: 0,
       pax,
-      lines: []
+      rooms,
+      lines: [],
+      address: {} as PackagingEntryAddress
     } as PackagingEntry;
   };
 
@@ -1453,7 +1479,7 @@ const SearchResultsContainer: React.FC = () => {
       {context && (
         <div className="search">
           {bookPackagingEntry ? (
-            <BookPackagingEntry activeSearchSeed={activeSearchSeed} />
+            <BookPackagingEntry activeSearchSeed={activeSearchSeed} isConfirmationPage={isBookingConfirmation} />
           ) : (
             <div className="search__container">
               {context.searchConfiguration.qsmType === PortalQsmType.Flight && (

package/src/search-results/store/search-results-slice.ts

@@ -59,6 +59,7 @@ export interface SearchResultsState {
 
   bookPackagingEntry: boolean;
   currentStep: number;
+  bookingNumber?: string;
 }
 
 const initialState: SearchResultsState = {
@@ -109,7 +110,8 @@ const initialState: SearchResultsState = {
   confirmedExcursionsByDay: {},
 
   bookPackagingEntry: false,
-  currentStep: 0
+  currentStep: 0,
+  bookingNumber: undefined
 };
 
 const searchResultsSlice = createSlice({
@@ -292,6 +294,9 @@ const searchResultsSlice = createSlice({
     },
     setCurrentStep(state, action: PayloadAction<number>) {
       state.currentStep = action.payload;
+    },
+    setBookingNumber(state, action: PayloadAction<string>) {
+      state.bookingNumber = action.payload;
     }
   }
 });
@@ -339,7 +344,8 @@ export const {
   removeConfirmedExcursionForDay,
   clearConfirmedExcursionsForDay,
   setBookPackagingEntry,
-  setCurrentStep
+  setCurrentStep,
+  setBookingNumber
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;

package/src/search-results/types.ts

@@ -61,6 +61,10 @@ export interface SearchResultsConfiguration {
   destinationImage?: { url: string; alt: string };
   onBook?: (result: BookingPackage) => void;
   packagingEntry?: PackagingEntry | null;
+
+  generatePaymentUrl?: boolean;
+  entryStatus?: number;
+  customEntryStatusId?: number;
 }
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';

package/src/shared/booking/{BookingPanel.tsx → booking-panel.tsx}

@@ -10,7 +10,7 @@ interface BookingPanelProps {
 
 const BookingPanel: React.FC<BookingPanelProps> = ({ currentStep, stepLabels, renderTitle, children, StepIndicatorsComponent }) => {
   return (
-    <div className="booking__panel">
+    <div className="booking__panel__wrapper">
       <StepIndicatorsComponent currentStep={currentStep} stepLabels={stepLabels} />
       <div className="booking__panel-frame booking__panel-frame--transparent">
         <div className="booking__panel-heading">

package/src/shared/booking/shared-confirmation.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import Icon from '../components/icon';
+import Message from '../../booking-wizard/components/message';
+
+export interface SharedConfirmationTranslations {
+  MAIL_SUBJECT: string;
+  TITLE_TEXT_OPTION: string;
+  TITLE_TEXT_OFFER: string;
+  TITLE_TEXT_BOOKING: string;
+  MESSAGE_TEXT1: string;
+  MESSAGE_TEXT2_OFFER: string;
+  MESSAGE_TEXT2_BOOKING: string;
+  QUESTIONS_TEXT1: string;
+  QUESTIONS_TEXT2: string;
+  QUESTIONS_TEXT3: string;
+  QUESTIONS_ALT: string;
+}
+
+export interface SharedConfirmationProps {
+  bookingNumber?: string;
+  isOption?: boolean;
+  isOffer?: boolean;
+  translations: SharedConfirmationTranslations;
+  companyContactPhone?: string;
+  companyContactEmail?: string;
+  homeUrl?: string;
+}
+
+function format(str: string, args: (string | number | undefined)[]): string {
+  // Simple format function: replaces {0}, {1}, ... with args
+  return str.replace(/\{(\d+)\}/g, (match, number) => (typeof args[number] !== 'undefined' ? String(args[number]) : match));
+}
+
+const SharedConfirmation: React.FC<SharedConfirmationProps> = ({
+  bookingNumber,
+  isOption,
+  isOffer,
+  translations,
+  companyContactPhone,
+  companyContactEmail,
+  homeUrl = '/'
+}) => {
+  const encodedMailSubject = encodeURI(translations.MAIL_SUBJECT);
+  const titleText = isOption
+    ? format(translations.TITLE_TEXT_OPTION, [bookingNumber])
+    : isOffer
+    ? format(translations.TITLE_TEXT_OFFER, [bookingNumber])
+    : format(translations.TITLE_TEXT_BOOKING, [bookingNumber]);
+
+  return (
+    <div className="form form__booking--message" id="booking--confirmation">
+      <div className="form__region">
+        <div className="form__row">
+          <div className="form__group">
+            <Message
+              type="success"
+              title={titleText}
+              actionComponent={
+                companyContactPhone || companyContactEmail ? (
+                  <div className="sm">
+                    {companyContactPhone && (
+                      <a href={`tel://${companyContactPhone}`} className="sm__icon">
+                        <Icon name="tel" />
+                      </a>
+                    )}
+                    {companyContactEmail && (
+                      <a href={`mailto://${companyContactEmail}`} className="sm__icon">
+                        <Icon name="mail" />
+                      </a>
+                    )}
+                    {homeUrl && (
+                      <a href={homeUrl} className="sm__icon">
+                        <Icon name="home" />
+                      </a>
+                    )}
+                  </div>
+                ) : undefined
+              }>
+              {!isOption ? (
+                <>
+                  <p>
+                    {translations.MESSAGE_TEXT1}
+                    <br />
+                    {isOffer ? translations.MESSAGE_TEXT2_OFFER : translations.MESSAGE_TEXT2_BOOKING}
+                  </p>
+                  {companyContactEmail && (
+                    <p>
+                      {translations.QUESTIONS_TEXT1}{' '}
+                      <a href={`mailto:${companyContactEmail}?subject=${encodedMailSubject}`} title={translations.QUESTIONS_ALT}>
+                        {translations.QUESTIONS_TEXT2}
+                      </a>
+                      {translations.QUESTIONS_TEXT3}
+                    </p>
+                  )}
+                </>
+              ) : undefined}
+            </Message>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SharedConfirmation;