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

// @flow

import * as React from 'react';
import Text from '@kiwicom/nitro/lib/components/Text';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import { ThumbUp, ThumbDown } from '@kiwicom/orbit-components/lib/icons';

import screenList from './screenList';
import voteArticle from '../../../SmartFAQ/mutations/VoteArticleMutation';
import { track } from '../../cuckoo/tracker';

type Props = {|
  articleId: string,
  changeScreen: (nextScreen: string) => void,
|};

const voteType = {
  UP: 'up',
  DOWN: 'down',
};

class ScreenVoting extends React.Component<Props> {
  handleVoteUp = () => {
    this.handleVote(voteType.UP);
  };

  handleVoteDown = () => {
    this.handleVote(voteType.DOWN);
  };

  handleVote = (vote: string) => {
    const { articleId, changeScreen } = this.props;
    const screen =
      vote === voteType.UP ? screenList.THANK_YOU : screenList.FEEDBACK;
    const action = vote === voteType.UP ? 'upVote' : 'downVote';

    voteArticle(
      articleId,
      vote,
      () => changeScreen(screen),
      () => changeScreen(screen),
    );

    track('FAQs', action);
  };

  render() {
    return (
      <Stack flex align="center">
        <Text t="smartfaq.article_feedback.voting.title" />
        <ButtonLink
          onClick={this.handleVoteUp}
          iconLeft={<ThumbUp size="medium" />}
          dataTest="thumbUp"
        >
          <Translate t="smartfaq.article_feedback.voting.yes" />
        </ButtonLink>
        <ButtonLink
          onClick={this.handleVoteDown}
          iconLeft={<ThumbDown size="medium" />}
          dataTest="thumbDown"
        >
          <Translate t="smartfaq.article_feedback.voting.no" />
        </ButtonLink>
      </Stack>
    );
  }
}

export default ScreenVoting;