@qite/tide-booking-component 1.4.113 → 1.4.115

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,16 +59,19 @@ 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);
 
   const translations = useMemo(() => getTranslations(context?.languageCode ?? 'en-GB'), [context?.languageCode]);
 
@@ -117,7 +130,14 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
     }
   }, [isConfirmationPage, dispatch]);
 
-  if (!context || !editablePackagingEntry || !priceDetails || !config) return null;
+  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();
@@ -165,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);
     }
   };
 
@@ -186,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}
@@ -237,7 +257,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
 
         <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

@@ -1489,7 +1489,11 @@ const SearchResultsContainer: React.FC<SearchResultsContainerProps> = ({ onBooki
       {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/types.ts

@@ -60,6 +60,7 @@ export interface SearchResultsConfiguration {
 
   destinationImage?: { url: string; alt: string };
   onBook?: (result: BookingPackage) => void;
+  onFlightBook?: (result: ExtendedFlightSearchResponseItem) => void;
   packagingEntry?: PackagingEntry | null;
 
   generatePaymentUrl?: boolean;

package/src/shared/booking/summary.tsx

@@ -1,7 +1,6 @@
 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';

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

@@ -140,10 +140,13 @@ const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
   };
 
   // TODO: go to booking page?
-  const handleConfirm = () => {
+  const onHandleConfirm = () => {
     if (isOpen) {
       onCancelSearch();
       setIsOpen(false);
+      if (context?.onFlightBook && selectedCombinationFlight) {
+        context.onFlightBook(selectedCombinationFlight);
+      }
     }
   };
 
@@ -492,7 +495,7 @@ const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
             {translations.SHARED.TOTAL_PRICE}: €{selectedCombinationFlight?.price?.toFixed(2)}
           </div>
           <div className="flyin__button-wrapper">
-            <button className="cta cta--select" onClick={handleConfirm}>
+            <button className="cta cta--select" onClick={onHandleConfirm}>
               {translations.PRODUCT.BOOK_NOW}
             </button>
           </div>

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/utils/booking-summary.tsx

@@ -44,3 +44,14 @@ export const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntr
     );
   });
 };
+
+export const getImageSrcFromHtml = (html?: string | null): string | undefined => {
+  if (!html || typeof window === 'undefined') {
+    return undefined;
+  }
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const img = doc.querySelector('img');
+
+  return img?.getAttribute('src') ?? undefined;
+};

package/src/shared/utils/tide-api-utils.ts

@@ -3,8 +3,8 @@ import { isNil } from 'lodash';
 import { ApiSettingsState } from '../types';
 
 export const tideConnection = {
-  // host: 'https://localhost:44341',
-  host: 'https://preview-tide.tidesoftware.be',
+  host: 'https://localhost:44341',
+  // host: 'https://preview-tide.tidesoftware.be',
   apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
   catalogueIds: [1],
   officeId: 1

package/styles/components/_select-wrapper.scss

@@ -13,6 +13,7 @@
       border-left: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
       border-bottom: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
       transform: rotate(-45deg);
+      pointer-events: none;
     }
   }
 
@@ -30,6 +31,10 @@
       border: --tide-booking-room-options-dropdown-select-border-focus;
     }
 
+    &:hover {
+      cursor: pointer;
+    }
+
     option {
       appearance: none;
       display: flex;