@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleDetail/GuaranteeChat.js

// @flow

import * as React from 'react';
import Button from '@kiwicom/orbit-components/lib/Button';
import Text from '@kiwicom/nitro/lib/components/Text';
import Chat from '@kiwicom/orbit-components/lib/icons/Chat';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import GuaranteeChatWrapper from '../../GuaranteeChat/GuaranteeChatWrapper';
import type { RenderButtonProps } from '../../GuaranteeChat/GuaranteeChatWrapper';
import LogMount from '../../cuckoo/components/LogMount';

type Props = {
  isChatReady: boolean,
  onClickDisplayChat: () => void,
};

export const GuaranteeChatButton = ({
  isChatReady,
  onClickDisplayChat,
}: Props) => (
  <React.Fragment>
    <Text t="smartfaq.guarantee_chat.description" />
    <div className="chatButton">
      <Button
        type="secondary"
        size="normal"
        icon={<Chat />}
        disabled={!isChatReady}
        onClick={onClickDisplayChat}
        dataTest="guaranteeChatButton"
      >
        <Translate t="smartfaq.guarantee_chat.button" />
      </Button>
    </div>
    <LogMount
      subCategory="GuaranteeChat"
      action="chatDisplayed"
      props={{ where: 'smartFAQ' }}
    />
    <style jsx>
      {`
        .chatButton {
          margin-top: 16px;
          margin-bottom: 40px;
        }
      `}
    </style>
  </React.Fragment>
);

const GuaranteeChat = () => (
  <GuaranteeChatWrapper
    eventSource="smartFAQ"
    elementId="guaranteeChatFAQ"
    withPrompt
  >
    {({ isChatReady, onClickDisplayChat }: RenderButtonProps) => (
      <GuaranteeChatButton
        isChatReady={isChatReady}
        onClickDisplayChat={onClickDisplayChat}
      />
    )}
  </GuaranteeChatWrapper>
);

export default GuaranteeChat;