@kiwicom/smart-faq/src/SmartFAQ/AllBookings/BookingCard/BookingCard.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Card, { CardSection } from '@kiwicom/orbit-components/lib/Card';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import CarrierLogo from '@kiwicom/orbit-components/lib/CarrierLogo';
import ChevronRight from '@kiwicom/orbit-components/lib/icons/ChevronRight';

import BookingId from './BookingId';
import BookingSecondaryInfo from './BookingSecondaryInfo';
import type { BookingCard_booking as BookingCardType } from './__generated__/BookingCard_booking.graphql';

type Props = {|
  booking: ?BookingCardType,
  route: React.Node,
  departureDate: ?string,
|};

const BookingCard = (props: Props) => {
  const carriers = props.booking?.carriers ?? [];
  const allCarriers = carriers.map(c => ({
    code: (c && c.code) ?? '',
    name: (c && c.name) ?? '',
  }));

  return (
    <Card spaceAfter="medium">
      <CardSection>
        <Stack
          direction="row"
          align="start"
          justify="between"
          spacing="tight"
          desktop={{
            spacing: 'compact',
          }}
        >
          <div>
            {allCarriers && (
              <CarrierLogo size="medium" carriers={allCarriers} />
            )}
          </div>
          <Stack direction="column" inline shrink spacing="tight">
            <BookingId booking={props.booking} />
            <div>{props.route}</div>
            <BookingSecondaryInfo
              booking={props.booking}
              departureDate={props.departureDate}
            />
          </Stack>
          <div>
            <ChevronRight reverseOnRtl size="medium" customColor="#bac7d5" />
          </div>
        </Stack>
      </CardSection>
    </Card>
  );
};

export default createFragmentContainer(
  BookingCard,
  graphql`
    fragment BookingCard_booking on BookingInterface {
      ...BookingId_booking
      ...BookingSecondaryInfo_booking
      carriers {
        name
        code
      }
    }
  `,
);