@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 styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';

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

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

const ChatButtonWrapper = styled.div`
  margin-top: ${defaultTheme.orbit.spaceMedium};
  margin-bottom: ${defaultTheme.orbit.spaceXXLarge};
`;

export const GuaranteeChatButton = ({
  isChatReady,
  onClickDisplayChat,
}: Props) => (
  <>
    <Text t="smartfaq.guarantee_chat.description" />
    <ChatButtonWrapper>
      <Button
        type="secondary"
        size="normal"
        icon={<Chat />}
        disabled={!isChatReady}
        onClick={onClickDisplayChat}
        dataTest="guaranteeChatButton"
      >
        <Translate t="smartfaq.guarantee_chat.button" />
      </Button>
    </ChatButtonWrapper>
    <LogMount
      subCategory="GuaranteeChat"
      action="chatDisplayed"
      props={{ where: 'smartFAQ' }}
    />
  </>
);

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

export default GuaranteeChat;