@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/Header.js

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { graphql, createFragmentContainer } from 'react-relay';
// $FlowExpectedError: Flow types are broken in TextNode
import TextNode from '@kiwicom/nitro/lib/components/TextNode';

import OneWayBookingHeader from './BookingHeaders/OneWay';
import ReturnBookingHeader from './BookingHeaders/Return';
import MulticityBookingHeader from './BookingHeaders/Multicity';
import formatBookingId from '../../helpers/formatBookingId';
import bookingTypes from '../../common/booking/bookingTypes';
import { BookingBadgeStatus } from '../../common/booking/bookingStatuses';
import SelectAnotherBookingLink from '../../common/booking/SelectAnotherBookingLink';
import type { Header_booking as HeaderBookingType } from './__generated__/Header_booking.graphql';

type Props = {|
  booking: HeaderBookingType,
  isFuture: boolean,
|};

function renderHeaderTitleByType(type: string, booking: HeaderBookingType) {
  switch (type) {
    case bookingTypes.ONE_WAY:
      return <OneWayBookingHeader booking={booking} />;
    case bookingTypes.RETURN:
      return <ReturnBookingHeader booking={booking} />;
    case bookingTypes.MULTICITY:
      return <MulticityBookingHeader booking={booking} />;
  }
  return null;
}

const Header = (props: Props) => {
  const { booking, isFuture } = props;
  const { type } = booking;

  return (
    <React.Fragment>
      <div className="headerAbove">
        <TextNode
          type="secondary"
          dataTest="booking-type"
          t={
            isFuture
              ? __('smartfaq.single_booking_page.header.booking_id.upcoming')
              : __('smartfaq.single_booking_page.header.booking_id.past')
          }
          values={{
            booking_id: (
              <span dir="ltr" key={booking.databaseId ?? 0}>
                {formatBookingId(booking.databaseId ?? 0)}
              </span>
            ),
          }}
        />
        <SelectAnotherBookingLink />
      </div>
      <div className="headerTitle" data-cy="booking-title">
        {type && renderHeaderTitleByType(type, booking)}
      </div>
      <div className="headerBelow">
        {booking.status && <BookingBadgeStatus status={booking.status} />}
      </div>
      <style jsx>
        {`
          .headerAbove,
          .headerTitle {
            margin-bottom: 4px;
          }
          .headerAbove {
            display: flex;
            justify-content: space-between;
          }
          .headerBelow {
            margin-bottom: 16px;
          }
        `}
      </style>
    </React.Fragment>
  );
};

export default createFragmentContainer(
  withRouter(Header),
  graphql`
    fragment Header_booking on BookingInterface {
      type: __typename
      status
      databaseId: id(opaque: false)
      ...OneWay_booking
      ...Return_booking
      ...Multicity_booking
    }
  `,
);