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

Smart FAQ

// @flow

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

import { LogladyTracker, EnterTracker } from '../../helpers/analytics/trackers';
import GuaranteeChatWrapper from '../../GuaranteeChat/GuaranteeChatWrapper';
import type { RenderButtonProps } from '../../GuaranteeChat/GuaranteeChatWrapper';

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

export const GuaranteeChatButton = ({
  isChatReady,
  onClickDisplayChat,
}: Props) => (
  <React.Fragment>
    <Text>
      <Translate t={__('smartfaq.guarantee_chat.description')} />
    </Text>
    <div className="chatButton">
      <Button
        type="secondary"
        size="normal"
        icon={<Chat />}
        disabled={!isChatReady}
        onClick={onClickDisplayChat}
        dataTest="guaranteeChatButton"
      >
        <Translate t={__('smartfaq.guarantee_chat.button')} />
      </Button>
    </div>
    <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>
);

const LogladyTrackedGuaranteeChat = LogladyTracker(
  GuaranteeChat,
  'GuaranteeChat',
  'chatDisplayed',
  () => ({
    where: 'smartFAQ',
  }),
);

const EnterTrackedGuaranteeChat = EnterTracker(
  LogladyTrackedGuaranteeChat,
  'smartFAQBookingOverview',
  () => ({
    action: 'chatDisplayed',
    where: 'smartFAQ',
  }),
);

export default EnterTrackedGuaranteeChat;