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

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { Link } from 'react-router-dom';
import Clock from '@kiwicom/orbit-components/lib/icons/Clock';
import Check from '@kiwicom/orbit-components/lib/icons/Check';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import TripLayover from '@kiwicom/orbit-components/lib/TripSector/TripLayover';
import List from '@kiwicom/orbit-components/lib/List';
import ListItem from '@kiwicom/orbit-components/lib/List/ListItem';

import PageVariantContext from '../../context/PageVariant';
import { formatTimeDuration } from '../../helpers/dateUtils';
import AccordionLegCities from './AccordionLegCities';
import type { AccordionBodyLeg_leg as AccordionBodyLegType } from './__generated__/AccordionBodyLeg_leg.graphql';
import type { AccordionBodyLeg_nextLeg as AccordionBodyNextlegType } from './__generated__/AccordionBodyLeg_nextLeg.graphql';

type LegProps = {|
  leg: AccordionBodyLegType,
  nextLeg: AccordionBodyNextlegType,
|};

const AccordionBodyLeg = (props: LegProps) => {
  const { urlPrefix } = React.useContext(PageVariantContext);
  const { leg, nextLeg } = props;
  const arrivalTime = leg.arrival?.time ?? '';
  const nextDepartureTime = nextLeg.departure?.time ?? '';
  const coveredBy =
    nextLeg && nextLeg.guarantee === 'KIWICOM'
      ? 'Kiwi.com Guarantee'
      : 'carrier';
  const layoverTime =
    (new Date(nextDepartureTime) - new Date(arrivalTime)) / 60e3; // Diff in minutes

  return (
    <>
      <AccordionLegCities leg={props.leg} />
      <TripLayover>
        <List type="secondary" size="small">
          <ListItem icon={<Clock />}>
            {formatTimeDuration({ mins: layoverTime, isLayover: true })}
          </ListItem>
          <ListItem icon={<Check customColor="#01bba5" />}>
            <Link
              to={`${urlPrefix}/search/article/146`}
              style={{ textDecoration: 'none' }}
            >
              <span style={{ color: '#7c8b99' }}>
                <Translate
                  t="smartfaq.single_booking_page.covered_by"
                  html
                  values={{ coveredBy }}
                />
              </span>
            </Link>
          </ListItem>
        </List>
      </TripLayover>
    </>
  );
};

export default createFragmentContainer(AccordionBodyLeg, {
  leg: graphql`
    fragment AccordionBodyLeg_leg on Leg {
      ...AccordionLegCities_leg
      arrival {
        time
        localTime
      }
      departure {
        time
        localTime
      }
    }
  `,
  nextLeg: graphql`
    fragment AccordionBodyLeg_nextLeg on Leg {
      departure {
        time
      }
      guarantee
    }
  `,
});