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

// @flow

import * as React from 'react';
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 styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';

import type { CreateCommentMutationResponse } from '../../../SmartFAQ/mutations/__generated__/CreateCommentMutation.graphql';
import Box from '../../../SmartFAQ/common/Box';
import createComment from '../../../SmartFAQ/mutations/CreateComment';
import screenList from './screenList';
import commentTypeList from './commentTypeList';
import { events } from '../../../const/events';

type Props = {|
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
  articleId: number,
  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 CloseIcon = styled.div`
  position: absolute;
  top: ${defaultTheme.orbit.spaceXSmall};
  right: ${defaultTheme.orbit.spaceXSmall};
  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('');
  };

  onCreateComment = (response: CreateCommentMutationResponse) => {
    const { log } = this.context;
    const { changeScreen } = this.props;

    const isCommentLimitReached =
      response?.addFAQArticleComment?.isRateLimitExhausted;

    if (!isCommentLimitReached) {
      changeScreen(screenList.THANK_YOU);
      return;
    }

    log(events.COMMENT_LIMIT_REACHED, {});
    changeScreen(screenList.COMMENT_LIMIT_REACHED);
  };

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

    createComment({
      articleId,
      type: commentTypeValues[commentType],
      comment,
    })
      .then(this.onCreateComment)
      .catch(error => {
        log(events.FAQ_FEEDBACK_ERROR, { error });
        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}>
          <CloseIcon
            className="close-icon"
            onClick={this.handleCloseScreen}
            onKeyUp={null}
            tabIndex="-1"
            role="button"
          >
            <Close customColor="#bac7d5" size="small" />
          </CloseIcon>
          <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>
      </Box>
    );
  }
}

export default ScreenAdditionalFeedback;