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

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { graphql, createFragmentContainer } from 'react-relay';
import { CarrierLogo } from '@kiwicom/orbit-components';
import { ChevronRight } from '@kiwicom/orbit-components/lib/icons';

import BookingId from './BookingId';
import FromToRow from './FromToRow';
import DateAndPassenger from './DateAndPassenger';
import type { BookingCard_arrival as BookingCardArrivalType } from './__generated__/DeprecatedBookingCard_arrival.graphql';
import type { BookingCard_departure as BookingCardDepartureType } from './__generated__/DeprecatedBookingCard_departure.graphql';
import type { DeprecatedBookingCard_booking as DeprecatedBookingCardType } from './__generated__/DeprecatedBookingCard_booking.graphql';

const styles = css.global`
  .card {
    width: 100%;
    position: relative;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e8edf1;
    padding: 12px 44px 24px 44px;
    margin-bottom: 24px;
  }
  div.fields {
    display: flex;
    justify-content: space-between;
  }
  div.logoCarriers {
    position: absolute;
    top: 23px;
    left: 6px;
  }
  div.chevron {
    position: absolute;
    top: 25px;
    right: 16px;
    line-height: 1.6;
  }
  div.label {
    display: block;
    margin-bottom: 4px;
  }
  div.section {
    display: block;
  }
  p.flight {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    color: #46515e;
    margin-bottom: 12px;
    margin-left: 2px;
    display: inline-block;
  }
  div.arrowIcon {
    display: inline-block;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
  @media only screen and (max-width: 900px) {
    .card {
      height: 100%;
      margin-bottom: 16;
    }
    p.flight {
      font-size: 12px;
    }
    div.section {
      display: inline-block;
      margin-bottom: 12px;
    }
    div.section:not(:last-child) {
      margin-right: 20px;
    }
    div.section:nth-child(3) {
      margin-right: 65px;
    }
    div.fields {
      display: block;
      margin-top: 5px;
    }
  }
`;

type Props = {|
  type: string,
  booking: DeprecatedBookingCardType,
  departure: BookingCardDepartureType,
  arrival: BookingCardArrivalType,
|};

const DeprecatedBookingCard = (props: Props) => {
  const carriers = props.booking.carriers ?? [];

  const allCarriers = carriers.map(c => ({
    code: (c && c.code) ?? '',
    name: (c && c.name) ?? '',
  }));

  return (
    <div className="card">
      <BookingId booking={props.booking} />
      <div className="logoCarriers">
        <CarrierLogo size="medium" carriers={allCarriers} />
      </div>
      <FromToRow
        type={props.type}
        arrival={props.arrival}
        departure={props.departure}
      />
      <div className="chevron">
        <ChevronRight size="medium" customColor="#bac7d5" />
      </div>
      <DateAndPassenger departure={props.departure} booking={props.booking} />
      <style jsx global>
        {styles}
      </style>
    </div>
  );
};

/**
 @deprecated replace all usages by BookingCard & remove this
 */
export default createFragmentContainer(DeprecatedBookingCard, {
  booking: graphql`
    fragment DeprecatedBookingCard_booking on BookingInterface {
      ...BookingId_booking
      ...DateAndPassenger_booking
      carriers {
        name
        code
      }
    }
  `,
  arrival: graphql`
    fragment DeprecatedBookingCard_arrival on RouteStop {
      ...FromToRow_arrival
    }
  `,

  departure: graphql`
    fragment DeprecatedBookingCard_departure on RouteStop {
      ...FromToRow_departure
      ...DateAndPassenger_departure
    }
  `,
});