@kiwicom/smart-faq/src/SmartFAQ/common/buttons/CloseButton.js

Smart FAQ

// @flow

import * as React from 'react';
import { Close } from '@kiwicom/orbit-components/lib/icons';

import CloseContext from '../../context/Close';
import { GuaranteeChatContext } from '../../../shared/context/GuaranteeChatInfo';

type Props = {
  onClick: () => void,
};

const getOnClose = (onClick, isChatActive) => () => {
  if (isChatActive) {
    const canClose = window.confirm(
      'Closing this window will cause the chat connection to be interrupted, do you want to proceed?',
    );

    if (!canClose) {
      return;
    }
  }

  onClick();
};

const CloseIcon = ({ onClick }: Props) => (
  <div
    className="close-icon"
    onKeyUp={onClick}
    onClick={onClick}
    role="button"
    tabIndex="-1"
  >
    <Close customColor="#46515e" size="medium" />
    <style jsx>
      {`
        div.close-icon {
          position: absolute;
          top: 12px;
          right: 12px;
          padding: 8px;
          cursor: pointer;
        }
      `}
    </style>
  </div>
);

const CloseButton = () => (
  <GuaranteeChatContext.Consumer>
    {({ isChatActive }) => (
      <CloseContext.Consumer>
        {(onClose: () => void) => (
          <CloseIcon onClick={getOnClose(onClose, isChatActive)} />
        )}
      </CloseContext.Consumer>
    )}
  </GuaranteeChatContext.Consumer>
);

export default CloseButton;