@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BaggageInfo/BaggageSummary.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';
import Separator from '@kiwicom/orbit-components/lib/Separator';

import BaggageLoader from './BaggageLoader';
import BaggageDescriptionFragment from './BaggageDescription';
import {
  replaceWithCurrentDomain,
  addDeepLink,
} from '../../../../SmartFAQ/helpers/UrlHelpers';
import type { BaggageSummary as BaggageSummaryProps } from './__generated__/BaggageSummary.graphql';
import { events } from '../../../../const/events';
import LogClick from '../../../../components/Log/LogClick';

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

const MoreInfo = styled.div`
  margin: 20px ${defaultTheme.orbit.spaceLarge};
  font-size: ${defaultTheme.orbit.fontSizeTextSmall};
  font-style: italic;

  a {
    color: ${defaultTheme.orbit.paletteProductNormal};
    font-size: ${defaultTheme.orbit.fontSizeTextSmall};
    text-decoration: none;
    font-weight: ${defaultTheme.orbit.fontWeightLinks};
    font-style: normal;
  }
`;

export const RawBaggageSummary = ({ data, mmbUrl }: Props) => {
  return data ? (
    <>
      {data.map((baggage, i) => (
        <BaggageDescriptionFragment key={i} data={baggage} />
      ))}
      <MoreInfo>
        <LogClick event={events.BAGGAGE_ADD_MORE}>
          {({ onClick }) => (
            <a
              target="_blank"
              rel="noopener noreferrer"
              href={replaceWithCurrentDomain(addDeepLink(mmbUrl, 'bags'))}
              onClick={onClick}
            >
              <Translate t="smartfaq.baggage_info.go_to_mmb_baggage_section" />
            </a>
          )}
        </LogClick>
      </MoreInfo>
    </>
  ) : (
    <>
      <Separator />
      <BaggageLoader />
    </>
  );
};

export default createFragmentContainer(
  RawBaggageSummary,
  graphql`
    fragment BaggageSummary on BookingBaggage @relay(plural: true) {
      ...BaggageDescription
    }
  `,
);