@qite/tide-booking-component 1.4.103 → 1.4.105

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

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
-import { HotelResult, SearchResultsConfiguration } from '../../types';
+import React, { useContext, useState } from 'react';
+import { FlyInType, HotelResult, SearchResultsConfiguration } from '../../types';
 import Spinner from '../spinner/spinner';
 import HotelCard from './hotel-card';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { BookingPackageItem, PackagingAccommodationResponse, PortalQsmType } from '@qite/tide-client';
 import { format, parseISO } from 'date-fns';
@@ -10,9 +10,11 @@ import { calculateNights, formatPrice, getTranslations } from '../../../shared/u
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { first } from 'lodash';
 import Icon from '../icon';
+import { setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
 
 interface HotelAccommodationResultsProps {
   isLoading: boolean;
+  isFlyIn?: boolean;
 }
 
 const getLocation = (locationName?: string, regionName?: string, countryName?: string, fallback?: string): string => {
@@ -71,7 +73,14 @@ const mapPackagingAccoResult = (searchResult: PackagingAccommodationResponse, cm
   };
 };
 
-const renderHotelResults = (results: HotelResult[], context: SearchResultsConfiguration, activeTab: string | null, translations: any) => {
+const renderHotelResults = (
+  results: HotelResult[],
+  context: SearchResultsConfiguration,
+  activeTab: string | null,
+  translations: any,
+  selectedPackagingAccoResult?: HotelResult,
+  isFlyIn?: boolean
+) => {
   const renderedResults = results.map((result, index) => {
     const key = `${result.id ?? result.code}-${index}`;
 
@@ -86,19 +95,28 @@ const renderHotelResults = (results: HotelResult[], context: SearchResultsConfig
     return <HotelCard key={key} result={result} translations={translations} />;
   });
 
-  return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
+  return (
+    <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>
+      {selectedPackagingAccoResult && !isFlyIn && (
+        <HotelCard key={selectedPackagingAccoResult.code} result={selectedPackagingAccoResult} translations={translations} />
+      )}
+      {renderedResults}
+    </div>
+  );
 };
 
-const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading }) => {
+const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, isFlyIn }) => {
   const context = useContext(SearchResultsConfigurationContext);
-
+  const dispatch = useDispatch();
   if (!context) {
     return null;
   }
 
   const translations = getTranslations(context.languageCode ?? 'en-GB');
 
-  const { filteredResults, filteredPackagingAccoResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { filteredResults, filteredPackagingAccoResults, packagingAccoResults, activeTab, flyInIsOpen, selectedPackagingAccoResultCode } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
 
   const cmsMap = React.useMemo(() => {
     const map = new Map();
@@ -147,26 +165,65 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
   const firstResultDay = firstResultDate ? format(parseISO(firstResultDate), 'd') : null;
   const firstResultMonth = firstResultDate ? format(parseISO(firstResultDate), 'MMM') : null;
 
+  const selectedPackagingAccoResult = React.useMemo(() => {
+    const selectedResult = packagingAccoResults.find((result) => result.code === selectedPackagingAccoResultCode);
+    if (selectedResult) {
+      return mapPackagingAccoResult(selectedResult, cmsMap.get(selectedResult.code), context.languageCode, translations);
+    }
+  }, [packagingAccoResults, selectedPackagingAccoResultCode, cmsMap, context.languageCode, translations]);
+
+  const visibleResults = React.useMemo(() => {
+    const shouldShowAll = context?.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight || isFlyIn;
+
+    if (shouldShowAll) {
+      return mappedResults;
+    }
+
+    if (selectedPackagingAccoResult) {
+      return mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code).slice(0, 2);
+    }
+
+    return mappedResults.slice(0, 3);
+  }, [context?.searchConfiguration.qsmType, mappedResults, isFlyIn, selectedPackagingAccoResult]);
+
+  const handleShowMoreHotels = (flyInType: FlyInType) => {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
+
   return (
     <>
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          {firstResultDay && firstResultMonth ? (
-            <>
-              <p className="search__results__label__date-date">{firstResultDay}</p>
-              <p>{firstResultMonth}</p>
-            </>
-          ) : (
-            <Icon name="ui-bed" height={16} fill="white" />
-          )}
+      {!isFlyIn && (
+        <div className="search__results__label search__results__label--secondary">
+          <div className="search__results__label__date">
+            {firstResultDay && firstResultMonth ? (
+              <>
+                <p className="search__results__label__date-date">{firstResultDay}</p>
+                <p>{firstResultMonth}</p>
+              </>
+            ) : (
+              <Icon name="ui-bed" height={16} fill="white" />
+            )}
+          </div>
+          <div className="search__results__label__text">
+            <h3>
+              {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
+            </h3>
+          </div>
         </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
-          </h3>
+      )}
+      {isLoading ? (
+        <>{context.customSpinner ?? <Spinner />}</>
+      ) : (
+        renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn)
+      )}
+      {packagingAccoResults.length > 3 && !isFlyIn && (
+        <div className="search__results__cards__actions">
+          <button className="cta cta--secondary" onClick={() => handleShowMoreHotels('acco-results')}>
+            {translations.SRP.SHOW_MORE}
+          </button>
         </div>
-      </div>
-      {isLoading ? <>{context.customSpinner ?? <Spinner />}</> : renderHotelResults(mappedResults, context, activeTab, translations)}
+      )}
       {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
     </>
   );

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

@@ -34,9 +34,6 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
             onClick={() => handleChange(result.code)}>
             {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
           </button>
-          {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
-            {translations?.SRP.VIEW_DETAILS}
-          </button> */}
         </div>
       </div>
     );

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

@@ -315,10 +315,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
           fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
-          <path
-            d="M64 64C28.7 64 0 92.7 0 128l0 64C0 200.8 7.4 207.7 15.7 210.6 34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320l0 64c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-64c0-8.8-7.4-15.7-15.7-18.6-18.8-6.5-32.3-24.4-32.3-45.4s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6l0-64c0-35.3-28.7-64-64-64L64 64zM416 336l0-160-256 0 0 160 256 0zM112 160c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32l0-192z"
-            fill="currentColor"
-          />
+          <path d="M64 64C28.7 64 0 92.7 0 128l0 64C0 200.8 7.4 207.7 15.7 210.6 34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320l0 64c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-64c0-8.8-7.4-15.7-15.7-18.6-18.8-6.5-32.3-24.4-32.3-45.4s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6l0-64c0-35.3-28.7-64-64-64L64 64zM416 336l0-160-256 0 0 160 256 0zM112 160c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32l0-192z" />
         </svg>
       );