@qite/tide-booking-component 1.4.82 → 1.4.83

package/build/build-esm/src/search-results/components/item-picker/index.d.ts

@@ -4,7 +4,7 @@ import { TravelClass, TravelType } from '../../../shared/types';
 interface ItemPickerProps {
   items: TravelType[] | TravelClass[] | SortByType[] | SortingOption[];
   selection: string | undefined;
-  selectedSortByType?: SortByType;
+  selectedSortByType?: SortByType | null;
   label: string;
   placeholder: string;
   classModifier: string;

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -1,4 +1,4 @@
-import { ExtendedFlightSearchResponseItem, Filter } from '../types';
+import { ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
 import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
@@ -13,7 +13,7 @@ export interface SearchResultsState {
   entry: EntryLight | null;
   isLoading: boolean;
   filters: Filter[];
-  sortKey: string | null;
+  selectedSortType: SortByType | null;
   activeTab: string | null;
   currentPage: number;
   flyInIsOpen: boolean;
@@ -54,7 +54,7 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   setIsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setIsLoading'>,
   setFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setFilters'>,
   resetFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/resetFilters'>,
-  setSortKey: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSortKey'>,
+  setSortType: import('@reduxjs/toolkit').ActionCreatorWithPayload<SortByType | null, 'searchResults/setSortType'>,
   setActiveTab: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setActiveTab'>,
   setCurrentPage: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentPage'>,
   resetSearchState: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<'searchResults/resetSearchState'>,

package/build/build-esm/src/search-results/utils/flight-utils.d.ts

@@ -1,5 +1,5 @@
 import { FlightSearchResponseFlight, FlightSearchResponseFlightSegment } from '@qite/tide-client';
-import { ExtendedFlightSearchResponseItem, SortByType } from '../types';
+import { ExtendedFlightSearchResponseItem } from '../types';
 import { DepartureRange } from '../../shared/types';
 export declare const getOutwardFlight: (flightResult: ExtendedFlightSearchResponseItem) => FlightSearchResponseFlight | undefined;
 export declare const getFlightSegments: (flight: FlightSearchResponseFlight | undefined) => FlightSearchResponseFlightSegment[];
@@ -13,4 +13,3 @@ export declare const getNumberOfStopsLabel: (
   stopLabel: string
 ) => string;
 export declare const getDepartureRangeName: (translations: any, range: DepartureRange | undefined) => string;
-export declare const getSortingName: (translations: any, sortByType: SortByType) => string;

package/build/build-esm/src/search-results/utils/search-results-utils.d.ts

@@ -1,10 +1,14 @@
 import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client';
-import { Filter, TideTag } from '../types';
+import { Filter, SortByType, TideTag } from '../types';
 export declare const enrichFiltersWithResults: (results: BookingPackageItem[], filters: Filter[] | undefined, tags: TideTag[]) => Filter[];
 export declare const enrichFiltersWithPackageAccoResults: (
   results: PackagingAccommodationResponse[],
   filters: Filter[] | undefined,
   tags: TideTag[]
 ) => Filter[];
-export declare const applyFilters: (results: BookingPackageItem[], filters: Filter[]) => BookingPackageItem[];
-export declare const applyFiltersToPackageAccoResults: (results: PackagingAccommodationResponse[], filters: Filter[]) => PackagingAccommodationResponse[];
+export declare const applyFilters: (results: BookingPackageItem[], filters: Filter[], sortBy: SortByType | null) => BookingPackageItem[];
+export declare const applyFiltersToPackageAccoResults: (
+  results: PackagingAccommodationResponse[],
+  filters: Filter[],
+  sortBy: SortByType | null
+) => PackagingAccommodationResponse[];

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -3,6 +3,7 @@ export declare const defaultLanguage = 'nl-BE';
 export declare const formatPrice: (price: number, currencyCode: string, locale?: string) => string;
 import { DateStruct } from '@qite/tide-client';
 import { DepartureRange } from '../types';
+import { SortByType } from '../../search-results/types';
 export declare const getTranslations: (language: string) => {
   STEPS: {
     PERSONAL_DETAILS: string;
@@ -172,6 +173,8 @@ export declare const getTranslations: (language: string) => {
       BELGIUM: string;
       NETHERLANDS: string;
       FRANCE: string;
+      DENMARK: string;
+      ITALY: string;
     };
     CHOOSE_AGENT_PLACEHOLDER: string;
     VALIDATION: {
@@ -414,3 +417,5 @@ export declare const minutesToHoursString: (totalMinutes: number) => string;
 export declare const rangeFromDateTimeInMinutes: (dateTime: Date | undefined) => DepartureRange;
 export declare const calculateNights: (fromDate: Date, toDate: Date) => number;
 export declare const calculateDays: (fromDate: Date, toDate: Date) => number;
+export declare const getSortingName: (translations: any, sortByType: SortByType) => string;
+export declare const findSortByType: (sortByTypes: SortByType[], sortKey: string, direction: string) => SortByType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.82",
+  "version": "1.4.83",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -35,6 +35,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.2",
     "@types/flat": "^5.0.2",
+    "@types/he": "^1.2.3",
     "@types/lodash": "^4.14.171",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -72,6 +73,7 @@
     "uuid": "^11.1.0"
   },
   "dependencies": {
+    "he": "^1.2.0",
     "jwt-decode": "^4.0.0",
     "react-html-comment": "^2.0.16",
     "react-router-dom": "^6.30.3",

package/src/booking-wizard/features/confirmation/confirmation.tsx

@@ -17,7 +17,7 @@ interface ConfirmationProps {}
 const Confirmation: React.FC<ConfirmationProps> = () => {
   const dispatch = useAppDispatch();
   const settings = useContext(SettingsContext);
-  const navigate = useNavigate();
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
 
   const bookingNumber = useSelector(selectBookingNumber);
   const bookingQueryString = useSelector(selectBookingQueryString);

package/src/booking-wizard/features/error/error.tsx

@@ -12,9 +12,10 @@ interface ErrorProps {}
 
 const Error: React.FC<ErrorProps> = () => {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
 
   const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
   const bookingQueryString = useSelector(selectBookingQueryString);
 
   const tryAgainUrl = `${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`;

package/src/booking-wizard/features/flight-options/index.tsx

@@ -28,7 +28,7 @@ interface FlightOptionsFormProps {}
 
 const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
   const settings = useContext(SettingsContext);
-  const navigate = useNavigate();
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
 
   const translations = useSelector(selectTranslations);
   const dispatch = useAppDispatch();

package/src/booking-wizard/features/product-options/options-form.tsx

@@ -63,7 +63,7 @@ interface OptionsFormProps {}
 
 const OptionsForm: React.FC<OptionsFormProps> = () => {
   const settings = useContext(SettingsContext);
-  const navigate = useNavigate();
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
   const { token } = settings;
   const translations = useSelector(selectTranslations);
   const dispatch = useAppDispatch();
@@ -83,7 +83,7 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
   // ROOMS
-  const showRoomOptions = settings.options.showRoomOptions ?? settings.roomOptions.isHidden;
+  const showRoomOptions = settings?.options?.showRoomOptions ?? settings.roomOptions.isHidden;
   const packageRooms = useSelector(selectPackageRooms);
   const pax = useSelector(selectBookingPackagePax);
 

package/src/booking-wizard/features/room-options/index.tsx

@@ -24,7 +24,7 @@ interface RoomOptionsFormProps {}
 
 const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
   const settings = useContext(SettingsContext);
-  const navigate = useNavigate();
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
 
   const translations = useSelector(selectTranslations);
   const dispatch = useAppDispatch();

package/src/booking-wizard/features/summary/summary.tsx

@@ -47,9 +47,9 @@ interface SummaryProps {}
 
 const Summary: React.FC<SummaryProps> = () => {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
 
   const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [checkboxes, setCheckboxes] = useState<SummaryCheckbox[] | undefined | null>(settings.summary?.checkboxes);

package/src/booking-wizard/features/travelers-form/travelers-form.tsx

@@ -93,8 +93,8 @@ function createInitialValues(
 
 const TravelersForm: React.FC<TravelersFormProps> = () => {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
   const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
   const bookingQueryString = useSelector(selectBookingQueryString);
   const startDate = useSelector(selectStartDate);
   const formRooms = useSelector(selectFormRooms);

package/src/search-results/components/group-tour/group-tour-results.tsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import Spinner from '../spinner/spinner';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { getTranslations } from '../../../shared/utils/localization-util';
 import { SearchResultsRootState } from '../../store/search-results-store';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import GroupTourCard from './group-tour-card';
+import { setActiveTab } from '../../store/search-results-slice';
 
 interface GroupTourResultsProps {
   isLoading: boolean;
@@ -23,13 +24,20 @@ const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
 
   const translations = getTranslations(context.languageCode ?? 'en-GB');
   const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const dispatch = useDispatch();
 
   if (isEmpty(filteredResults)) {
     return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
   }
 
+  useEffect(() => {
+    if (activeTab === 'compact') {
+      dispatch(setActiveTab('list'));
+    }
+  }, [activeTab]);
+
   return (
-    <div className="search__results__cards search__results__cards--list">
+    <div className={`search__results__cards search__results__cards--${activeTab}`}>
       {filteredResults.map((result, index) => (
         <GroupTourCard key={index} result={result} />
       ))}

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

@@ -4,7 +4,7 @@ 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 } from '@qite/tide-client/build/types';
+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';
@@ -14,82 +14,145 @@ interface HotelAccommodationResultsProps {
   isLoading: boolean;
 }
 
-const renderResults = (
-  results: PackagingAccommodationResponse[],
-  context: SearchResultsConfiguration,
-  cmsMap: Map<any, any>,
-  activeTab: string | null,
-  translations: any
-) => {
+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 cmsItem = cmsMap.get(result.code);
-    const mappedResult: HotelResult = mapSearchResult(result, cmsItem, context.languageCode, translations);
+    const key = `${result.id ?? result.code}-${index}`;
+
     if (context?.showCustomCards && context?.customCardRenderer) {
       return (
-        <div key={`${mappedResult.id}-${index}`} className="search__result-card">
-          {context.customCardRenderer(mappedResult)}
+        <div key={key} className="search__result-card">
+          {context.customCardRenderer(result)}
         </div>
       );
     }
-    return <HotelCard key={`${mappedResult.id}-${index}`} result={mappedResult} translations={translations} />;
+
+    return <HotelCard key={key} result={result} translations={translations} />;
   });
 
   return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
 };
 
-const mapSearchResult = (searchResult: PackagingAccommodationResponse, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
-  return {
-    type: 'hotel',
-    code: searchResult.code,
-    title: cmsItem?.content?.general?.title || searchResult.name,
-    image: cmsItem?.content?.images?.thumbnailPicture?.url,
-    description: cmsItem?.content?.descriptions?.introductionTitle || '',
-    location:
-      searchResult.locationName || searchResult.regionName
-        ? `${searchResult.locationName || searchResult.regionName}${searchResult.countryName && `, ${searchResult.countryName}`}`
-        : cmsItem?.parentItem?.name || '',
-    price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
-    ctaText: translations?.SRP.VIEW_DETAILS,
-    days: `${calculateNights(new Date(searchResult.fromDate), new Date(searchResult.toDate))} ${translations?.SRP.NIGHTS}`,
-    accommodation: first(searchResult.rooms)?.options?.find((x) => x.isSelected)?.accommodationName || '',
-    regime: first(searchResult.rooms)?.options?.find((x) => x.isSelected)?.regimeName || '',
-    stars: cmsItem?.content?.general?.stars,
-    contents: searchResult.contents
-  };
-};
-
 const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading }) => {
   const context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return;
-  }
 
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  if (isLoading) {
-    return <>{context?.customSpinner ?? <Spinner />}</>;
+  if (!context) {
+    return null;
   }
 
-  const { filteredPackagingAccoResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
 
-  if (!filteredPackagingAccoResults.length) {
-    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
-  }
+  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);
+      if (code) {
+        map.set(code, item);
+      }
     });
+
     return map;
   }, [context.cmsHotelData]);
 
-  const firstResult = filteredPackagingAccoResults?.[0];
+  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));
+    }
 
-  const firstResultDay = firstResult?.fromDate ? format(parseISO(firstResult.fromDate), 'd') : null;
+    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));
+    }
 
