@qite/tide-booking-component 1.4.97 → 1.4.99

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

@@ -1,309 +1,406 @@
-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 React, { useContext, useMemo } from 'react';
 import { differenceInCalendarDays, format } from 'date-fns';
-import { EntryLineLight } from '@qite/tide-client';
+import { first, groupBy, isEmpty, last } from 'lodash';
+import { PackagingEntryLine, PackagingEntryLineFlightLine } from '@qite/tide-client';
+import Icon from '../icon';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
 
 interface ItineraryProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  onEditAccommodation?: (segments: PackagingEntryLine[]) => void;
 }
 
-const getDepartureTime = (flight?: EntryLineLight): string => {
-  if (isEmpty(flight?.metaDatas)) return '';
-
-  try {
-    const config = first(flight?.metaDatas)?.configuration;
-    if (!config) return '';
+const getFlightLines = (flight?: PackagingEntryLine): PackagingEntryLineFlightLine[] => {
+  return flight?.flightInformation?.flightLines ?? [];
+};
 
-    const parsed = JSON.parse(config);
-    const line = first(parsed?.FlightLines);
+const getDepartureTime = (flight?: PackagingEntryLine): string => {
+  const firstLine = first(getFlightLines(flight));
+  if (!firstLine?.departureTime) return '';
 
-    return (line as any)?.DepartureTime ?? '';
-  } catch {
-    return '';
-  }
+  return firstLine.departureTime.slice(0, 5);
 };
 
-const getArrivalTime = (flight?: EntryLineLight): string => {
-  if (isEmpty(flight?.metaDatas)) return '';
+const getArrivalTime = (flight?: PackagingEntryLine): string => {
+  const lastLine = last(getFlightLines(flight));
+  if (!lastLine?.arrivalTime) return '';
 
-  try {
-    const config = first(flight?.metaDatas)?.configuration;
-    if (!config) return '';
+  return lastLine.arrivalTime.slice(0, 5);
+};
 
-    const parsed = JSON.parse(config);
-    const line = last(parsed?.FlightLines);
+const getDuration = (flight?: PackagingEntryLine): string => {
+  const lines = getFlightLines(flight);
+  if (!lines.length) return '';
 
-    return (line as any)?.ArrivalTime ?? '';
-  } catch {
-    return '';
-  }
-};
+  const totalTicks = lines.reduce((sum, line) => sum + (line.durationInTicks ?? 0), 0) || 0;
 
-const getDuration = (flight?: EntryLineLight): string => {
-  if (isEmpty(flight?.metaDatas)) return '';
+  if (!totalTicks) return '';
 
-  try {
-    const config = first(flight?.metaDatas)?.configuration;
-    if (!config) return '';
+  const seconds = totalTicks / 10_000_000;
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
 
-    const parsed = JSON.parse(config);
-    const ticks = parsed?.DurationInTicks;
+  return `${hours}h ${minutes.toString().padStart(2, '0')}m`;
+};
 
-    if (!ticks) return '';
+const numberOfNights = (segment: PackagingEntryLine) => {
+  return differenceInCalendarDays(new Date(segment.to), new Date(segment.from));
+};
 
-    const seconds = ticks / 10_000_000;
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
+const getSegmentIcon = (segment: PackagingEntryLine) => {
+  switch (segment.serviceType) {
+    case 3:
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-bed" width={15} height={15} />
+        </div>
+      );
+    case 4:
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-ticket" width={15} height={15} />
+        </div>
+      );
+    case 11:
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-ship" width={15} height={15} />
+        </div>
+      );
+    case 13:
+    case 17:
+    case 22:
+      return (
+        <div className="search__filter__itinerary__transport-badge">
+          <Icon name="ui-car" width={15} height={15} />
+        </div>
+      );
+    default:
+      return (
+        <div className="search__filter__itinerary__segment-badge">
+          <Icon name="ui-location" width={15} height={15} />
+        </div>
+      );
+  }
+};
 
