@kiwicom/smart-faq/src/SmartFAQ/common/FullFAQLink.js

// @flow

import * as React from 'react';
import { NewWindow } from '@kiwicom/orbit-components/lib/icons';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import css from 'styled-jsx/css';

import { events } from '../../const/events';
import LogClick from '../../components/Log/LogClick';
import type { log } from '../../const/events';

const style = css`
  div.open-icon {
    display: inline-block;
    vertical-align: 1px;
    margin-left: 4px;
  }

  a {
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
  }

  .primary {
    color: #00a991;
  }
`;

type OwnProps = {|
  className?: string,
|};

type Props = {|
  ...OwnProps,
  log: log,
|};

const FullFAQLink = (props: Props) => (
  <React.Fragment>
    <LogClick event={events.FAQ_OLD_HELP}>
      {({ onClick }) => (
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="/helpcenter"
          className={props.className}
          onClick={onClick}
        >
          <Translate t="smartfaq.full_faq_link" />
          <span className="inline-icon">
            <div className="open-icon">
              <NewWindow
                customColor={
                  props.className === 'primary' ? '#00a991' : '#171b1e'
                }
                size="small"
              />
            </div>
          </span>
        </a>
      )}
    </LogClick>
    <style jsx>{style}</style>
  </React.Fragment>
);

const WrappedFullFAQLink = (props: OwnProps) => {
  const { log } = React.useContext(LogContext);

  return <FullFAQLink {...props} log={log} />;
};

export default WrappedFullFAQLink;