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

Smart FAQ

// @flow

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

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

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

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

const style = css`
  div.initial-screen {
    display: flex;
    align-items: center;
  }
  p.question {
    font-size: 14px;
    margin-right: 10px;
    color: #46515e;
  }
`;

const ScreenVoting = (props: Props) => {
  const handleVote = vote => {
    const { articleId, changeScreen } = 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),
    );

    simpleTracker('smartFAQCategories', { action });
    track('FAQs', action);
  };

  return (
    <div className="initial-screen">
      <p className="question">
        <Translate t={__('smartfaq.article_feedback.voting.title')} />
      </p>
      <span className="thumb-up">
        <ButtonLink
          onClick={() => handleVote(voteType.UP)}
          iconLeft={<ThumbUp size="medium" />}
        >
          <p>
            <Translate t={__('smartfaq.article_feedback.voting.yes')} />
          </p>
        </ButtonLink>
      </span>
      <span className="thumb-down">
        <ButtonLink
          onClick={() => handleVote(voteType.DOWN)}
          iconLeft={<ThumbDown size="medium" />}
        >
          <p>
            <Translate t={__('smartfaq.article_feedback.voting.no')} />
          </p>
        </ButtonLink>
      </span>
      <style jsx>{style}</style>
    </div>
  );
};

export default ScreenVoting;