@qite/tide-booking-component 1.4.113 → 1.4.114

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/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/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/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;