@kiwicom/smart-faq/src/ContactFormChat/Banner.js

// @flow

import * as React from 'react';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Alert, Stack, Button } from '@kiwicom/orbit-components';
import Text from '@kiwicom/nitro/lib/components/Text';
import IntlContext from '@kiwicom/nitro/lib/services/intl/context';
import KiwicomGuarantee from '@kiwicom/orbit-components/lib/icons/KiwicomGuarantee';
import Chat from '@kiwicom/orbit-components/lib/icons/Chat';

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

const UnwrappedBanner = ({ intl }) => (
  <Alert
    type="info"
    icon={<KiwicomGuarantee />}
    title={intl.translate(__('smartfaq.contactFormChat.banner.title'))}
    closable={false}
  >
    <Stack spacing="compact">
      <Text t="smartfaq.contactFormChat.banner.description" />
      <GuaranteeChatWrapper
        eventSource="contactForm"
        elementId="guaranteeChatContacts"
      >
        {({ isChatReady, onClickDisplayChat }: RenderButtonProps) => {
          return (
            <Button
              type="info"
              size="small"
              iconLeft={<Chat />}
              disabled={!isChatReady}
              onClick={onClickDisplayChat}
            >
              <Translate t="smartfaq.contactFormChat.banner.open_chat" />
            </Button>
          );
        }}
      </GuaranteeChatWrapper>
    </Stack>
  </Alert>
);

const Banner = () => {
  const intl = React.useContext(IntlContext);

  return (
    <>
      <UnwrappedBanner intl={intl} />
      <LogMount
        subCategory="BookingOverview"
        action="chatDisplayed"
        props={{ where: 'contactForm' }}
      />
    </>
  );
};

export default Banner;