@qite/tide-booking-component 1.4.69 → 1.4.71

package/src/shared/components/flyin/flights-flyin.tsx

@@ -0,0 +1,499 @@
+import React, { useContext, useEffect, useState } from 'react';
+import Icon from '../icon';
+import { ExtendedFlightSearchResponseItem } from '../../../search-results/types';
+import { useFlightSearch } from '../../../search-results/components/flight/flight-search-context';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSelectedFlightDetails } from '../../../search-results/store/search-results-slice';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import Spinner from '../../../search-results/components/spinner/spinner';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { durationTicksInHoursString, getTranslations, timeFromDateTime } from '../../utils/localization-util';
+import { getArrivalSegment, getDepartureSegment, getNumberOfStopsLabel } from '../../../search-results/utils/flight-utils';
+import { first, isEmpty } from 'lodash';
+
+type FlightsFlyInProps = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const dispatch = useDispatch();
+  const { flightSearchDetailsLoading, flightDetailsSearchResults, onCancelSearch, numberOfTravellers } = useFlightSearch();
+  const { selectedFlight } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const [flights, setFlights] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [flight, setFlight] = useState<ExtendedFlightSearchResponseItem | undefined>(undefined);
+
+  const [uniqueOutwardFlights, setUniqueOutwardFlights] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [selectedOutwardFareCode, setSelectedOutwardFareCode] = useState<string | null>(null);
+  const [uniqueReturnFlights, setUniqueReturnFlights] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [selectedReturnFareCode, setSelectedReturnFareCode] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (flightDetailsSearchResults.length > 0 && selectedFlight) {
+      const routeFlights = flightDetailsSearchResults.filter((r) => r.flightRouteId === selectedFlight.flightRouteId);
+
+      setFlights(routeFlights);
+      setFlight(first(routeFlights));
+
+      // Deduplicate by outward fareCode
+      const uniqueMap = new Map<string, ExtendedFlightSearchResponseItem>();
+
+      routeFlights.forEach((flight) => {
+        const fareCode = flight.outward.segments?.[0]?.metaData?.fareCode;
+
+        if (fareCode && !uniqueMap.has(fareCode)) {
+          uniqueMap.set(fareCode, flight);
+        }
+      });
+
+      const values = Array.from(uniqueMap.values());
+      setUniqueOutwardFlights(values);
+      const fareCode = first(values)?.outward.segments?.[0]?.metaData?.fareCode;
+      setSelectedOutwardFareCode(fareCode ?? null);
+    }
+  }, [flightDetailsSearchResults, flightSearchDetailsLoading]);
+
+  useEffect(() => {
+    if (!selectedOutwardFareCode) {
+      setUniqueReturnFlights([]);
+      setSelectedReturnFareCode(null);
+      return;
+    }
+
+    // Filter combinations that match selected outward fare
+    const matchingCombinations = flights.filter((flight) => flight.outward.segments?.[0]?.metaData?.fareCode === selectedOutwardFareCode);
+    const returnMap = new Map<string, ExtendedFlightSearchResponseItem>();
+
+    // Deduplicate return flights by return fareCode
+    matchingCombinations.forEach((flight) => {
+      const returnFareCode = flight.return.segments?.[0]?.metaData?.fareCode;
+
+      if (returnFareCode && !returnMap.has(returnFareCode)) {
+        returnMap.set(returnFareCode, flight);
+      }
+    });
+
+    const returns = Array.from(returnMap.values());
+
+    setUniqueReturnFlights(returns);
+
+    // keep current return if still valid based on the selected outward, otherwise select the first available
+    const stillValid = returns.some((r) => r.return.segments?.[0]?.metaData?.fareCode === selectedReturnFareCode);
+
+    if (!stillValid) {
+      const defaultFareCode = returns[0]?.return.segments?.[0]?.metaData?.fareCode ?? null;
+      setSelectedReturnFareCode(defaultFareCode);
+    }
+  }, [selectedOutwardFareCode, flights]);
+
+  const selectedCombinationFlight = React.useMemo(() => {
+    if (!selectedOutwardFareCode || !selectedReturnFareCode) return undefined;
+
+    return flights.find(
+      (flight) =>
+        flight.outward.segments?.[0]?.metaData?.fareCode === selectedOutwardFareCode &&
+        flight.return.segments?.[0]?.metaData?.fareCode === selectedReturnFareCode
+    );
+  }, [flights, selectedOutwardFareCode, selectedReturnFareCode]);
+
+  useEffect(() => {
+    if (!selectedCombinationFlight) return;
+
+    dispatch(setSelectedFlightDetails(selectedCombinationFlight));
+  }, [selectedCombinationFlight, dispatch]);
+
+  const getOutwardPriceDiff = (outwardFareCode: string) => {
+    if (!selectedReturnFareCode || !selectedCombinationFlight) return 0;
+
+    const combo =
+      flights.find(
+        (flight) =>
+          flight.outward.segments?.[0]?.metaData?.fareCode === outwardFareCode && flight.return.segments?.[0]?.metaData?.fareCode === selectedReturnFareCode
+      ) ??
+      // it means that outward flight cannot be paired with the selected return fallback to first combo with that outward fare
+      flights.find((flight) => flight.outward.segments?.[0]?.metaData?.fareCode === outwardFareCode);
+
+    if (!combo) return 0;
+
+    return Math.round(combo.price - selectedCombinationFlight.price);
+  };
+
+  const getReturnPriceDiff = (returnFareCode: string) => {
+    if (!selectedOutwardFareCode || !selectedCombinationFlight) return 0;
+
+    const combo =
+      flights.find(
+        (flight) =>
+          flight.outward.segments?.[0]?.metaData?.fareCode === selectedOutwardFareCode && flight.return.segments?.[0]?.metaData?.fareCode === returnFareCode
+      ) ??
+      // it means that return flight cannot be paired with the selected outward fallback to first combo with that return fare
+      flights.find((flight) => flight.return.segments?.[0]?.metaData?.fareCode === returnFareCode);
+
+    if (!combo) return 0;
+
+    return Math.round(combo.price - selectedCombinationFlight.price);
+  };
+
+  // TODO: go to booking page?
+  const handleConfirm = () => {
+    if (isOpen) {
+      onCancelSearch();
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flyin__content">
+        {flightSearchDetailsLoading || isEmpty(flights) ? (
+          <Spinner />
+        ) : (
+          flight && (
+            <div className="flyin__content-text-row">
+              <div className="flyin__content-text-icon-row">
+                <img
+                  src={`https://media.tidesoftware.be/media/shared/Airlines/${getDepartureSegment(flight.outward)?.marketingAirlineCode}.png?height=256`}
+                  alt="airline-logo"
+                  className="logo"
+                  aria-hidden="true"
+                />
+                <div className="flyin__content-text-col">
+                  <span className="flyin__content-text-title-row">
+                    <strong>{translations.SRP.DEPARTURE}</strong> {getDepartureSegment(flight?.outward)?.departureAirportCode} -{' '}
+                    {getArrivalSegment(flight?.outward)?.arrivalAirportCode}
+                  </span>
+                  <span className="flyin__content-text">
+                    {timeFromDateTime(getDepartureSegment(flight?.outward)?.departureDateTime)} -{' '}
+                    {timeFromDateTime(getArrivalSegment(flight?.outward)?.arrivalDateTime)} ({durationTicksInHoursString(flight.outward.durationInTicks)},{' '}
+                    {getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}), {numberOfTravellers}{' '}
+                    travellers
+                  </span>
+                </div>
+              </div>
+
+              <div className="flyin__content-arrow-row">
+                <div className="flyin__content-arrow is-disabled" aria-disabled="true">
+                  <Icon name="ui-arrow" className="flyin__content-arrow-icon" width={16} height={16} aria-hidden="true" />
+                </div>
+                <div className="flyin__content-arrow">
+                  <Icon name="ui-arrow" className="flyin__content-arrow-icon flyin__content-arrow-icon--forward" width={16} height={16} aria-hidden="true" />
+                </div>
+              </div>
+            </div>
+          )
+        )}
+      </div>
+      {!flightSearchDetailsLoading && flight && (
+        <>
+          <div className="flyin__content-cards-wrapper">
+            <div className="flyin__content-cards">
+              {uniqueOutwardFlights.map((flightOption, index) => {
+                const firstSegment = first(flightOption.outward.segments);
+                if (!firstSegment) return null;
+                const diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
+
+                return (
+                  <div
+                    key={`outward-flight-option-${index}`}
+                    className={`flyin__content-card ${selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''}`}>
+                    <div className="flyin__content-card-top">
+                      <span className="flyin__content-card-top-tag">{firstSegment.metaData.fareMarketingName}</span>
+                      {diff !== null && diff != 0 && (
+                        <span
+                          className={`flyin__content-card-top-price ${
+                            diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
+                          }`}>
+                          {diff > 0 ? `+€${diff}` : `-€${Math.abs(diff)}`}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flyin__content-card-middle">
+                      <div className="flyin__content-card-middle-rows">
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Number of travellers</span>
+                          <span className="flyin__content-card-middle-row-right">{numberOfTravellers}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Travel class</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.metaData.fareMarketingName}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Booking class</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.bookingClassCode}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Fare basis</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.metaData.fareCode}</span>
+                        </div>
+
+                        <div className="flyin__content-data">
+                          {firstSegment.metaData.luggageCarryOn && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-bag" width={20} aria-hidden="true" />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.luggageCarryOn.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.luggageChecked && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-suitcase" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Checked luggage</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.luggageChecked.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.seatSelection && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-seat" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Seat selection</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.seatSelection.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.cancel && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-refund" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Refund</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.cancel.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.other && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon flyin__content-data__item-icon--other">
+                                <Icon name="ui-else" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Other</div>
+                                <ul className="flyin__content-data__item-content-description flyin__content-data__item-content-description--list">
+                                  {firstSegment.metaData.other.map((other, index) => (
+                                    <li key={`other-${index}`}>{other.text}</li>
+                                  ))}
+                                </ul>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="flyin__content-card-button"
+                      onClick={() => {
+                        const fareCode = flightOption.outward.segments?.[0]?.metaData?.fareCode;
+                        setSelectedOutwardFareCode(fareCode ?? null);
+                      }}>
+                      <div className={`cta ${selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : ''}`}>
+                        {' '}
+                        {selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flyin__content">
+            <div className="flyin__content-text-row">
+              <div className="flyin__content-text-icon-row">
+                <img
+                  src={`https://media.tidesoftware.be/media/shared/Airlines/${getDepartureSegment(flight.return)?.marketingAirlineCode}.png?height=256`}
+                  alt="airline-logo"
+                  className="logo"
+                  aria-hidden="true"
+                />
+                <div className="flyin__content-text-col">
+                  <span className="flyin__content-text-title-row">
+                    <strong>{translations.SRP.RETURN}</strong> {getDepartureSegment(flight?.return)?.departureAirportCode} -{' '}
+                    {getArrivalSegment(flight?.return)?.arrivalAirportCode}
+                  </span>
+                  <span className="flyin__content-text">
+                    {timeFromDateTime(getDepartureSegment(flight?.return)?.departureDateTime)} -{' '}
+                    {timeFromDateTime(getArrivalSegment(flight?.return)?.arrivalDateTime)} ({durationTicksInHoursString(flight.return.durationInTicks)},{' '}
+                    {getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}), {numberOfTravellers}{' '}
+                    travellers
+                  </span>
+                </div>
+              </div>
+
+              <div className="flyin__content-arrow-row">
+                <div className="flyin__content-arrow is-disabled" aria-disabled="true">
+                  <Icon name="ui-arrow" className="flyin__content-arrow-icon" width={16} height={16} aria-hidden="true" />
+                </div>
+                <div className="flyin__content-arrow">
+                  <Icon name="ui-arrow" className="flyin__content-arrow-icon flyin__content-arrow-icon--forward" width={16} height={16} aria-hidden="true" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flyin__content-cards-wrapper">
+            <div className="flyin__content-cards">
+              {uniqueReturnFlights.map((flightOption, index) => {
+                const firstSegment = first(flightOption.return.segments);
+                if (!firstSegment) return null;
+                const diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
+                return (
+                  <div
+                    key={`return-flight-option-${index}`}
+                    className={`flyin__content-card ${selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''}`}>
+                    <div className="flyin__content-card-top">
+                      <span className="flyin__content-card-top-tag">{firstSegment.metaData.fareMarketingName}</span>
+                      {diff !== null && diff != 0 && (
+                        <span
+                          className={`flyin__content-card-top-price ${
+                            diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
+                          }`}>
+                          {diff > 0 ? `+€${diff}` : `-€${Math.abs(diff)}`}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="flyin__content-card-middle">
+                      <div className="flyin__content-card-middle-rows">
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Number of travellers</span>
+                          <span className="flyin__content-card-middle-row-right">{numberOfTravellers}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Travel class</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.metaData.fareMarketingName}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Booking class</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.bookingClassCode}</span>
+                        </div>
+
+                        <div className="flyin__content-card-middle-row">
+                          <span className="flyin__content-card-middle-row-left">Fare basis</span>
+                          <span className="flyin__content-card-middle-row-right">{firstSegment.metaData.fareCode}</span>
+                        </div>
+
+                        <div className="flyin__content-data">
+                          {firstSegment.metaData.luggageCarryOn && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-bag" width={20} aria-hidden="true" />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Carry-on luggage</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.luggageCarryOn.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.luggageChecked && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-suitcase" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Checked luggage</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.luggageChecked.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.seatSelection && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-seat" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Seat selection</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.seatSelection.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.cancel && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon">
+                                <Icon name="ui-refund" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Refund</div>
+                                <div className="flyin__content-data__item-content-description">{firstSegment.metaData.cancel.text}</div>
+                              </div>
+                            </div>
+                          )}
+
+                          {firstSegment.metaData.other && (
+                            <div className="flyin__content-data__item">
+                              <div className="flyin__content-data__item-icon flyin__content-data__item-icon--other">
+                                <Icon name="ui-else" width={20} />
+                              </div>
+                              <div className="flyin__content-data__item-content">
+                                <div className="flyin__content-data__item-content-title">Other</div>
+                                <ul className="flyin__content-data__item-content-description flyin__content-data__item-content-description--list">
+                                  {firstSegment.metaData.other.map((other, index) => (
+                                    <li key={`other-${index}`}>{other.text}</li>
+                                  ))}
+                                </ul>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="flyin__content-card-button"
+                      onClick={() => {
+                        const fareCode = flightOption.return.segments?.[0]?.metaData?.fareCode;
+                        setSelectedReturnFareCode(fareCode ?? null);
+                      }}>
+                      <div className={`cta ${selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : ''}`}>
+                        {' '}
+                        {selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+      {!flightSearchDetailsLoading && (
+        <div className="flyin__footer">
+          <div className="flyin__footer__price">Total price: €{selectedCombinationFlight?.price?.toFixed(2)}</div>
+          <div className="flyin__button-wrapper">
+            <button className="cta cta--select" onClick={handleConfirm}>
+              {translations.PRODUCT.BOOK_NOW}
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FlightsFlyIn;

package/src/shared/components/flyin/flyin.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+import Icon from '../icon';
+import { useFlightSearch } from '../../../search-results/components/flight/flight-search-context';
+import { useDispatch } from 'react-redux';
+import { setSelectedFlight, setSelectedFlightDetails } from '../../../search-results/store/search-results-slice';
+import { SRPType } from '../../types';
+import FlightsFlyIn from './flights-flyin';
+import AccommodationFlyIn from './accommodation-flyin';
+
+type FlyInProps = {
+  title: string;
+  srpType: SRPType;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  className?: string;
+  onPanelRef?: (el: HTMLDivElement | null) => void;
+};
+
+const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, className = '', onPanelRef }) => {
+  const dispatch = useDispatch();
+  const { onCancelSearch } = useFlightSearch();
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // expose DOM node if needed
+  useEffect(() => {
+    onPanelRef?.(panelRef.current);
+    return () => onPanelRef?.(null);
+  }, [onPanelRef]);
+
+  useEffect(() => {
+    // click outside detection
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isOpen && panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, setIsOpen]);
+
+  // body scroll lock
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  const handleClose = () => {
+    if (isOpen && panelRef.current) {
+      if (srpType === 'flight') {
+        dispatch(setSelectedFlight(null));
+        dispatch(setSelectedFlightDetails(null));
+        onCancelSearch();
+      }
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className={`flyin ${isOpen ? 'flyin--active' : ''} ${className}`}>
+      <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
+        <div className="flyin__content">
+          <div className="flyin__content-title-row">
+            <h3 className="flyin__content-title">{title}</h3>
+            <span className="flyin__close" onClick={() => handleClose()}>
+              <Icon name="ui-close" width={30} height={30} aria-hidden="true" />
+            </span>
+          </div>
+        </div>
+        {srpType === 'flight' && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
+        {(srpType === 'hotel' || srpType === 'groupTour') && <AccommodationFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
+      </div>
+    </div>
+  );
+};
+
+export default FlyIn;

package/src/shared/translations/ar-SA.json

@@ -49,7 +49,8 @@
     "EVENING_DEPARTURE": "مساءً (18:00 - 00:00)",
     "FLIGHTS_FOUND_1": "",
     "FLIGHTS_FOUND_2": "رحلات",
-    "FLIGHTS_FOUND_3": "تم العثور عليها"
+    "FLIGHTS_FOUND_3": "تم العثور عليها",
+    "SELECT_YOUR_FARE": "اختر السعر الخاص بك"
   },
   "PRODUCT": {
     "STAY_INCLUDED": "الإقامة متضمنة",
@@ -372,6 +373,7 @@
     "DEPARTURE_TIME_ASC": "وقت المغادرة تصاعدياً",
     "DEPARTURE_TIME_DESC": "وقت المغادرة تنازلياً",
     "DURATION_ASC": "المدة تصاعدياً",
-    "DURATION_DESC": "المدة تنازلياً"
+    "DURATION_DESC": "المدة تنازلياً",
+    "TRAVEL_GROUP": "مجموعة المسافرين"
   }
 }

package/src/shared/translations/da-DK.json

@@ -49,7 +49,8 @@
     "EVENING_DEPARTURE": "Aften (18:00 - 00:00)",
     "FLIGHTS_FOUND_1": "",
     "FLIGHTS_FOUND_2": "fly",
-    "FLIGHTS_FOUND_3": "fundet"
+    "FLIGHTS_FOUND_3": "fundet",
+    "SELECT_YOUR_FARE": "Vælg din pris"
   },
   "PRODUCT": {
     "STAY_INCLUDED": "Ophold inkluderet",
@@ -372,6 +373,7 @@
     "DEPARTURE_TIME_ASC": "Afgangstid stigende",
     "DEPARTURE_TIME_DESC": "Afgangstid faldende",
     "DURATION_ASC": "Varighed stigende",
-    "DURATION_DESC": "Varighed faldende"
+    "DURATION_DESC": "Varighed faldende",
+    "TRAVEL_GROUP": "Rejseselskab"
   }
 }

package/src/shared/translations/de-DE.json

@@ -49,7 +49,8 @@
     "EVENING_DEPARTURE": "Abend (18:00 - 00:00)",
     "FLIGHTS_FOUND_1": "",
     "FLIGHTS_FOUND_2": "Flüge",
-    "FLIGHTS_FOUND_3": "gefunden"
+    "FLIGHTS_FOUND_3": "gefunden",
+    "SELECT_YOUR_FARE": "Wählen Sie Ihren Tarif"
   },
   "PRODUCT": {
     "STAY_INCLUDED": "Aufenthalt inbegriffen",
@@ -372,6 +373,7 @@
     "DEPARTURE_RANGE": "Abflugzeitraum",
     "DEPARTURE_AIRPORTS": "Abflughäfen",
     "ARRIVAL_AIRPORTS": "Ankunftsflughäfen",
-    "PRICE": "Preis"
+    "PRICE": "Preis",
+    "TRAVEL_GROUP": "Reisegruppe"
   }
 }

package/src/shared/translations/en-GB.json

@@ -49,7 +49,8 @@
     "EVENING_DEPARTURE": "Evening (18:00 - 00:00)",
     "FLIGHTS_FOUND_1": "",
     "FLIGHTS_FOUND_2": "flights",
-    "FLIGHTS_FOUND_3": "found"
+    "FLIGHTS_FOUND_3": "found",
+    "SELECT_YOUR_FARE": "Select your fare"
   },
   "PRODUCT": {
     "STAY_INCLUDED": "Stay included",
@@ -376,6 +377,7 @@
     "NIGHT_RANGE": "Night",
     "DEPARTURE_RANGE": "Departure range",
     "DEPARTURE_AIRPORTS": "Departure airports",
-    "ARRIVAL_AIRPORTS": "Arrival airports"
+    "ARRIVAL_AIRPORTS": "Arrival airports",
+    "TRAVEL_GROUP": "Travel group"
   }
 }