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

// @flow

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

import FormattedDate from './FormattedDate';
import BookingStatus from './BookingStatus';
import type { DateAndPassenger_departure as DateAndPassengerDepartureType } from './__generated__/DateAndPassenger_departure.graphql';
import type { DateAndPassenger_booking as DateAndPassengerBookingType } from './__generated__/DateAndPassenger_booking.graphql';

type Props = {
  departure: DateAndPassengerDepartureType,
  booking: DateAndPassengerBookingType,
};

export const DateAndPassenger = (props: Props) => {
  const departureDate = props.departure.time ?? '';
  const bookingDate = props.booking.bookingDate ?? '';
  const passengerCount = props.booking.passengerCount ?? 0;
  const status = props.booking.status ?? '';

  return (
    <div className="fields">
      <div className="section">
        <div className="label">
          <Text type="secondary" size="small">
            <Translate t="smartfaq.all_bookings.booking_card.departure_date" />
          </Text>
        </div>
        <FormattedDate date={departureDate} />
      </div>
      <div className="section">
        <div className="label">
          <Text type="secondary" size="small">
            <Translate t="smartfaq.all_bookings.booking_card.booking_date" />
          </Text>
        </div>
        <FormattedDate date={bookingDate} />
      </div>
      <div className="section">
        <div className="label">
          <Text type="secondary" size="small">
            <Translate t="smartfaq.all_bookings.booking_card.includes" />
          </Text>
        </div>
        <Text>
          <Passengers size="small" customColor="#bac7d5" />
          {passengerCount}
        </Text>
      </div>
      <div className="section">
        <div className="label">
          <Text type="secondary" size="small">
            <Translate t="smartfaq.all_bookings.booking_card.status" />
          </Text>
        </div>
        <BookingStatus status={status} />
      </div>
    </div>
  );
};

export default createFragmentContainer(DateAndPassenger, {
  booking: graphql`
    fragment DateAndPassenger_booking on BookingInterface {
      status
      passengerCount
      bookingDate
    }
  `,
  departure: graphql`
    fragment DateAndPassenger_departure on RouteStop {
      time
    }
  `,
});