@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/BookingHeaders/Multicity.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import { FlightDirect } from '@kiwicom/orbit-components/lib/icons';
import { Heading } from '@kiwicom/orbit-components';

import type { Multicity_booking } from './__generated__/Multicity_booking.graphql';

type Props = {|
  booking: Multicity_booking,
  isMobile?: boolean,
|};

const MulticityBookingHeader = ({ booking, isMobile }: Props) => {
  const trips = idx(booking, _ => _.trips) || [];
  const destination = idx(booking.end, _ => _.airport.city.name) || '';

  const cities = trips.reduce((acc, trip, i) => {
    const city = idx(trip, _ => _.departure.airport.city.name) || '';

    return [
      ...acc, // eslint-disable-next-line react/no-array-index-key
      <React.Fragment key={`city-${i}`}>
        {city}
        <FlightDirect />
      </React.Fragment>,
    ];
  }, []);

  return (
    <Heading type={isMobile ? 'title3' : 'title2'} dataTest="trip-description">
      {[...cities, destination]}
    </Heading>
  );
};

export default createFragmentContainer(
  MulticityBookingHeader,
  graphql`
    fragment Multicity_booking on BookingMulticity {
      trips @relay(plural: true) {
        departure {
          airport {
            city {
              name
            }
          }
        }
      }
      end {
        airport {
          city {
            name
          }
        }
      }
    }
  `,
);