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

Smart FAQ

// @flow

import * as React from 'react';
import idx from 'idx';
import { createFragmentContainer, graphql } from 'react-relay';
import TripDate from '@kiwicom/orbit-components/lib/TripSector/TripDate';
import TripSegment from '@kiwicom/orbit-components/lib/TripSegment';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';

import AccordionLegCitiesInfo from './AccordionLegCitiesInfo';
import {
  FormatDate,
  formatHour,
  timeDurationTranslationData,
} from '../../helpers/dateUtils';
import type { AccordionLegCities_leg } from './__generated__/AccordionLegCities_leg.graphql';
import bookingLegTypes from '../../common/booking/bookingLegTypes';

type Props = {|
  leg: AccordionLegCities_leg,
|};

const LegCities = (props: Props) => {
  const { leg } = props;
  const { departure, arrival, type } = leg;

  const departureTime = (departure && departure.localTime) || '';
  const arrivalTime = (arrival && arrival.localTime) || '';

  const departureCityName = idx(departure, _ => _.airport.city.name) || '';
  const departureCityCode = idx(departure, _ => _.airport.locationId) || '';

  const arrivalCityName = idx(arrival, _ => _.airport.city.name) || '';
  const arrivalCityCode = idx(arrival, _ => _.airport.locationId) || '';

  const carrier = {
    code: idx(leg.airline, _ => _.code) || '',
    name: idx(leg.airline, _ => _.name) || '',
  };

  const carrierTypes = type => {
    if (type === bookingLegTypes.AIRCRAFT) return 'airline';
    if (type === bookingLegTypes.BUS) return 'bus';
    if (type === bookingLegTypes.TRAIN) return 'train';
  };

  const { translationKey, translationVariables } = timeDurationTranslationData({
    mins: leg.duration || 0,
    isLayover: false,
  });

  return (
    <IntlConsumer>
      {intl => (
        <>
          <TripDate>{FormatDate({ dateString: departureTime })}</TripDate>
          <TripSegment
            carrier={{
              code: carrier.code,
              type: carrierTypes(type),
              name: carrier.name,
            }}
            duration={intl.translate(translationKey, translationVariables)}
            departure={`${departureCityName} ${departureCityCode}`}
            departureTime={formatHour(departureTime)}
            arrival={`${arrivalCityName} ${arrivalCityCode}`}
            arrivalTime={formatHour(arrivalTime)}
          >
            <AccordionLegCitiesInfo leg={leg} />
          </TripSegment>
        </>
      )}
    </IntlConsumer>
  );
};

export default createFragmentContainer(
  LegCities,
  graphql`
    fragment AccordionLegCities_leg on Leg {
      ...AccordionLegCitiesInfo_leg
      type
      duration
      airline {
        code
        name
      }
      arrival {
        localTime
        airport {
          locationId
          city {
            name
          }
        }
      }
      departure {
        localTime
        airport {
          locationId
          city {
            name
          }
        }
      }
    }
  `,
);