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

Smart FAQ

// @flow

import * as React from 'react';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Alert, Stack, Button, Text } from '@kiwicom/orbit-components';
import { Consumer as IntlConsumer } 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 {
  LogladyTracker,
  EnterTracker,
} from '../shared/helpers/analytics/trackers';
import GuaranteeChatWrapper from '../shared/GuaranteeChat/GuaranteeChatWrapper';
import type { RenderButtonProps } from '../shared/GuaranteeChat/GuaranteeChatWrapper';

const UnwrappedBanner = ({ intl }) => (
  <Alert
    type="info"
    icon={<KiwicomGuarantee />}
    title={intl.translate(__('smartfaq.contactFormChat.banner.title'))}
    closable={false}
  >
    <Stack spacing="compact">
      <Text>
        <Translate t={__('smartfaq.contactFormChat.banner.description')} />
      </Text>
      <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 = () => (
  <IntlConsumer>{intl => <UnwrappedBanner intl={intl} />}</IntlConsumer>
);

const LogladyTrackedBanner = LogladyTracker(
  Banner,
  'BookingOverview',
  'chatDisplayed',
  () => ({
    where: 'contactForm',
  }),
);

const EnterTrackedBanner = EnterTracker(
  LogladyTrackedBanner,
  'smartFAQBookingOverview',
  () => ({
    action: 'chatDisplayed',
    where: 'contactForm',
  }),
);

export default EnterTrackedBanner;