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

Smart FAQ

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { withTheme } from 'styled-components';
import { withRouter } from 'react-router-dom';
import idx from 'idx';
import {
  Ticket,
  Airplane,
  InformationCircle,
  City,
} from '@kiwicom/orbit-components/lib/icons';
import CarrierLogo from '@kiwicom/orbit-components/lib/CarrierLogo';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import TextLink from '@kiwicom/orbit-components/lib/TextLink';
import List from '@kiwicom/orbit-components/lib/List';
import ListItem from '@kiwicom/orbit-components/lib/List/ListItem';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';

import type { AccordionLegCitiesInfo_leg } from './__generated__/AccordionLegCitiesInfo_leg.graphql';
import bookingLegTypes from '../../common/booking/bookingLegTypes';

type Props = {|
  ...ThemeProps,
  leg: AccordionLegCitiesInfo_leg,
  history: {
    push: string => void,
  },
|};

const LegCitiesInfo = (props: Props) => {
  const { leg, theme } = props;
  const flightNumber = leg.flightNumber || '';
  const transportationMode = leg.type;
  const reservationNumber = leg.pnr || '';

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

  const carrierName =
    transportationMode === bookingLegTypes.AIRCRAFT ? (
      <Translate
        t={__(
          'smartfaq.single_booking_page.accordion_cities_info.airline_title_name',
        )}
        values={{ carrierName: carrier.name }}
      />
    ) : (
      <Translate
        t={__(
          'smartfaq.single_booking_page.accordion_cities_info.carrier_title_name',
        )}
        values={{ carrierName: carrier.name }}
      />
    );

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

  const vehicle = {
    manufacturer: idx(leg.vehicle, _ => _.manufacturer) || '',
    model: idx(leg.vehicle, _ => _.model) || '',
  };

  const departureStationName = idx(leg, _ => _.departure.airport.name) || '';
  const arrivalStationName = idx(leg, _ => _.arrival.airport.name) || '';

  const isOperatingAirlineDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT &&
    operatingAirline.code &&
    operatingAirline.code !== carrier.code;

  const isReservationNumberDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT && reservationNumber;

  const isAircraftTypeDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT && vehicle.manufacturer;

  const isGroundTransportation =
    transportationMode !== bookingLegTypes.AIRCRAFT;

  const renderFlightNumber = () => {
    if (transportationMode === bookingLegTypes.BUS) return null;

    let titleNumber = null;

    if (transportationMode === bookingLegTypes.AIRCRAFT) {
      titleNumber = (
        <Translate
          t={__('smartfaq.single_booking_page.accordion_cities_info.flight_no')}
          values={{
            flight_number: flightNumber,
            carrier_code: carrier.code,
          }}
        />
      );
    } else if (transportationMode === bookingLegTypes.TRAIN) {
      titleNumber = (
        <Translate
          t={__('smartfaq.single_booking_page.accordion_cities_info.train_no')}
          values={{
            flight_number: flightNumber,
            carrier_code: carrier.code,
          }}
        />
      );
    }

    return <ListItem icon={<InformationCircle />}>{titleNumber}</ListItem>;
  };

  return (
    <div style={{ paddingBottom: '16px' }}>
      <List size="small" type="secondary" dataTest="legCities">
        <>
          <ListItem icon={<CarrierLogo carriers={[carrier]} />}>
            {carrierName}
          </ListItem>
          {isOperatingAirlineDisplayed && (
            <ListItem icon={<CarrierLogo carriers={[operatingAirline]} />}>
              <Translate
                t={__(
                  'smartfaq.single_booking_page.accordion_cities_info.operating_airline',
                )}
                values={{ operatingAirline: operatingAirline.name }}
              />
            </ListItem>
          )}
          {renderFlightNumber()}
          {isReservationNumberDisplayed && (
            <ListItem icon={<Ticket size="small" color="secondary" />}>
              <Translate
                t={__(
                  'smartfaq.single_booking_page.accordion_cities_info.reservation_number',
                )}
                values={{ reservationNumber }}
              />
            </ListItem>
          )}
          {isAircraftTypeDisplayed && (
            <ListItem icon={<Airplane size="small" color="secondary" />}>
              <Translate
                t={__(
                  'smartfaq.single_booking_page.accordion_cities_info.vehicle_type',
                )}
                values={{
                  vehicle_manufacturer: vehicle.manufacturer,
                  vehicle_model: vehicle.model,
                }}
              />
            </ListItem>
          )}
          {isGroundTransportation && (
            <>
              <ListItem icon={<City size="small" color="secondary" />}>
                {departureStationName}
              </ListItem>
              <ListItem icon={<City size="small" color="secondary" />}>
                {arrivalStationName}
              </ListItem>
              <ListItem
                icon={
                  <InformationCircle
                    size="small"
                    customColor={theme.orbit.paletteProductNormal}
                  />
                }
                dataTest="moreInfoLink"
              >
                <TextLink
                  href=""
                  dataTest="moreInfoLink"
                  onClick={e => {
                    e.preventDefault();
                    props.history.push(
                      '/faq/search/article/RkFRQXJ0aWNsZToxMjc=',
                    );
                  }}
                >
                  <Translate
                    t={__(
                      'smartfaq.single_booking_page.accordion_cities_info.trains_buses_info',
                    )}
                  />
                </TextLink>
              </ListItem>
            </>
          )}
        </>
      </List>
    </div>
  );
};

export default createFragmentContainer(
  withTheme(withRouter(LegCitiesInfo)),
  graphql`
    fragment AccordionLegCitiesInfo_leg on Leg {
      type
      airline {
        code
        name
      }
      operatingAirline {
        iata
        name
      }
      flightNumber
      vehicle {
        manufacturer
        model
      }
      pnr
      departure {
        airport {
          name
        }
      }
      arrival {
        airport {
          name
        }
      }
    }
  `,
);