@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,176 +1,176 @@
-import React, { useContext } from 'react';
-import { HotelResult, SearchResultsConfiguration } from '../../types';
-import Spinner from '../spinner/spinner';
-import HotelCard from './hotel-card';
-import { 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';
-
-interface HotelAccommodationResultsProps {
-  isLoading: 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) => {
-  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}` : ''}`}>{renderedResults}</div>;
-};
-
-const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-
-  if (!context) {
-    return null;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-
-  const { filteredResults, filteredPackagingAccoResults, activeTab } = 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;
-
-  if (isLoading) {
-    return <>{context.customSpinner ?? <Spinner />}</>;
-  }
-
-  if (mappedResults.length === 0) {
-    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
-  }
-
-  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>
-        </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
-          </h3>
-        </div>
-      </div>
-
-      {renderHotelResults(mappedResults, context, activeTab, translations)}
-    </>
-  );
-};
-
-export default HotelAccommodationResults;
+import React, { useContext } from 'react';
+import { HotelResult, SearchResultsConfiguration } from '../../types';
+import Spinner from '../spinner/spinner';
+import HotelCard from './hotel-card';
+import { 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';
+
+interface HotelAccommodationResultsProps {
+  isLoading: 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) => {
+  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}` : ''}`}>{renderedResults}</div>;
+};
+
+const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+
+  if (!context) {
+    return null;
+  }
+
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+
+  const { filteredResults, filteredPackagingAccoResults, activeTab } = 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;
+
+  if (isLoading) {
+    return <>{context.customSpinner ?? <Spinner />}</>;
+  }
+
+  if (mappedResults.length === 0) {
+    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
+  }
+
+  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>
+        </div>
+        <div className="search__results__label__text">
+          <h3>
+            {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
+          </h3>
+        </div>
+      </div>
+
+      {renderHotelResults(mappedResults, context, activeTab, translations)}
+    </>
+  );
+};
+
+export default HotelAccommodationResults;

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

@@ -1,113 +1,113 @@
-import React from 'react';
-import { HotelResult } from '../../types';
-import Icon from '../icon';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { setSelectedPackagingAccoResult } from '../../store/search-results-slice';
-import he from 'he';
-
-interface HotelCardProps {
-  result: HotelResult;
-  translations?: any;
-}
-
-const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
-  const dispatch = useDispatch();
-  const { selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const handleChange = (productCode: string) => {
-    dispatch(setSelectedPackagingAccoResult(productCode));
-  };
-
-  if (result.contents?.length) {
-    return (
-      <div
-        key={result.id}
-        className="search__result-card__wrapper search__result-card__wrapper--custom"
-        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-        <div dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
-        <div className="search__result-card__footer">
-          <button
-            type="button"
-            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
-            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>
-    );
-  }
-
-  return (
-    <div
-      key={result.id}
-      className="search__result-card__wrapper"
-      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-      <div className="search__result-card__img-wrapper">
-        <img src={result.image} alt={result.title} className="search__result-card__img" />
-        <div className="search__result-card__price__wrapper">
-          <span className="search__result-card__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
-          <span className="search__result-card__price">{result.price}</span>
-        </div>
-      </div>
-      <div className="search__result-card__content">
-        <div className="search__result-card__content__wrapper">
-          <div className="search__result-card__header">
-            <div className="search__result-card__header__wrapper">
-              {result.stars && (
-                <div className="rating">
-                  {[...Array(result.stars)].map((_, index) => (
-                    <Icon name="ui-star" key={`rating-star-${index + 1}`} width={14} height={14} />
-                  ))}
-                </div>
-              )}
-              <h3 className="search__result-card__title">{result.title}</h3>
-            </div>
-          </div>
-          <a className="search__result-card__location">
-            <Icon name="ui-location" height={16} />
-            {result.location}
-            {/*  - Show on map &gt; 1.1 km from Center */}
-          </a>
-          <div className="search__result-card__options">
-            {/* <div className="search__result-card__option">
-              <Icon name="ui-wifi" height={16} />
-              Free Wi-Fi
-            </div> */}
-            {result.accommodation && (
-              <div className="search__result-card__option">
-                <Icon name="ui-bed" height={16} />
-                {result.accommodation}
-              </div>
-            )}
-            {result.regime && (
-              <div className="search__result-card__option">
-                <Icon name="ui-utensils" height={16} />
-                {result.regime}
-              </div>
-            )}
-          </div>
-          <p className="search__result-card__description">{result.description}</p>
-        </div>
-        <div className="search__result-card__footer">
-          <button
-            type="button"
-            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
-            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>
-    </div>
-  );
-};
-
-export default HotelCard;
+import React from 'react';
+import { HotelResult } from '../../types';
+import Icon from '../icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { setSelectedPackagingAccoResult } from '../../store/search-results-slice';
+import he from 'he';
+
+interface HotelCardProps {
+  result: HotelResult;
+  translations?: any;
+}
+
+const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
+  const dispatch = useDispatch();
+  const { selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const handleChange = (productCode: string) => {
+    dispatch(setSelectedPackagingAccoResult(productCode));
+  };
+
+  if (result.contents?.length) {
+    return (
+      <div
+        key={result.id}
+        className="search__result-card__wrapper search__result-card__wrapper--custom"
+        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
+        <div dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
+        <div className="search__result-card__footer">
+          <button
+            type="button"
+            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
+            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>
+    );
+  }
+
+  return (
+    <div
+      key={result.id}
+      className="search__result-card__wrapper"
+      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
+      <div className="search__result-card__img-wrapper">
+        <img src={result.image} alt={result.title} className="search__result-card__img" />
+        <div className="search__result-card__price__wrapper">
+          <span className="search__result-card__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
+          <span className="search__result-card__price">{result.price}</span>
+        </div>
+      </div>
+      <div className="search__result-card__content">
+        <div className="search__result-card__content__wrapper">
+          <div className="search__result-card__header">
+            <div className="search__result-card__header__wrapper">
+              {result.stars && (
+                <div className="rating">
+                  {[...Array(result.stars)].map((_, index) => (
+                    <Icon name="ui-star" key={`rating-star-${index + 1}`} width={14} height={14} />
+                  ))}
+                </div>
+              )}
+              <h3 className="search__result-card__title">{result.title}</h3>
+            </div>
+          </div>
+          <a className="search__result-card__location">
+            <Icon name="ui-location" height={16} />
+            {result.location}
+            {/*  - Show on map &gt; 1.1 km from Center */}
+          </a>
+          <div className="search__result-card__options">
+            {/* <div className="search__result-card__option">
+              <Icon name="ui-wifi" height={16} />
+              Free Wi-Fi
+            </div> */}
+            {result.accommodation && (
+              <div className="search__result-card__option">
+                <Icon name="ui-bed" height={16} />
+                {result.accommodation}
+              </div>
+            )}
+            {result.regime && (
+              <div className="search__result-card__option">
+                <Icon name="ui-utensils" height={16} />
+                {result.regime}
+              </div>
+            )}
+          </div>
+          <p className="search__result-card__description">{result.description}</p>
+        </div>
+        <div className="search__result-card__footer">
+          <button
+            type="button"
+            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
+            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>
+    </div>
+  );
+};
+
+export default HotelCard;