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

// @flow

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

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 styles = css`
  .moreInfo {
    margin: 20px 24px;
    font-size: 12px;
    font-style: italic;
  }
  .moreInfo a {
    color: #00a991;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    font-style: normal;
  }
  hr.separationLine {
    height: 1px;
    background-color: #e8edf1;
    border: none;
  }
`;

export const RawBaggageSummary = ({ data, mmbUrl }: Props) => {
  return data ? (
    <React.Fragment>
      {data.map((baggage, i) => (
        <BaggageDescriptionFragment key={i} data={baggage} />
      ))}
      <div className="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>
      </div>
      <style jsx>{styles}</style>
    </React.Fragment>
  ) : (
    <React.Fragment>
      <hr className="separationLine" />
      <BaggageLoader />
      <style jsx>{styles}</style>
    </React.Fragment>
  );
};

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