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

// @flow

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

import formatBookingId from '../../helpers/formatBookingId';
import type { BookingId_booking as BookingIdType } from './__generated__/BookingId_booking.graphql';

type Props = {|
  booking: ?BookingIdType,
|};

const BookingId = (props: Props) => {
  const bookingId = props.booking?.bookingId;

  if (!bookingId) {
    return null;
  }

  return (
    <Text type="secondary" size="small">
      # {formatBookingId(bookingId)}
    </Text>
  );
};

export default createFragmentContainer(
  BookingId,
  graphql`
    fragment BookingId_booking on BookingInterface {
      bookingId: id(opaque: false)
    }
  `,
);