@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,310 +1,310 @@
-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 {
-  isOpen: boolean;
-  handleSetIsOpen: () => void;
-  isLoading?: boolean;
-}
-
-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 ${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>
-          {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__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>
-                  <p>
-                    <strong>
-                      ({formatPrice(entry?.sellingPrice || 0, entry?.currencyCode || '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__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(firstEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
-                    </p>
-                  </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) && (
-                  <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>
-                        </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">
-                                <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>
-                )}
-
-                {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>
-                  </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">
-                    <p>
-                      {format(new Date(lastEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Itinerary;
+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 {
+  isOpen: boolean;
+  handleSetIsOpen: () => void;
+  isLoading?: boolean;
+}
+
+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 ${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>
+          {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__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>
+                  <p>
+                    <strong>
+                      ({formatPrice(entry?.sellingPrice || 0, entry?.currencyCode || '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__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(firstEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
+                    </p>
+                  </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) && (
+                  <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>
+                        </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">
+                                <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>
+                )}
+
+                {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>
+                  </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">
+                    <p>
+                      {format(new Date(lastEntryLine?.startDate || ''), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Itinerary;