@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 { track } from '../../../cuckoo/tracker';

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;
  }
`;

const addMoreBagsTraker = () => {
  track('Baggage', 'addMoreBags');
};

export const RawBaggageSummary = ({ data, mmbUrl }: Props) => {
  return data ? (
    <React.Fragment>
      {data.map((baggage, i) => (
        <BaggageDescriptionFragment key={i} data={baggage} />
      ))}
      <div className="moreInfo">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href={replaceWithCurrentDomain(addDeepLink(mmbUrl, 'bags'))}
          onClick={addMoreBagsTraker}
        >
          <Translate t="smartfaq.baggage_info.go_to_mmb_baggage_section" />
        </a>
      </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
    }
  `,
);