@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/BoardingPassesItem.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Badge from '@kiwicom/orbit-components/lib/Badge';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import {
  FlightDirect,
  Download,
  InformationCircle,
} from '@kiwicom/orbit-components/lib/icons';

import HoverHelpTooltip from '../../../../SmartFAQ/common/Tooltip/HoverHelpTooltip';
import { replaceWithCurrentDomain } from '../../../../SmartFAQ/helpers/UrlHelpers';
import type { BoardingPassesItem as BoardingPassesDescriptionProps } from './__generated__/BoardingPassesItem.graphql';
import { events } from '../../../../const/events';
import LogClick from '../../../../components/Log/LogClick';

type Props = {|
  data: BoardingPassesDescriptionProps,
  mmbUrl: string,
|};

const BoardingPassesItem = ({ data, mmbUrl }: Props) => {
  if (data.leg === null) return null;
  const departureCity = data.leg?.departure?.airport?.city?.name;
  const arrivalCity = data.leg?.arrival?.airport?.city?.name;
  const vehicleType = data.leg?.type;
  const boardingPassUrl = data.boardingPassUrl;
  const availableAt = data.availableAt ?? '';
  const availabilityStatus = data.availabilityStatus;
  const moreInfoButton = (
    <LogClick event={events.BP_MORE_INFO}>
      {({ onClick }) => (
        <a
          href={replaceWithCurrentDomain(mmbUrl)}
          onClick={onClick}
          target="_blank"
          rel="noopener noreferrer"
          className="moreInfo"
        >
          <Translate t="smartfaq.boarding_pass_info.more_info" />
        </a>
      )}
    </LogClick>
  );

  const Info = (() => {
    switch (availabilityStatus) {
      case 'AVAILABLE':
        return (
          <LogClick event={events.BP_DOWNLOAD}>
            {({ onClick }) => (
              <a
                href={boardingPassUrl}
                onClick={onClick}
                target="_blank"
                rel="noopener noreferrer"
                className="download"
              >
                <Download size="medium" customColor="#00a991" />
                <Translate t="smartfaq.boarding_pass_info.download" />
              </a>
            )}
          </LogClick>
        );
      case 'IN_FUTURE':
        return (
          <p>
            <Translate
              t="smartfaq.boarding_pass_info.available_at"
              values={{ date: availableAt }}
            />
          </p>
        );
      case 'AT_AIRPORT':
        if (vehicleType !== 'AIRCRAFT') {
          return (
            <p style={{ color: '#cf292a' }}>
              <Translate t="smartfaq.boarding_pass_info.in_process" />
            </p>
          );
        }
        return (
          <HoverHelpTooltip
            content={
              <Translate t="smartfaq.boarding_pass_info.airport_check_in.hover" />
            }
            placement="top"
            eventToTrack={events.BP_SHOW_TOOLTIP}
          >
            <Badge type="info" icon={<InformationCircle />}>
              <Translate t="smartfaq.boarding_pass_info.airport_check_in" />
            </Badge>
          </HoverHelpTooltip>
        );
      case 'OTHER':
      default:
        return moreInfoButton;
    }
  })();

  return (
    <React.Fragment>
      <hr className="separationLine" />
      <div className="boardingPassesRow">
        <p className="leg">
          {departureCity}
          <FlightDirect size="medium" customColor="#bac7d5" />
          {arrivalCity}
        </p>
        <div className="info">{Info}</div>
      </div>
      <style jsx>
        {`
          div.boardingPassesRow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 24px 15px 24px;
          }
          div.info {
            display: inline-block;
            float: right;
          }
          div.info :global(p) {
            font-size: 12px;
            line-height: 1.4;
            color: #46515e;
            margin: 0;
          }
          div.info :global(a.download) {
            font-size: 12px;
            color: #00a991;
            text-decoration: none;
          }
          div.info :global(a.moreInfo) {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
            color: #171b1e;
          }
          div.info :global(.Tooltip) {
            bottom: 110%;
            right: 0;
          }
          div.info :global(.Tooltip-inner.Tooltip-inner) {
            max-width: 265px;
            width: 265px;
          }
          div.info :global(.Tooltip .Tooltip-arrow.Tooltip-arrow) {
            left: auto;
            right: 55px;
          }
          div.boardingPassesNumber {
            display: inline-block;
            margin-right: 8px;
          }
          div.boardingPassesNumber p {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.4;
            color: #46515e;
            display: inline-block;
          }
          .leg {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.4;
            color: #46515e;
            display: inline-block;
            margin: 0 0 0 5px;
          }
          hr.separationLine {
            height: 1px;
            background-color: #e8edf1;
            border: none;
            margin: 0;
            width: 100%;
          }
        `}
      </style>
    </React.Fragment>
  );
};

export default createFragmentContainer(
  BoardingPassesItem,
  graphql`
    fragment BoardingPassesItem on BoardingPass {
      flightNumber
      boardingPassUrl
      availableAt
      availabilityStatus
      leg {
        id
        type
        departure {
          airport {
            city {
              name
            }
          }
        }
        arrival {
          airport {
            city {
              name
            }
          }
        }
      }
    }
  `,
);