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

// @flow

import * as React from 'react';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';

import { bookingStatuses } from '../../common/booking/bookingStatuses';

type Props = {|
  status: ?string,
|};

/*
 TODO:
 1. merge with BookingStatuses -> only one component
 2. BookingStatuses are taking render prop

 -> example usage: <BookingStatuses>{(status) => <Badge>{status}</Badge>}</BookingStatuses>
 */
const BookingStatus = ({ status }: Props) => {
  const bookingStatusStyle = bookingStatuses[status ?? ''];

  if (!bookingStatusStyle) {
    return null;
  }

  return (
    <IntlConsumer>
      {intl => {
        const translatedStatuses = {
          REFUNDED: intl.translate(__('smartfaq.booking_status.refunded')),
          CONFIRMED: intl.translate(__('smartfaq.booking_status.confirmed')),
          CLOSED: intl.translate(__('smartfaq.booking_status.closed')),
          IN_PROCESS: intl.translate(__('smartfaq.booking_status.in_process')),
        };
        return (
          <div style={{ color: bookingStatusStyle.color, fontSize: '14px' }}>
            {translatedStatuses[bookingStatusStyle.status]}
          </div>
        );
      }}
    </IntlConsumer>
  );
};

export default BookingStatus;