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

Smart FAQ

// @flow

import * as React from 'react';
import idx from 'idx';
import Text from '@kiwicom/orbit-components/lib/Text';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';
import {
  FlightDirect,
  ChevronDown,
  ChevronUp,
} from '@kiwicom/orbit-components/lib/icons';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import { withTheme } from 'styled-components';

import CarrierLogoWrapper from './CarrierLogoWrapper';
import { FormatDate } from '../../helpers/dateUtils';
import type { AccordionTripSummary_trip } from './__generated__/AccordionTripSummary_trip.graphql';

type Props = {|
  trip: AccordionTripSummary_trip,
  isToggled: boolean,
  ...ThemeProps,
|};
const AccordionHeader = ({ trip, isToggled, theme }: Props) => {
  const departureDate = idx(trip, _ => _.departure.localTime);
  const departureCode = idx(trip, _ => _.departure.airport.locationId);
  const departureCity = idx(trip, _ => _.departure.airport.city.name);
  const arrivalCity = idx(trip, _ => _.arrival.airport.city.name);
  const arrivalCode = idx(trip, _ => _.arrival.airport.locationId);

  return (
    <Stack flex align="center">
      <div>
        <CarrierLogoWrapper legs={trip.legs} />
      </div>
      <Stack spacing="extraTight">
        <Text type="secondary" size="small">
          {departureDate ? <FormatDate dateString={departureDate} /> : null}
        </Text>
        <Stack flex align="center">
          <Text weight="bold" type="primary">
            {departureCity}&nbsp;{departureCode}
          </Text>
          <FlightDirect customColor={theme.orbit.paletteInkLighter} />
          <Text weight="bold" type="primary">
            {arrivalCity}&nbsp;{arrivalCode}
          </Text>
        </Stack>
      </Stack>
      {isToggled ? (
        <ChevronUp customColor={theme.orbit.paletteInkLighter} />
      ) : (
        <ChevronDown customColor={theme.orbit.paletteInkLighter} />
      )}
    </Stack>
  );
};
export default withTheme(AccordionHeader);