-  const firstResultMonth = firstResult?.fromDate ? format(parseISO(firstResult.fromDate), 'MMM') : null;
+    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 (
     <>
@@ -104,90 +167,10 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
           </h3>
         </div>
       </div>
-      {renderResults(filteredPackagingAccoResults, context, cmsMap, activeTab, translations)}
+
+      {renderHotelResults(mappedResults, context, activeTab, translations)}
     </>
   );
 };
 
 export default HotelAccommodationResults;
-
-// const showMocukups = (context: any) => {
-//   const mockedHotelResults = [
-//     {
-//       type: 'hotel',
-//       id: 2,
-//       title: 'HTFSWILLCARL',
-//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-//       description: '2 persoons kamer',
-//       location: 'Tenerif, Spanje',
-//       price: '$2244',
-//       ctaText: 'Bekijk details',
-//       days: '7 nights',
-//       flightInfo: null,
-//       accommodation: 'Hotel XYZ',
-//       regime: 'All-inclusive',
-//       stars: 5
-//     } as HotelResult,
-//     {
-//       type: 'hotel',
-//       id: 3,
-//       title: 'HTFSSOFTROCK',
-//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-//       description: '3 persoons kamer',
-//       location: 'Tenerif, Spanje',
-//       price: '$2244',
-//       ctaText: 'Bekijk details',
-//       days: '7 nights',
-//       flightInfo: null,
-//       accommodation: 'Hotel ABC',
-//       regime: 'Half-board',
-//       stars: 4
-//     } as HotelResult,
-//     {
-//       type: 'hotel',
-//       id: 4,
-//       title: 'HTFSROYGAR',
-//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-//       description: '4 persoons kamer',
-//       location: 'Tenerif, Spanje',
-//       price: '$2496',
-//       ctaText: 'Bekijk details',
-//       days: '7 nights',
-//       flightInfo: null,
-//       accommodation: 'Hotel DEF',
-//       regime: 'Full-board',
-//       stars: 5
-//     } as HotelResult,
-//     {
-//       type: 'hotel',
-//       id: 5,
-//       title: 'HTFSCONBEL',
-//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-//       description: '5 persoons kamer',
-//       location: 'Tenerif, Spanje',
-//       price: '$6784.8',
-//       ctaText: 'Bekijk details',
-//       days: '7 nights',
-//       flightInfo: null,
-//       accommodation: 'Hotel GHI',
-//       regime: 'All-inclusive',
-//       stars: 5
-//     } as HotelResult
-//   ] as HotelResult[];
-//   return <>{renderMockupResults(mockedHotelResults, context)}</>;
-// };
-
-// const renderMockupResults = (results: any[], context: any) => {
-//   const renderedResults = results.map((result, index) => {
-//     if (context?.showCustomCards && context?.customCardRenderer) {
-//       return (
-//         <div key={`${result.id}-${index}`} className="search__result-card">
-//           {context.customCardRenderer(result)}
-//         </div>
-//       );
-//     }
-//     return <HotelCard key={`${result.id}-${index}`} result={result} />;
-//   });
-
-//   return <div className="search__results__cards">{renderedResults}</div>;
-// };

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

