@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 { CardSection } from '@kiwicom/orbit-components/lib/Card';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Text from '@kiwicom/orbit-components/lib/Text';
import TextLink from '@kiwicom/orbit-components/lib/TextLink';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import Tooltip from '@kiwicom/orbit-components/lib/Tooltip';
import styled from 'styled-components';

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';
import LogHover from '../../../../components/Log/LogHover';

const Wrapper = styled.div`
  padding-top: 16px;
`;

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 }) => (
        <TextLink
          href={replaceWithCurrentDomain(mmbUrl)}
          onClick={onClick}
          external
          type="secondary"
          size="small"
        >
          <Translate t="smartfaq.boarding_pass_info.more_info" />
        </TextLink>
      )}
    </LogClick>
  );

  const renderInfo = () => {
    switch (availabilityStatus) {
      case 'AVAILABLE':
        return (
          <LogClick event={events.BP_DOWNLOAD}>
            {({ onClick }) => (
              <ButtonLink
                href={boardingPassUrl}
                onClick={onClick}
                iconLeft={<Download />}
                external
                size="small"
              >
                <Translate t="smartfaq.boarding_pass_info.download" />
              </ButtonLink>
            )}
          </LogClick>
        );

      case 'IN_FUTURE':
        return (
          <Text size="small">
            <Translate
              t="smartfaq.boarding_pass_info.available_at"
              values={{ date: availableAt }}
            />
          </Text>
        );

      case 'AT_AIRPORT':
        if (vehicleType !== 'AIRCRAFT') {
          return (
            <Text type="critical" size="small">
              <Translate t="smartfaq.boarding_pass_info.in_process" />
            </Text>
          );
        }

        return (
          <Tooltip
            content={
              <Translate t="smartfaq.boarding_pass_info.airport_check_in.hover" />
            }
            preferredPosition="top"
            size="small"
          >
            <LogHover event={events.BP_SHOW_TOOLTIP}>
              {({ onMouseOver }) => (
                <div onMouseOver={onMouseOver}>
                  <Badge type="info" icon={<InformationCircle />}>
                    <Translate t="smartfaq.boarding_pass_info.airport_check_in" />
                  </Badge>
                </div>
              )}
            </LogHover>
          </Tooltip>
        );

      case 'OTHER':
      default:
        return moreInfoButton;
    }
  };

  return (
    <CardSection>
      {/* dirty fix for this issue
      https://skypicker.slack.com/archives/C9B1H0ACW/p1562157032012700 
      further refactoring is needed to make CardSection direct children of Card 
      for boarding passes card */}
      <Wrapper>
        <Stack
          flex
          justify="between"
          align="center"
          dataTest="boardingPassesRow"
        >
          <Stack inline align="center" spacing="none">
            <Text weight="bold">{departureCity}</Text>
            <FlightDirect reverseOnRtl size="medium" customColor="#bac7d5" />
            <Text weight="bold">{arrivalCity}</Text>
          </Stack>
          {renderInfo()}
        </Stack>
      </Wrapper>
    </CardSection>
  );
};

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