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

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Text from '@kiwicom/nitro/lib/components/Text';

import FormattedDate from './FormattedDate';
import PassengerCount from './PassengerCount';
import BookingStatus from './BookingStatus';
import type { BookingSecondaryInfo_booking as BookingSecondaryInfoType } from './__generated__/BookingSecondaryInfo_booking.graphql';

type Props = {|
  booking: ?BookingSecondaryInfoType,
  departureDate: ?string,
|};

const BookingSecondaryInfo = (props: Props) => {
  return (
    <Stack direction="row" wrap basis="100%">
      <Stack direction="column" inline spacing="condensed">
        <Text
          t="smartfaq.all_bookings.booking_card.departure_date"
          type="secondary"
          size="small"
        />
        <FormattedDate date={props.departureDate} />
      </Stack>
      <Stack direction="column" inline spacing="condensed">
        <Text
          t="smartfaq.all_bookings.booking_card.booking_date"
          type="secondary"
          size="small"
        />
        <FormattedDate date={props.booking?.bookingDate} />
      </Stack>
      <Stack direction="column" inline spacing="condensed">
        <Text
          t="smartfaq.all_bookings.booking_card.includes"
          type="secondary"
          size="small"
        />
        <PassengerCount passengerCount={props.booking?.passengerCount} />
      </Stack>
      <Stack direction="column" inline spacing="condensed">
        <Text
          t="smartfaq.all_bookings.booking_card.status"
          type="secondary"
          size="small"
        />
        <BookingStatus status={props.booking?.status} />
      </Stack>
    </Stack>
  );
};

export default createFragmentContainer(
  BookingSecondaryInfo,
  graphql`
    fragment BookingSecondaryInfo_booking on BookingInterface {
      bookingDate
      passengerCount
      status
    }
  `,
);