@qite/tide-booking-component 1.4.102 → 1.4.104

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

@@ -1,9 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Filter, FilterOption } from '../../types';
 import MultiRangeFilter from '../multi-range-filter';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { resetFilters, setFilters } from '../../store/search-results-slice';
-import { useDispatch } from 'react-redux';
 import Spinner from '../spinner/spinner';
 import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
@@ -14,10 +12,13 @@ interface FiltersProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  setFilters: (filters: Filter[]) => void;
+  resetFilters: (filters: Filter[]) => void;
 }
 
-const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
+const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading, setFilters, resetFilters }) => {
   const context = useContext(SearchResultsConfigurationContext);
+
   if (!context || !context.showFilters) {
     return null;
   }
@@ -25,8 +26,6 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
 
-  const dispatch = useDispatch();
-
   const toggleFilterVisibility = (filterId: string) => {
     setVisibleFilters((prev) => ({
       ...prev,
@@ -44,7 +43,7 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleSliderChange = (filter: Filter, newMin: number, newMax: number) => {
@@ -58,12 +57,12 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleFullReset = () => {
     if (!isLoading) {
-      dispatch(resetFilters(initialFilters));
+      resetFilters(initialFilters);
     }
   };
 

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

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { durationTicksInHoursString, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
+import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
 import Icon from '../../icon';
 import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
 import { getArrivalSegment, getDepartureSegment, getFlightSegments, getNumberOfStopsLabel } from '../../../utils/flight-utils';
@@ -11,18 +11,32 @@ interface IndependentFlightOptionProps {
   guid: string | null;
   selectedGuid?: string | null;
   isOutward: boolean;
+  showSelectedState?: boolean;
+  currentSelectedPrice?: number;
+  price?: number;
 }
 
-const IndependentFlightOption: React.FC<IndependentFlightOptionProps> = ({ item, onSelect, guid, selectedGuid, isOutward }) => {
+const IndependentFlightOption: React.FC<IndependentFlightOptionProps> = ({
+  item,
+  onSelect,
+  guid,
+  selectedGuid,
+  isOutward,
+  showSelectedState,
+  currentSelectedPrice,
+  price
+}) => {
   const context = useContext(SearchResultsConfigurationContext);
   const language = context?.languageCode ?? 'en-GB';
   const translations = getTranslations(language);
 
   const [detailsOpen, setDetailsOpen] = useState(false);
 
+  const priceDifference = price && currentSelectedPrice ? price - currentSelectedPrice : null;
+
   return (
     <div className="search__result-card" key={`flight-${item.code}`}>
-      <div className="flight">
+      <div className={`flight ${showSelectedState && selectedGuid === guid ? 'flight--selected' : ''}`}>
         <div className="flight__option">
           <div className="flight__content">
             <div className="flight__flights">
@@ -30,7 +44,20 @@ const IndependentFlightOption: React.FC<IndependentFlightOptionProps> = ({ item,
                 <div className="flight__flight__header">
                   <div className="flight__status__container"></div>
                   <div className="flight__price">
-                    {/* <span className="price">{formatPrice(item.price, 'EUR', context?.languageCode ?? 'en-GB')}</span> */}
+                    {price != null &&
+                      price > 0 &&
+                      (isOutward ? (
+                        <span className="price">
+                          {translations.QSM.ROUNDTRIP + ' ' + translations.SRP.PRICE}&nbsp;{formatPrice(price, 'EUR', context?.languageCode ?? 'en-GB')}
+                        </span>
+                      ) : (
+                        priceDifference != null &&
+                        Math.abs(priceDifference) > 0 && (
+                          <span className="price">
+                            {priceDifference > 0 ? '+' : '-'}&nbsp;{formatPrice(Math.abs(priceDifference), 'EUR', context?.languageCode ?? 'en-GB')}
+                          </span>
+                        )
+                      ))}
                     <button type="button" className={`cta ${selectedGuid === guid ? 'cta--selected' : 'cta--select'}`} onClick={() => onSelect?.()}>
                       {selectedGuid === guid ? 'Selected' : 'Select'}
                     </button>

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

@@ -1,17 +1,20 @@
-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';
 import { calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
 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 => {
@@ -70,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}`;
 
@@ -85,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();
@@ -146,29 +165,66 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
   const firstResultDay = firstResultDate ? format(parseISO(firstResultDate), 'd') : null;
   const firstResultMonth = firstResultDate ? format(parseISO(firstResultDate), 'MMM') : null;
 
-  if (isLoading) {
-    return <>{context.customSpinner ?? <Spinner />}</>;
-  }
+  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]);
 
-  if (mappedResults.length === 0) {
-    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
-  }
+  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">
-          <p className="search__results__label__date-date">{firstResultDay}</p>
-          <p>{firstResultMonth}</p>
+      {!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>
-
-      {renderHotelResults(mappedResults, context, activeTab, translations)}
+      )}
+      {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
     </>
   );
 };

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

@@ -134,7 +134,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
           {title && <title>{title}</title>}
           <path
             d="M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"
-            fill="currentColor"
+            fill={fill ?? 'currentColor'}
           />
         </svg>
       );