@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/ScreenAdditionalFeedback.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import Heading from '@kiwicom/orbit-components/lib/Heading';
import Button from '@kiwicom/orbit-components/lib/Button';
import Textarea from '@kiwicom/orbit-components/lib/Textarea';
import Close from '@kiwicom/orbit-components/lib/icons/Close';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';

import Box from '../../../SmartFAQ/common/Box';
import createComment from '../../../SmartFAQ/mutations/CreateCommentMutation';
import screenList from './screenList';
import commentTypeList from './commentTypeList';
import { events } from '../../../const/events';

type Props = {|
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
  articleId: string,
  commentType: string,
  setCommentType: string => void,
|};

type State = {|
  comment: string,
|};

const commentTypeValues = {
  [commentTypeList.DONT_LIKE]: 'DONT_LIKE',
  [commentTypeList.CONFUSING]: 'CONFUSING',
  [commentTypeList.NOT_ACCURATE]: 'NOT_ACCURATE',
  [commentTypeList.DOESNT_ANSWER]: 'DOESNT_ANSWER',
};

const style = css`
  div.close-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
  }
`;

class ScreenAdditionalFeedback extends React.Component<Props, State> {
  context: LogContextType;

  static contextType = LogContext;

  state = {
    comment: '',
  };

  handleChange = (e: SyntheticInputEvent<HTMLTextAreaElement>) => {
    this.setState({ comment: e.target.value });
  };

  handleCloseScreen = () => {
    this.props.changeScreen(screenList.VOTING);
    this.props.setCommentType('');
  };

  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { log } = this.context;
    const { comment } = this.state;
    const { changeScreen, articleId, commentType, setCommentType } = this.props;

    createComment(
      articleId,
      commentTypeValues[commentType],
      comment,
      () => changeScreen(screenList.THANK_YOU),
      () => {
        log(events.COMMENT_LIMIT_REACHED, {});
        changeScreen(screenList.COMMENT_LIMIT_REACHED);
      },
      () => changeScreen(screenList.ERROR),
    );
    log(events.FAQ_FEEDBACK_SUBMIT, {
      comment: commentType,
      commentText: comment,
    });
    setCommentType('');
  };

  render() {
    const { comment } = this.state;

    return (
      <Box
        border="none"
        padding="40px 24px 24px 24px"
        borderRadius="4px"
        backgroundColor="#f5f7f9"
      >
        <form onSubmit={this.handleSubmit}>
          <div
            className="close-icon"
            onClick={this.handleCloseScreen}
            onKeyUp={null}
            tabIndex="-1"
            role="button"
          >
            <Close customColor="#bac7d5" size="small" />
          </div>
          <Stack>
            <Heading type="title3">
              <Translate t="smartfaq.article_feedback.additional_feedback.title" />
            </Heading>
            <IntlConsumer>
              {intl => (
                <div className="inputArea">
                  <Textarea
                    value={comment}
                    onChange={this.handleChange}
                    placeholder={intl.translate(
                      __(
                        'smartfaq.article_feedback.additional_feedback.textarea_placeholder',
                      ),
                    )}
                    label={intl.translate(
                      __(
                        'smartfaq.article_feedback.additional_feedback.subtitle',
                      ),
                    )}
                  />
                </div>
              )}
            </IntlConsumer>
            <Button submit>
              <Translate t="smartfaq.article_feedback.additional_feedback.submit_button" />
            </Button>
          </Stack>
        </form>
        <style jsx>{style}</style>
      </Box>
    );
  }
}

export default ScreenAdditionalFeedback;