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

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { withTheme } 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 { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';
import type { RouterHistory } from 'react-router-dom';

import PageVariantContext from '../../context/PageVariant';
import type { AccordionLegCitiesInfo_leg as AccordionLegCitiesInfoType } from './__generated__/AccordionLegCitiesInfo_leg.graphql';
import bookingLegTypes from '../../common/booking/bookingLegTypes';

type Props = {|
  ...ThemeProps,
  leg: AccordionLegCitiesInfoType,
  history: RouterHistory,
|};

class LegCitiesInfo extends React.Component<Props> {
  onClickShowMore = (e, urlPrefix) => {
    e.preventDefault();
    this.props.history.push(`${urlPrefix}/search/article/127`);
  };

  render() {
    const { leg, theme } = this.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 (
      <PageVariantContext.Consumer>
        {({ urlPrefix }) => (
          <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={evt => this.onClickShowMore(evt, urlPrefix)}
                      >
                        <Translate t="smartfaq.single_booking_page.accordion_cities_info.trains_buses_info" />
                      </TextLink>
                    </ListItem>
                  </>
                )}
              </>
            </List>
          </div>
        )}
      </PageVariantContext.Consumer>
    );
  }
}

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
        }
      }
    }
  `,
);