-    return `${hours}h ${minutes.toString().padStart(2, '0')}m`;
-  } catch {
-    return '';
+const canEdit = (segment: PackagingEntryLine) => {
+  if (segment.serviceType === ACCOMMODATION_SERVICE_TYPE) {
+    return true;
   }
+  return false;
 };
 
-const numberOfNights = (segment: EntryLineLight) => {
-  return differenceInCalendarDays(new Date(segment.endDate), new Date(segment.startDate));
+const getSegmentTitle = (segment: PackagingEntryLine) => {
+  return segment.productName ?? segment.accommodationName;
 };
 
-const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
+const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const { editablePackagingEntry } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
+
+  const sortedLines = useMemo(() => {
+    return [...(packagingEntry?.lines ?? [])].sort((a, b) => {
+      const orderA = a.order ?? Infinity;
+      const orderB = b.order ?? Infinity;
 
-  const { entry } = useSelector((state: SearchResultsRootState) => state.searchResults);
+      // First sort by order
+      if (orderA !== orderB) {
+        return orderA - orderB;
+      }
 
-  if (isLoading || !entry) {
+      // Fallback to date
+      return new Date(a.from).getTime() - new Date(b.from).getTime();
+    });
+  }, [packagingEntry]);
+
+  if (!packagingEntry) {
     return null;
   }
 
-  const firstEntryLine = first(entry?.items);
-  const lastEntryLine = last(entry?.items);
+  const firstEntryLine = first(sortedLines);
+  const lastEntryLine = last(sortedLines);
+
+  const accommodationLine = sortedLines.find((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE) ?? firstEntryLine;
+
+  const country = accommodationLine?.country?.name ?? firstEntryLine?.country?.name;
+  const location = accommodationLine?.location?.name ?? accommodationLine?.oord?.name ?? accommodationLine?.region?.name ?? firstEntryLine?.location?.name;
 
-  const country = firstEntryLine?.countryName;
-  const location = firstEntryLine?.locationName;
+  const flightSegments = sortedLines.filter((item) => item.serviceType === FLIGHT_SERVICE_TYPE);
+  const outboundFlight = first(flightSegments);
+  const returnFlight = flightSegments.length > 1 ? last(flightSegments) : undefined;
 
-  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);
+  const otherSegments = sortedLines.filter((item) => item.serviceType !== FLIGHT_SERVICE_TYPE);
+  const grouped = groupBy(otherSegments, (segment) => {
+    return `${segment.productCode}-${segment.from}-${segment.to}`;
+  });
+  const groupedOtherSegments = Object.entries(grouped).map(([key, segments]) => ({
+    key,
+    segments
+  }));
+  console.log('otherSegments', otherSegments);
+  console.log('groupedOtherSegments', groupedOtherSegments);
+
+  const numberOfPax = packagingEntry.pax?.length || 1;
+  const totalPrice = packagingEntry.price || 0;
+  const pricePerPerson = totalPrice / numberOfPax;
 
   return (
-    <>
-      {/* ---------------- Filters ---------------- */}
-
-      {/* ---------------- Filters desktop ---------------- */}
-      <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">{translations.SRP.ITINERARY_TITLE}</p>
-            </div>
+    <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">{translations.SRP.ITINERARY_TITLE}</p>
           </div>
-          {isLoading ? (
-            <Spinner />
-          ) : (
-            <>
-              <div className="search__filter-group">
-                {context?.destinationImage && (
-                  <div className="search__filter__image__wrapper">
-                    <img src={context.destinationImage.url} alt={context.destinationImage.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-group">
+            {context?.destinationImage && (
+              <div className="search__filter__image__wrapper">
+                <img src={context.destinationImage.url} alt={context.destinationImage.alt} className="search__filter__image" />
+
+                {packagingEntry?.dossierNumber && (
+                  <span className="search__filter__image__text">
+                    {translations.SRP.DOSSIER_NUMBER}: {packagingEntry.dossierNumber}
+                  </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">{formatPrice(pricePerPerson, 'EUR')}</h3>
+              <p>{translations.SRP.PACKAGE_PRICE_PER_PERSON}</p>
+              <p>
+                <strong>
+                  ({formatPrice(totalPrice, 'EUR')} {translations.SRP.TOTAL})
+                </strong>
+              </p>
+            </div>
+            <button className="cta">{translations.QSM.CONFIRM}</button>
+          </div>
+
+          <div className="search__filter__itinerary">
+            <p>{translations.SRP.DAY_BY_DAY}</p>
 
-              <div className="search__filter__prices">
-                <div className="search__filter__prices__wrapper">
-                  <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>
+            {firstEntryLine && (
+              <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">
                   <p>
-                    <strong>
-                      ({formatPrice(entry?.sellingPrice || 0, entry?.currencyCode || 'EUR')} {translations.SRP.TOTAL})
-                    </strong>
+                    {format(new Date(firstEntryLine.from), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
                   </p>
                 </div>
-                <button className="cta">{translations.QSM.CONFIRM}</button>
               </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__transport-item">
+                  <div className="search__filter__itinerary__transport-date">
+                    <p className="search__filter__itinerary__transport-date-date">
+                      <strong>{format(new Date(outboundFlight.from), 'd')}</strong>
+                    </p>
+                    <p>{format(new Date(outboundFlight.from), 'MMM')}</p>
+                  </div>
 
-              <div className="search__filter__itinerary">
-                <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 className="search__filter__itinerary__transport-badge">
+                    <Icon name="ui-plane" height={15} />
                   </div>
-                  <div className="search__filter__itinerary__country-content">
-                    <p>
-                      {format(new Date(firstEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
+
+                  <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>
+            )}
 
-                {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__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>
-                )}
-                {!isEmpty(otherSegments) && (
+            {!isEmpty(groupedOtherSegments) &&
+              groupedOtherSegments.map((group) => {
+                const firstSegment = first(group.segments);
+                if (!firstSegment) return null;
+
+                return (
                   <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">
-                          <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 className="search__filter__itinerary__segments__wrapper" key={group.key}>
+                      <div className="search__filter__itinerary__segments-timeline">
+                        <div className="search__filter__itinerary__segments-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__transport-date">
+                            <p className="search__filter__itinerary__transport-date-date">
+                              <strong>{format(new Date(firstSegment.from), 'd')}</strong>
+                            </p>
+                            <p>{format(new Date(firstSegment.from), '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>
+                              {firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name}
+                              {(firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name) && firstSegment.country?.name ? ', ' : ''}
+                              {firstSegment.country?.name}
+                            </h6>
+                            <p className="search__filter__itinerary__segment-details-text">
+                              {format(new Date(firstSegment.from), 'EEE. d MMM yyyy')}
+                              &gt; {format(new Date(firstSegment.to), 'EEE. d MMM yyyy')}
+                            </p>
                           </div>
                         </div>
-                        <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">
+                      </div>
+
+                      <div className="search__filter__itinerary__segment">
+                        <div
+                          className={`search__filter__itinerary__segment-item ${
+                            canEdit(firstSegment) ? 'search__filter__itinerary__segment-item--editable' : ''
+                          }`}
+                          onClick={() => {
+                            if (canEdit(firstSegment) && onEditAccommodation) {
+                              onEditAccommodation(group.segments);
+                            }
+                          }}>
+                          <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
+                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE && (
+                              <>
                                 <p className="search__filter__itinerary__segment-date-date">
-                                  <strong>{numberOfNights(segment)}</strong>
+                                  <strong>{numberOfNights(firstSegment)}</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>
+
+                          {getSegmentIcon(firstSegment)}
+
+                          <div className="search__filter__itinerary__segment-details">
+                            <h6>{getSegmentTitle(firstSegment)}</h6>
+                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE &&
+                              group.segments.map((segment, index) => (
+                                <React.Fragment key={segment.guid}>
+                                  <strong>
+                                    {translations.SHARED.ROOM}&nbsp;{index + 1}
+                                  </strong>
+                                  {segment.productName && segment.accommodationName && (
+                                    <div className="search__filter__itinerary__segment-details__room">
+                                      <Icon name="ui-bed" width={12} height={12} />
+                                      {segment.accommodationName}
+                                    </div>
+                                  )}
+                                  {segment.regimeName && (
+                                    <div className="search__filter__itinerary__segment-details__room">
+                                      <Icon name="ui-utensils" width={12} height={12} />
+                                      {segment.regimeName}
+                                    </div>
+                                  )}
+                                </React.Fragment>
+                              ))}
                           </div>
                         </div>
                       </div>
-                    ))}
+                    </div>
                   </div>
-                )}
+                );
+              })}
 
-                {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-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>
+            {returnFlight && returnFlight !== 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__transport-item">
+                  <div className="search__filter__itinerary__transport-date">
+                    <p className="search__filter__itinerary__transport-date-date">
+                      <strong>{format(new Date(returnFlight.from), 'd')}</strong>
+                    </p>
+                    <p>{format(new Date(returnFlight.from), 'MMM')}</p>
                   </div>
-                )}
 
-                <div className="search__filter__itinerary__country">
-                  <div className="search__filter__itinerary__country-icon">
-                    <Icon name="ui-flag" width={17.5} height={20} />
+                  <div className="search__filter__itinerary__transport-badge">
+                    <Icon name="ui-plane" height={15} />
                   </div>
-                  <div className="search__filter__itinerary__country-content">
-                    <p>
-                      {format(new Date(lastEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
+
+                  <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>
+            )}
+
+            {lastEntryLine && (
+              <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">
+                  <p>
+                    {format(new Date(lastEntryLine.to), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </>
       </div>
-    </>
+    </div>
   );
 };