Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // @flow
- import * as React from 'react';
- import { createFragmentContainer, graphql } from 'react-relay';
- import { ThemeContext } from 'styled-components';
- import { withRouter } from 'react-router-dom';
- 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 { RouterHistory } from 'react-router-dom';
- import PageVariantContext from '../../../services/contexts/PageVariant';
- import type { AccordionLegCitiesInfo_leg as AccordionLegCitiesInfoType } from './__generated__/AccordionLegCitiesInfo_leg.graphql';
- import bookingLegTypes from '../../../utils/enums/BookingLegTypes';
- type Props = {|
- leg: AccordionLegCitiesInfoType,
- history: RouterHistory,
- |};
- // FIXME: split this bloated component into smaller components
- const LegCitiesInfo = (props: Props) => {
- const { urlPrefix } = React.useContext(PageVariantContext);
- const theme = React.useContext(ThemeContext);
- const onClickShowMore = e => {
- e.preventDefault();
- props.history.push(`${urlPrefix}/search/article/127`);
- };
- const { leg } = props;
- const flightNumber = leg.flightNumber ?? '';
- const transportationMode = leg.type;
- const reservationNumber = leg.pnr ?? '';
- const carrier = {
- code: leg?.airline?.code ?? '',
- name: 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: leg?.operatingAirline?.iata ?? '',
- name: leg?.operatingAirline?.name ?? '',
- };
- const vehicle = {
- manufacturer: leg.vehicle?.manufacturer ?? '',
- model: leg.vehicle?.model ?? '',
- };
- const departureStationName = leg?.departure?.airport?.name ?? '';
- const arrivalStationName = 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 (
- <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.name': 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={onClickShowMore}
- >
- <Translate t="smartfaq.single_booking_page.accordion_cities_info.trains_buses_info" />
- </TextLink>
- </ListItem>
- </>
- )}
- </>
- </List>
- );
- };
- export default createFragmentContainer(
- 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
- }
- }
- }
- `,
- );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement