@qite/tide-booking-component 1.4.34 → 1.4.35

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

@@ -6,16 +6,23 @@ import { useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { BookingPackageItem } from '@qite/tide-client/build/types';
 import { format, parseISO } from 'date-fns';
+import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
 
 interface HotelAccommodationResultsProps {
   isLoading: boolean;
   context: SearchResultsConfiguration;
 }
 
-const renderResults = (results: BookingPackageItem[], context: SearchResultsConfiguration, cmsMap: Map<any, any>, activeTab: string | null) => {
+const renderResults = (
+  results: BookingPackageItem[],
+  context: SearchResultsConfiguration,
+  cmsMap: Map<any, any>,
+  activeTab: string | null,
+  translations: any
+) => {
   const renderedResults = results.map((result, index) => {
     const cmsItem = cmsMap.get(result.productId);
-    const mappedResult: HotelResult = mapSearchResult(result, cmsItem, context.languageCode);
+    const mappedResult: HotelResult = mapSearchResult(result, cmsItem, context.languageCode, translations);
     if (context?.showCustomCards && context?.customCardRenderer) {
       return (
         <div key={`${mappedResult.id}-${index}`} className="search__result-card">
@@ -23,13 +30,13 @@ const renderResults = (results: BookingPackageItem[], context: SearchResultsConf
         </div>
       );
     }
-    return <HotelCard key={`${mappedResult.id}-${index}`} result={mappedResult} />;
+    return <HotelCard key={`${mappedResult.id}-${index}`} result={mappedResult} translations={translations} />;
   });
 
   return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
 };
 
-const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string): HotelResult => {
+const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
   return {
     type: 'hotel',
     id: searchResult.productId,
@@ -38,36 +45,26 @@ const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languag
     description: cmsItem?.content?.descriptions?.introductionTitle || '',
     location:
       searchResult.locationName && searchResult.countryName ? `${searchResult.locationName}, ${searchResult.countryName}` : cmsItem?.parentItem?.name || '',
-    price: formatPrice(searchResult.currencyCode, searchResult.price, languageCode),
-    ctaText: 'View details',
-    days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate),
+    price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
+    ctaText: translations?.SRP.VIEW_DETAILS,
+    days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate, translations),
     accommodation: searchResult.accommodationName,
     regime: searchResult.regimeName,
     stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
   };
 };
 