@@ -4,6 +4,7 @@ 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;
@@ -27,7 +28,7 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
         onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
         <div
           dangerouslySetInnerHTML={{
-            __html: result.contents
+            __html: he.decode(result.contents)
           }}></div>
         <div className="search__result-card__footer">
           <button

package/src/search-results/components/item-picker/index.tsx

@@ -5,7 +5,7 @@ import { TravelClass, TravelType } from '../../../shared/types';
 interface ItemPickerProps {
   items: TravelType[] | TravelClass[] | SortByType[] | SortingOption[];
   selection: string | undefined;
-  selectedSortByType?: SortByType;
+  selectedSortByType?: SortByType | null;
   label: string;
   placeholder: string;
   classModifier: string;

package/src/search-results/components/round-trip/round-trip-results.tsx

@@ -1,13 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Icon from '../icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { setActiveTab } from '../../store/search-results-slice';
 
 interface RoundTripResultsProps {}
 
-// search__results__cards--list
-
 const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
+  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (activeTab === 'compact') {
+      dispatch(setActiveTab('list'));
+    }
+  }, [activeTab]);
+
   return (
-    <div className="search__results__cards search__results__cards--list">
+    <div className={`search__results__cards search__results__cards--${activeTab}`}>
       <div className="search__result-card">
         <div className="search__result-card__allotment">
           <div className="search__result-card__allotment__img-wrapper">

package/src/search-results/components/search-results-container/flight-search-results.tsx

@@ -4,12 +4,11 @@ import SearchResultsConfigurationContext from '../../search-results-configuratio
 import ItemPicker from '../item-picker';
 
 import Icon from '../icon';
-import { getTranslations } from '../../../shared/utils/localization-util';
+import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
 import FlightSelection from '../flight/flight-selection/index';
 import { useFlightSearch } from '../flight/flight-search-context';
 import FlightFilters from '../filters/flight-filters';
 import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
-import { getSortingName } from '../../utils/flight-utils';
 import Spinner from '../spinner/spinner';
 import { PortalQsmType } from '@qite/tide-client';
 
@@ -33,12 +32,8 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
   const [results, setResults] = React.useState<ExtendedFlightSearchResponseItem[]>([]);
   const [flightSelectionType, setFlightSelectionType] = useState<FlightSelectionMode>('independent');
 
-  const findSortByType = (sortKey: string, direction: string) => {
-    return sortByTypes.find((s) => s.label === sortKey && s.direction === direction) || sortByTypes[0];
-  };
-
   const handleSortChange = (sortKey: string, direction?: string) => {
-    setSelectedSortByType(findSortByType(sortKey, direction ?? 'asc'));
+    setSelectedSortByType(findSortByType(sortByTypes, sortKey, direction ?? 'asc'));
   };
 
   useEffect(() => {
@@ -77,7 +72,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
                   label={translations.SRP.SORTBY}
                   placeholder={translations.SRP.SORTBY}
                   classModifier="travel-class-picker__items"
-                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
                   onPick={handleSortChange}
                 />
               )}
@@ -118,7 +113,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
                       label={translations.SRP.SORTBY}
                       placeholder={translations.SRP.SORTBY}
                       classModifier="travel-class-picker__items"
-                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
                       onPick={handleSortChange}
                     />
                   </div>