@kiwicom/smart-faq/src/shared/GuaranteeChat/GuaranteeChatWrapper.js

// @flow

import * as React from 'react';
import { Prompt } from 'react-router-dom';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import styled from 'styled-components';

import * as chatUtils from './utils';
import type {
  ChatConfig,
  GuaranteeChatBookingInfo,
} from '../context/GuaranteeChatInfo';
import { GuaranteeChatContext } from '../context/GuaranteeChatInfo';
import { events } from '../../const/events';
import type { log } from '../../const/events';

export type RenderButtonProps = {|
  isChatReady: boolean,
  onClickDisplayChat: () => void,
|};

const GuaranteeChatIframe = styled.div`
  width: auto;
  height: ${props => (props.open ? '500px' : 'auto')};
`;

type ContainerProps = {|
  withPrompt?: boolean,
  eventSource: 'smartFAQ' | 'contactForm',
  elementId: string,
  children: (props: RenderButtonProps) => React.Node,
|};

type Props = {|
  ...ContainerProps,
  guaranteeChatBookingInfo: ?GuaranteeChatBookingInfo,
  chatConfig: ChatConfig,
  isChatActive: boolean,
  toggleIsChatActive: (isChatActive: boolean) => void,
  log: log,
|};

type State = {|
  showButton: boolean,
  isChatReady: boolean,
|};

class GuaranteeChatWrapper extends React.Component<Props, State> {
  state = {
    showButton: true,
    isChatReady: false,
  };

  async componentDidMount() {
    if (typeof window !== 'object') {
      return;
    }

    const { chatConfig, elementId } = this.props;
    await chatUtils.initialize(chatConfig, elementId);
    window.webchat.chatEnded = this.onChatEnded;

    this.setState({ isChatReady: true });

    if (window.webchat.isAutoJoined()) {
      this.props.toggleIsChatActive(true);

      this.setState({ showButton: false });
    }
  }

  componentWillUnmount() {
    this.props.toggleIsChatActive(false);
  }

  onClickDisplayChat = () => {
    this.setState({ showButton: false });

    if (!window.webchat) {
      throw new Error('Unexpected: webchat not initialized.');
    }

    const {
      guaranteeChatBookingInfo,
      log,
      eventSource,
      elementId,
      toggleIsChatActive,
    } = this.props;

    chatUtils.setData(window.webchat, guaranteeChatBookingInfo);
    log(events.GUARANTEE_CHAT_OPENED, { where: eventSource });
    window.webchat.renderFrame({ containerEl: elementId });
    toggleIsChatActive(true);
  };

  onChatEnded = () => {
    this.props.toggleIsChatActive(false);
  };

  render() {
    const { showButton, isChatReady } = this.state;
    const { isChatActive } = this.props;

    return (
      <>
        {showButton &&
          this.props.children({
            isChatReady,
            onClickDisplayChat: this.onClickDisplayChat,
          })}
        <GuaranteeChatIframe
          id={this.props.elementId}
          open={!showButton}
          data-cy="guaranteeChatIFrame"
        />
        {this.props.withPrompt && (
          <IntlConsumer>
            {intl => (
              <Prompt
                when={isChatActive}
                message={intl.translate(
                  __('smartfaq.guarantee_chat.confirmation'),
                )}
              />
            )}
          </IntlConsumer>
        )}
      </>
    );
  }
}

export const GuaranteeChatWrapperRaw = GuaranteeChatWrapper;

const WrappedGuaranteeChat = (props: ContainerProps) => {
  const {
    guaranteeChatBookingInfo,
    chatConfig,
    isChatActive,
    toggleIsChatActive,
  } = React.useContext(GuaranteeChatContext);
  const { log } = React.useContext(LogContext);

  return (
    <GuaranteeChatWrapper
      {...props}
      log={log}
      guaranteeChatBookingInfo={guaranteeChatBookingInfo}
      chatConfig={chatConfig}
      isChatActive={isChatActive}
      toggleIsChatActive={toggleIsChatActive}
    />
  );
};

export default WrappedGuaranteeChat;