-const formatPrice = (currencyCode: string, price: number, languageCode?: string) => {
-  if (!price) {
-    return 'Price unavailable';
-  }
-
-  return new Intl.NumberFormat(languageCode ?? 'en-GB', {
-    style: 'currency',
-    currency: currencyCode,
-    currencyDisplay: 'symbol'
-  }).format(price);
-};
-
-const calculateNights = (fromDate: Date, toDate: Date): string => {
+const calculateNights = (fromDate: Date, toDate: Date, translations?: any): string => {
   const from = new Date(fromDate).getTime(); // returns a number
   const to = new Date(toDate).getTime(); // returns a number
   const diffTime = Math.abs(to - from);
   const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-  return `${diffDays} nights`;
+  return `${diffDays} ${translations?.SRP.NIGHTS}`;
 };
 
 const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, context }) => {
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
   if (isLoading) {
     return <>{context?.customSpinner ?? <Spinner />}</>;
   }
@@ -75,7 +72,7 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
   const { results, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   if (!results.length) {
-    return <div className="no-results">{context.noResultsLabel || 'No results found.'}</div>;
+    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
   }
 
   const cmsMap = React.useMemo(() => {
@@ -102,11 +99,11 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
         </div>
         <div className="search__results__label__text">
           <h3>
-            Select <strong>Accommodation</strong>
+            {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
           </h3>
         </div>
       </div>
-      {renderResults(results, context, cmsMap, activeTab)}
+      {renderResults(results, context, cmsMap, activeTab, translations)}
     </>
   );
 };

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

@@ -7,9 +7,10 @@ import { setSelectedHotel } from '../../store/search-results-slice';
 
 interface HotelCardProps {
   result: HotelResult;
+  translations?: any;
 }
 
-const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
+const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
   const dispatch = useDispatch();
   const { selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
@@ -27,7 +28,7 @@ const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
       <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">Total price</span>
+          <span className="search__result-card__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
           <span className="search__result-card__price">{result.price}</span>
         </div>
       </div>
@@ -75,7 +76,7 @@ const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
             {selectedHotelId === result.id ? 'Selected' : 'Select'}
           </button>
           <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
-            View details
+            {translations?.SRP.VIEW_DETAILS}
           </button>
         </div>
       </div>

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

@@ -537,7 +537,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
         </svg>
       );
 
-    case 'ui-comparator':
+    case 'ui-list':
       return (
         <svg
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}

package/src/search-results/components/itinerary/index.tsx

@@ -1,31 +1,112 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Icon from '../icon';
 import Spinner from '../spinner/spinner';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useSelector } from 'react-redux';
+import { first, isEmpty, last } from 'lodash';
+import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { differenceInCalendarDays, format } from 'date-fns';
+import { EntryLineLight } from '@qite/tide-client';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 
 interface ItineraryProps {
-  isMobileFiltersOpen: boolean;
-  handleSetIsMobileFiltersOpen: () => void;
+  isOpen: boolean;
+  handleSetIsOpen: () => void;
   isLoading?: boolean;
 }
 
-const Itinerary: React.FC<ItineraryProps> = ({ isMobileFiltersOpen, handleSetIsMobileFiltersOpen, isLoading }) => {
+const getDepartureTime = (flight?: EntryLineLight): string => {
+  if (isEmpty(flight?.metaDatas)) return '';
+
+  try {
+    const config = first(flight?.metaDatas)?.configuration;
+    if (!config) return '';
+
+    const parsed = JSON.parse(config);
+    const line = first(parsed?.FlightLines);
+
+    return (line as any)?.DepartureTime ?? '';
+  } catch {
+    return '';
+  }
+};
+
+const getArrivalTime = (flight?: EntryLineLight): string => {
+  if (isEmpty(flight?.metaDatas)) return '';
+
+  try {
+    const config = first(flight?.metaDatas)?.configuration;
+    if (!config) return '';
+
+    const parsed = JSON.parse(config);
+    const line = last(parsed?.FlightLines);
+
+    return (line as any)?.ArrivalTime ?? '';
+  } catch {
+    return '';
+  }
+};
+
+const getDuration = (flight?: EntryLineLight): string => {
+  if (isEmpty(flight?.metaDatas)) return '';
+
+  try {
+    const config = first(flight?.metaDatas)?.configuration;
+    if (!config) return '';
+
+    const parsed = JSON.parse(config);
+    const ticks = parsed?.DurationInTicks;
+
+    if (!ticks) return '';
+
+    const seconds = ticks / 10_000_000;
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    return `${hours}h ${minutes.toString().padStart(2, '0')}m`;
+  } catch {
+    return '';
+  }
+};
+
+const numberOfNights = (segment: EntryLineLight) => {
+  return differenceInCalendarDays(new Date(segment.endDate), new Date(segment.startDate));
+};
+
+const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  const { entry } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  if (isLoading || !entry) {
+    return null;
+  }
+
+  const firstEntryLine = first(entry?.items);
+  const lastEntryLine = last(entry?.items);
+
+  const country = firstEntryLine?.countryName;
+  const location = firstEntryLine?.locationName;
+
+  const outboundFlight = entry?.items.find((item) => item.productType === 7 && !item.isReturnFlight);
+  const returnFlight = entry?.items.find((item) => item.productType === 7 && item.isReturnFlight);
+  const otherSegments = entry?.items.filter((item) => item.productType !== 7);
+
   return (
     <>
       {/* ---------------- Filters ---------------- */}
 
       {/* ---------------- Filters desktop ---------------- */}
-      <div className={`search__filters--modal ${isMobileFiltersOpen ? 'is-open' : ''}`}>
-        <div className="search__filters--background" onClick={() => handleSetIsMobileFiltersOpen()}></div>
-        <button className="search__filters--close" onClick={() => handleSetIsMobileFiltersOpen()}>
+      <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
+        <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
+        <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
           <Icon name="ui-close" height={24} />
         </button>
         <div className="search__filters">
           <div className="search__filter-row search__filter__header">
             <div className="search__filter-row-flex-title">
-              <p className="search__filter-small-title">
-                {/*  */}
-                Your trip summary
-              </p>
+              <p className="search__filter-small-title">{translations.SRP.ITINERARY_TITLE}</p>
             </div>
           </div>
           {isLoading ? (
@@ -34,165 +115,184 @@ const Itinerary: React.FC<ItineraryProps> = ({ isMobileFiltersOpen, handleSetIsM
             <>
               <div className="search__filter-group">
                 <div className="search__filter__image__wrapper">
-                  <img
-                    src="https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D"
-                    alt="filter-img"
-                    className="search__filter__image"
-                  />
-                  <span className="search__filter__image__text">Transport + hotel to</span>
-                  <h4 className="search__filter__image__title">Costa del Silencio - Tenerife Sur</h4>
+                  <img src="" alt="" className="search__filter__image" />
+                  {entry?.number && (
+                    <span className="search__filter__image__text">
+                      {translations.SRP.DOSSIER_NUMBER}: {entry?.number}
+                    </span>
+                  )}
+                  <h4 className="search__filter__image__title">{(location || '') + (location && country ? ' - ' : '') + (country || '')}</h4>
                 </div>
               </div>
 
               <div className="search__filter__prices">
                 <div className="search__filter__prices__wrapper">
-                  <h3 className="search__filter__prices--amount">€256</h3>
-                  <p>package price per person</p>
+                  <h3 className="search__filter__prices--amount">
+                    {formatPrice((entry?.sellingPrice || 0) / (entry?.numberOfPax || 1), entry?.currencyCode || 'EUR')}
+                  </h3>
+                  <p>{translations.SRP.PACKAGE_PRICE_PER_PERSON}</p>
                   <p>
-                    <strong>(1.974 € Total)</strong>
+                    <strong>
+                      ({formatPrice(entry?.sellingPrice || 0, entry?.currencyCode || 'EUR')} {translations.SRP.TOTAL})
+                    </strong>
                   </p>
                 </div>
-                <button className="cta">Comfirm</button>
+                <button className="cta">{translations.QSM.CONFIRM}</button>
               </div>
 
               <div className="search__filter__itinerary">
-                <p>Your trip day by day</p>
+                <p>{translations.SRP.DAY_BY_DAY}</p>
                 <div className="search__filter__itinerary__country">
                   <div className="search__filter__itinerary__country-icon">
                     <Icon name="ui-flag" width={17.5} height={20} />
                   </div>
                   <div className="search__filter__itinerary__country-content">
-                    <h4>Brussels, Belgium</h4>
                     <p>
-                      Mon. 19 Jan 2026 - <strong>Start</strong>
+                      {format(new Date(firstEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
                     </p>
                   </div>
                 </div>
 
-                <div className="search__filter__itinerary__transport">
-                  <div className="search__filter__itinerary__transport-timeline">
-                    <div className="search__filter__itinerary__transport-timeline-line"></div>
-                  </div>
-                  <div className="search__filter__itinerary__transport-item">
-                    <div className="search__filter__itinerary__transport-date">
-                      <p className="search__filter__itinerary__transport-date-date">
-                        <strong>19</strong>
-                      </p>
-                      <p>Jan</p>
-                    </div>
-                    <div className="search__filter__itinerary__transport-badge">
-                      <Icon name="ui-plane" height={15} />
-                    </div>
-                    <div className="search__filter__itinerary__transport-details">
-                      <h6>Brussels Airport (BRU) - Tenerife South Airport (TFS)</h6>
-                      <p className="search__filter__itinerary__transport-details-plane">
-                        <span>
-                          <Icon name="ui-plane-depart" height={14} /> <strong>08:00</strong>
-                        </span>{' '}
-                        -{' '}
-                        <span>
-                          <Icon name="ui-plane-arrive" height={14} /> <strong>12:30</strong>
-                        </span>
-                      </p>
-                      <p className="search__filter__itinerary__transport-details-time">
-                        <span>
-                          <Icon name="ui-clock" height={20} /> 4h30m
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="search__filter__itinerary__segments">
-                  <div className="search__filter__itinerary__segments__wrapper">
-                    <div className="search__filter__itinerary__segments-timeline">
-                      <div className="search__filter__itinerary__segments-timeline-line"></div>
+                {outboundFlight && (
+                  <div className="search__filter__itinerary__transport">
+                    <div className="search__filter__itinerary__transport-timeline">
+                      <div className="search__filter__itinerary__transport-timeline-line"></div>
                     </div>
-                    <div className="search__filter__itinerary__segment">
-                      <div className="search__filter__itinerary__segment-item search__filter__itinerary__segment-item--start">
-                        <div className="search__filter__itinerary__segment-date">
-                          <p className="search__filter__itinerary__segment-date-date">
-                            <strong>19</strong>
-                          </p>
-                          <p>Jan</p>
-                        </div>
-                        <div className="search__filter__itinerary__segment-badge">
-                          <Icon name="ui-location" width={15} height={15} />
-                        </div>
-                        <div className="search__filter__itinerary__segment-details">
-                          <h6>Costa del Silencio - Tenerife Sur</h6>
-                          <p className="search__filter__itinerary__segment-details-text">Mon. 19 Jan 2026 &gt; Sat. 31 Jan 2026</p>
-                        </div>
+                    <div className="search__filter__itinerary__transport-item">
+                      <div className="search__filter__itinerary__transport-date">
+                        <p className="search__filter__itinerary__transport-date-date">
+                          <strong>{format(new Date(outboundFlight?.startDate || ''), 'd')}</strong>
+                        </p>
+                        <p>{format(new Date(outboundFlight?.startDate || ''), 'MMM')}</p>
+                      </div>
+                      <div className="search__filter__itinerary__transport-badge">
+                        <Icon name="ui-plane" height={15} />
+                      </div>
+                      <div className="search__filter__itinerary__transport-details">
+                        <h6>{outboundFlight.productName}</h6>
+                        <p className="search__filter__itinerary__transport-details-plane">
+                          <span>
+                            <Icon name="ui-plane-depart" height={14} /> <strong>{getDepartureTime(outboundFlight)}</strong>
+                          </span>{' '}
+                          -{' '}
+                          <span>
+                            <Icon name="ui-plane-arrive" height={14} /> <strong>{getArrivalTime(outboundFlight)}</strong>
+                          </span>
+                        </p>
+                        <p className="search__filter__itinerary__transport-details-time">
+                          <span>
+                            <Icon name="ui-clock" height={20} /> {getDuration(outboundFlight)}
+                          </span>
+                        </p>
                       </div>
                     </div>
-                    <div className="search__filter__itinerary__segment">
-                      <div className="search__filter__itinerary__segment-item">
-                        <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
-                          <p className="search__filter__itinerary__segment-date-date">
-                            <strong>12</strong>
-                          </p>
-                          <Icon name="ui-moon" width={16} height={16} />
+                  </div>
+                )}
+                {!isEmpty(otherSegments) && (
+                  <div className="search__filter__itinerary__segments">
+                    {otherSegments?.map((segment, index) => (
+                      <div className="search__filter__itinerary__segments__wrapper" key={`segment-${index}`}>
+                        <div className="search__filter__itinerary__segments-timeline">
+                          <div className="search__filter__itinerary__segments-timeline-line"></div>
                         </div>
-                        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
-                          <Icon name="ui-bed" width={15} height={15} />
+                        <div className="search__filter__itinerary__segment">
+                          <div className="search__filter__itinerary__segment-item search__filter__itinerary__segment-item--start">
+                            <div className="search__filter__itinerary__transport-date">
+                              <p className="search__filter__itinerary__transport-date-date">
+                                <strong>{format(new Date(segment?.startDate || ''), 'd')}</strong>
+                              </p>
+                              <p>{format(new Date(segment?.startDate || ''), 'MMM')}</p>
+                            </div>
+                            <div className="search__filter__itinerary__segment-badge">
+                              <Icon name="ui-location" width={15} height={15} />
+                            </div>
+                            <div className="search__filter__itinerary__segment-details">
+                              <h6>
+                                {segment?.locationName}, {segment?.countryName}
+                              </h6>
+                              <p className="search__filter__itinerary__segment-details-text">
+                                {format(new Date(segment?.startDate || ''), 'EEE. d MMM yyyy')}
+                                &gt; {format(new Date(segment?.endDate || ''), 'EEE. d MMM yyyy')}
+                              </p>
+                            </div>
+                          </div>
                         </div>
-                        <div className="search__filter__itinerary__segment-details">
-                          <h6>Grand Muthu Golf Plaza Hotel</h6>
-                          <div className="rating">
-                            <Icon name="ui-star" key={`rating-star-1`} width={14} height={14} />
-                            <Icon name="ui-star" key={`rating-star-2`} width={14} height={14} />
-                            <Icon name="ui-star" key={`rating-star-3`} width={14} height={14} />
-                            <Icon name="ui-star" key={`rating-star-4`} width={14} height={14} />
-                            <Icon name="ui-star" key={`rating-star-5`} width={14} height={14} />
+                        <div className="search__filter__itinerary__segment">
+                          <div className="search__filter__itinerary__segment-item">
+                            {segment.productType === 3 && (
+                              <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
+                                <p className="search__filter__itinerary__segment-date-date">
+                                  <strong>{numberOfNights(segment)}</strong>
+                                </p>
+                                <Icon name="ui-moon" width={16} height={16} />
+                              </div>
+                            )}
+                            <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+                              {segment.productType === 3 && <Icon name="ui-bed" width={15} height={15} />}
+                              {segment.productType === 4 && <Icon name="ui-ticket" width={15} height={15} />}
+                              {(segment.productType === 17 || segment.productType === 22) && <Icon name="ui-car" width={15} height={15} />}
+                              {segment.productType === 11 && <Icon name="ui-ship" width={15} height={15} />}
+                            </div>
+                            <div className="search__filter__itinerary__segment-details">
+                              <h6>{segment?.productName}</h6>
+                              {/* <div className="rating">
+                                <Icon name="ui-star" key={`rating-star-1`} width={14} height={14} />
+                                <Icon name="ui-star" key={`rating-star-2`} width={14} height={14} />
+                                <Icon name="ui-star" key={`rating-star-3`} width={14} height={14} />
+                                <Icon name="ui-star" key={`rating-star-4`} width={14} height={14} />
+                                <Icon name="ui-star" key={`rating-star-5`} width={14} height={14} />
+                              </div> */}
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
+                    ))}
                   </div>
-                </div>
+                )}
 
-                <div className="search__filter__itinerary__transport">
-                  <div className="search__filter__itinerary__transport-timeline">
-                    <div className="search__filter__itinerary__transport-timeline-line"></div>
-                  </div>
-                  <div className="search__filter__itinerary__transport-item">
-                    <div className="search__filter__itinerary__transport-date">
-                      <p className="search__filter__itinerary__transport-date-date">
-                        <strong>30</strong>
-                      </p>
-                      <p>Jan</p>
+                {returnFlight && (
+                  <div className="search__filter__itinerary__transport">
+                    <div className="search__filter__itinerary__transport-timeline">
+                      <div className="search__filter__itinerary__transport-timeline-line"></div>
                     </div>
-                    <div className="search__filter__itinerary__transport-badge">
-                      <Icon name="ui-plane" height={15} />
-                    </div>
-                    <div className="search__filter__itinerary__transport-details">
-                      <h6>Tenerife South Airport (TFS) - Brussels Airport (BRU)</h6>
-                      <p className="search__filter__itinerary__transport-details-plane">
-                        <span>
-                          <Icon name="ui-plane-depart" height={14} /> <strong>12:55</strong>
-                        </span>{' '}
-                        -{' '}
-                        <span>
-                          <Icon name="ui-plane-arrive" height={14} /> <strong>18:25</strong>
-                        </span>
-                      </p>
-                      <p className="search__filter__itinerary__transport-details-time">
-                        <span>
-                          <Icon name="ui-clock" height={20} /> 4h30m
-                        </span>
-                      </p>
+                    <div className="search__filter__itinerary__transport-item">
+                      <div className="search__filter__itinerary__transport-date">
+                        <p className="search__filter__itinerary__transport-date-date">
+                          <strong>{format(new Date(returnFlight?.startDate || ''), 'd')}</strong>
+                        </p>
+                        <p>{format(new Date(returnFlight?.startDate || ''), 'MMM')}</p>
+                      </div>
+                      <div className="search__filter__itinerary__transport-badge">
+                        <Icon name="ui-plane" height={15} />
+                      </div>
+                      <div className="search__filter__itinerary__transport-details">
+                        <h6>{returnFlight?.productName}</h6>
+                        <p className="search__filter__itinerary__transport-details-plane">
+                          <span>
+                            <Icon name="ui-plane-depart" height={14} /> <strong>{getDepartureTime(returnFlight)}</strong>
+                          </span>{' '}
+                          -{' '}
+                          <span>
+                            <Icon name="ui-plane-arrive" height={14} /> <strong>{getArrivalTime(returnFlight)}</strong>
+                          </span>
+                        </p>
+                        <p className="search__filter__itinerary__transport-details-time">
+                          <span>
+                            <Icon name="ui-clock" height={20} /> {getDuration(returnFlight)}
+                          </span>
+                        </p>
+                      </div>
                     </div>
                   </div>
-                </div>
+                )}
 
                 <div className="search__filter__itinerary__country">
                   <div className="search__filter__itinerary__country-icon">
                     <Icon name="ui-flag" width={17.5} height={20} />
                   </div>
                   <div className="search__filter__itinerary__country-content">
-                    <h4>Brussels, Belgium</h4>
                     <p>
-                      Mon. 19 Jan 2026 - <strong>End</strong>
+                      {format(new Date(lastEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
                     </p>
                   </div>
                 </div>

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

@@ -5,7 +5,7 @@ interface RoundTripResultsProps {}
 
 const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
   return (
-    <div className="search__results__cards search__results__cards--comparator">
+    <div className="search__results__cards search__results__cards--list">
       <div className="search__result-card">
         <div className="search__result-card__allotment">
           <div className="search__result-card__allotment__title__wrapper">