@kiwicom/smart-faq/lib/StaticFAQ/ArticleFeedback/ScreenVoting.js

Smart FAQ

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var React = _interopRequireWildcard(require("react"));

var _icons = require("@kiwicom/orbit-components/lib/icons");

var _Text = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Text"));

var _screenList = _interopRequireDefault(require("./screenList"));

var _VoteArticleMutation = _interopRequireDefault(require("../../mutations/VoteArticleMutation"));

var _trackers = require("../../helpers/analytics/trackers");

// @flow
var voteType = {
  UP: 'up',
  DOWN: 'down'
};
var style = new String("div.initial-screen{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}p.question{font-size:14px;color:#46515e;}div.feedback-button{color:#00a991;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}div.feedback-button p{margin-left:9px;font-size:14px;}div.feedback-button.thumb-up{margin-left:23px;}div.feedback-button.thumb-down{margin-left:28px;}");
style.__hash = "1864533880";
style.__scoped = "div.initial-screen.jsx-1712138937{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}p.question.jsx-1712138937{font-size:14px;color:#46515e;}div.feedback-button.jsx-1712138937{color:#00a991;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}div.feedback-button.jsx-1712138937 p.jsx-1712138937{margin-left:9px;font-size:14px;}div.feedback-button.thumb-up.jsx-1712138937{margin-left:23px;}div.feedback-button.thumb-down.jsx-1712138937{margin-left:28px;}";
style.__scopedHash = "1712138937";

var ScreenVoting = function ScreenVoting(props
/*: Props*/
) {
  var handleVote = function handleVote(vote) {
    var articleId = props.articleId,
        changeScreen = props.changeScreen;
    var screen = vote === voteType.UP ? _screenList.default.THANK_YOU : _screenList.default.FEEDBACK;
    var action = vote === voteType.UP ? 'upVote' : 'downVote';
    (0, _VoteArticleMutation.default)(articleId, vote, function () {
      return changeScreen(screen);
    }, function () {
      return changeScreen(screen);
    });
    (0, _trackers.simpleTracker)('smartFAQCategories', {
      action: action
    });
  };

  return React.createElement("div", {
    className: "jsx-".concat(style.__scopedHash) + " " + "initial-screen"
  }, React.createElement("p", {
    className: "jsx-".concat(style.__scopedHash) + " " + "question"
  }, React.createElement(_Text.default, {
    t: "smartfaq.article_feedback.voting.title"
  })), React.createElement("div", {
    role: "button",
    onClick: function onClick() {
      return handleVote(voteType.UP);
    },
    onKeyUp: function onKeyUp() {
      return handleVote(voteType.UP);
    },
    tabIndex: 0,
    className: "jsx-".concat(style.__scopedHash) + " " + "feedback-button thumb-up"
  }, React.createElement(_icons.ThumbUp, {
    size: "medium",
    customColor: "#00a991"
  }), React.createElement("p", {
    className: "jsx-".concat(style.__scopedHash)
  }, React.createElement(_Text.default, {
    t: "smartfaq.article_feedback.voting.yes"
  }))), React.createElement("div", {
    role: "button",
    onClick: function onClick() {
      return handleVote(voteType.DOWN);
    },
    onKeyUp: function onKeyUp() {
      return handleVote(voteType.DOWN);
    },
    tabIndex: 0,
    className: "jsx-".concat(style.__scopedHash) + " " + "feedback-button thumb-down"
  }, React.createElement(_icons.ThumbDown, {
    size: "medium",
    customColor: "#00a991"
  }), React.createElement("p", {
    className: "jsx-".concat(style.__scopedHash)
  }, React.createElement(_Text.default, {
    t: "smartfaq.article_feedback.voting.no"
  }))), React.createElement(_style.default, {
    styleId: style.__scopedHash,
    css: style.__scoped
  }));
};

var _default = ScreenVoting;
exports.default = _default;