@qite/tide-booking-component 1.4.122 → 1.4.124

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

@@ -1,244 +1,244 @@
-import React, { useContext, useState } from 'react';
-import { FlyInType, HotelResult, SearchResultsConfiguration } from '../../types';
-import Spinner from '../spinner/spinner';
-import HotelCard from './hotel-card';
-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 '../../../shared/components/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 => {
-  if (locationName || regionName) {
-    return `${locationName || regionName}${countryName ? `, ${countryName}` : ''}`;
-  }
-
-  return fallback || '';
-};
-
-const getBaseHotelResult = (
-  searchResult: {
-    code: string;
-    name: string;
-    locationName?: string;
-    regionName?: string;
-    countryName?: string;
-    price: number;
-    currencyCode: string;
-  },
-  cmsItem: any,
-  languageCode?: string,
-  translations?: any
-) => ({
-  type: 'hotel' as const,
-  code: searchResult.code,
-  title: cmsItem?.content?.general?.title || searchResult.name,
-  image: cmsItem?.content?.images?.thumbnailPicture?.url,
-  description: cmsItem?.content?.descriptions?.introductionTitle || '',
-  location: getLocation(searchResult.locationName, searchResult.regionName, searchResult.countryName, cmsItem?.parentItem?.name),
-  price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
-  ctaText: translations?.SRP.VIEW_DETAILS
-});
-
-const mapBookingPackageResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
-  return {
-    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
-    id: searchResult.productId,
-    days: `${calculateNights(searchResult.stayFromDate, searchResult.stayToDate)} ${translations?.SRP.NIGHTS}`,
-    accommodation: searchResult.accommodationName,
-    regime: searchResult.regimeName,
-    stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
-  };
-};
-
-const mapPackagingAccoResult = (searchResult: PackagingAccommodationResponse, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
-  const selectedOption = first(searchResult.rooms)?.options?.find((x) => x.isSelected);
-
-  return {
-    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
-    days: `${calculateNights(new Date(searchResult.fromDate), new Date(searchResult.toDate))} ${translations?.SRP.NIGHTS}`,
-    accommodation: selectedOption?.accommodationName || '',
-    regime: selectedOption?.regimeName || '',
-    stars: cmsItem?.content?.general?.stars,
-    contents: searchResult.contents
-  };
-};
-
-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}`;
-
-    if (context?.showCustomCards && context?.customCardRenderer) {
-      return (
-        <div key={key} className="search__result-card">
-          {context.customCardRenderer(result)}
-        </div>
-      );
-    }
-
-    return <HotelCard key={key} result={result} translations={translations} />;
-  });
-
-  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, isFlyIn }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const dispatch = useDispatch();
-  if (!context) {
-    return null;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-
-  const { filteredResults, filteredPackagingAccoResults, packagingAccoResults, activeTab, flyInIsOpen, selectedPackagingAccoResultCode } = useSelector(
-    (state: SearchResultsRootState) => state.searchResults
-  );
-
-  const cmsMap = React.useMemo(() => {
-    const map = new Map();
-
-    context.cmsHotelData?.forEach((item) => {
-      const code = item?.content?.general?.product?.code;
-      if (code) {
-        map.set(code, item);
-      }
-    });
-
-    return map;
-  }, [context.cmsHotelData]);
-
-  const mappedResults = React.useMemo(() => {
-    if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging) {
-      return filteredResults.map((result) => mapBookingPackageResult(result, cmsMap.get(result.code), context.languageCode, translations));
-    }
-
-    if (
-      context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
-      (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging)
-    ) {
-      return filteredPackagingAccoResults.map((result) => mapPackagingAccoResult(result, cmsMap.get(result.code), context.languageCode, translations));
-    }
-
-    return [];
-  }, [
-    context.searchConfiguration.qsmType,
-    context.searchConfiguration.enableManualPackaging,
-    context.languageCode,
-    filteredResults,
-    filteredPackagingAccoResults,
-    cmsMap,
-    translations
-  ]);
-
-  const firstBookingResult = filteredResults?.[0];
-  const firstPackagingResult = filteredPackagingAccoResults?.[0];
-
-  const firstResultDate =
-    context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging
-      ? firstBookingResult?.fromDate
-      : firstPackagingResult?.fromDate;
-
-  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;
-
-    let filteredMapperResults = mappedResults;
-
-    if (selectedPackagingAccoResult) {
-      filteredMapperResults = mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code);
-    }
-
-    if (shouldShowAll) {
-      if (isFlyIn) {
-        return mappedResults;
-      }
-      return filteredMapperResults;
-    }
-
-    if (selectedPackagingAccoResult) {
-      return filteredMapperResults.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 (
-    <>
-      {!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" />
-            )} */}
-            <p className="search__results__label__date-date">{firstResultDay}</p>
-            <p>{firstResultMonth}</p>
-          </div>
-          <div className="search__results__label__text">
-            <Icon name="ui-bed" height={16} />
-            <h3>
-              {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
-            </h3>
-          </div>
-        </div>
-      )}
-      {isLoading ? (
-        <>{context.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>
-      ) : (
-        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>
-      )}
-      {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
-    </>
-  );
-};
-
-export default HotelAccommodationResults;
+import React, { useContext, useState } from 'react';
+import { FlyInType, HotelResult, SearchResultsConfiguration } from '../../types';
+import Spinner from '../spinner/spinner';
+import HotelCard from './hotel-card';
+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 '../../../shared/components/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 => {
+  if (locationName || regionName) {
+    return `${locationName || regionName}${countryName ? `, ${countryName}` : ''}`;
+  }
+
+  return fallback || '';
+};
+
+const getBaseHotelResult = (
+  searchResult: {
+    code: string;
+    name: string;
+    locationName?: string;
+    regionName?: string;
+    countryName?: string;
+    price: number;
+    currencyCode: string;
+  },
+  cmsItem: any,
+  languageCode?: string,
+  translations?: any
+) => ({
+  type: 'hotel' as const,
+  code: searchResult.code,
+  title: cmsItem?.content?.general?.title || searchResult.name,
+  image: cmsItem?.content?.images?.thumbnailPicture?.url,
+  description: cmsItem?.content?.descriptions?.introductionTitle || '',
+  location: getLocation(searchResult.locationName, searchResult.regionName, searchResult.countryName, cmsItem?.parentItem?.name),
+  price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
+  ctaText: translations?.SRP.VIEW_DETAILS
+});
+
+const mapBookingPackageResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
+  return {
+    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
+    id: searchResult.productId,
+    days: `${calculateNights(searchResult.stayFromDate, searchResult.stayToDate)} ${translations?.SRP.NIGHTS}`,
+    accommodation: searchResult.accommodationName,
+    regime: searchResult.regimeName,
+    stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
+  };
+};
+
+const mapPackagingAccoResult = (searchResult: PackagingAccommodationResponse, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
+  const selectedOption = first(searchResult.rooms)?.options?.find((x) => x.isSelected);
+
+  return {
+    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
+    days: `${calculateNights(new Date(searchResult.fromDate), new Date(searchResult.toDate))} ${translations?.SRP.NIGHTS}`,
+    accommodation: selectedOption?.accommodationName || '',
+    regime: selectedOption?.regimeName || '',
+    stars: cmsItem?.content?.general?.stars,
+    contents: searchResult.contents
+  };
+};
+
+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}`;
+
+    if (context?.showCustomCards && context?.customCardRenderer) {
+      return (
+        <div key={key} className="search__result-card">
+          {context.customCardRenderer(result)}
+        </div>
+      );
+    }
+
+    return <HotelCard key={key} result={result} translations={translations} />;
+  });
+
+  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, isFlyIn }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const dispatch = useDispatch();
+  if (!context) {
+    return null;
+  }
+
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+
+  const { filteredResults, filteredPackagingAccoResults, packagingAccoResults, activeTab, flyInIsOpen, selectedPackagingAccoResultCode } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
+
+  const cmsMap = React.useMemo(() => {
+    const map = new Map();
+
+    context.cmsHotelData?.forEach((item) => {
+      const code = item?.content?.general?.product?.code;
+      if (code) {
+        map.set(code, item);
+      }
+    });
+
+    return map;
+  }, [context.cmsHotelData]);
+
+  const mappedResults = React.useMemo(() => {
+    if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging) {
+      return filteredResults.map((result) => mapBookingPackageResult(result, cmsMap.get(result.code), context.languageCode, translations));
+    }
+
+    if (
+      context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
+      (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging)
+    ) {
+      return filteredPackagingAccoResults.map((result) => mapPackagingAccoResult(result, cmsMap.get(result.code), context.languageCode, translations));
+    }
+
+    return [];
+  }, [
+    context.searchConfiguration.qsmType,
+    context.searchConfiguration.enableManualPackaging,
+    context.languageCode,
+    filteredResults,
+    filteredPackagingAccoResults,
+    cmsMap,
+    translations
+  ]);
+
+  const firstBookingResult = filteredResults?.[0];
+  const firstPackagingResult = filteredPackagingAccoResults?.[0];
+
+  const firstResultDate =
+    context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging
+      ? firstBookingResult?.fromDate
+      : firstPackagingResult?.fromDate;
+
+  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;
+
+    let filteredMapperResults = mappedResults;
+
+    if (selectedPackagingAccoResult) {
+      filteredMapperResults = mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code);
+    }
+
+    if (shouldShowAll) {
+      if (isFlyIn) {
+        return mappedResults;
+      }
+      return filteredMapperResults;
+    }
+
+    if (selectedPackagingAccoResult) {
+      return filteredMapperResults.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 (
+    <>
+      {!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" />
+            )} */}
+            <p className="search__results__label__date-date">{firstResultDay}</p>
+            <p>{firstResultMonth}</p>
+          </div>
+          <div className="search__results__label__text">
+            <Icon name="ui-bed" height={16} />
+            <h3>
+              {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
+            </h3>
+          </div>
+        </div>
+      )}
+      {isLoading ? (
+        <>{context.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>
+      ) : (
+        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>
+      )}
+      {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
+    </>
+  );
+};
+
+export default HotelAccommodationResults;