@cxco/ui-faq/lib/views/feedback.js

FAQ Module using @cxco default packages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FeedbackArea = exports.FeedbackButtons = exports.FeedbackMessage = exports.Feedback = void 0;

var _hyperapp = require("hyperapp");

// eslint-disable-line no-unused-vars

/**
 * Feedback Wrapper Component
 */
var Feedback = function Feedback(_ref) {
  var faq = _ref.faq;
  return function (state, actions) {
    if (state.showFeedback && faq.feedback && Object.keys(faq.feedback).length > 0) {
      return (0, _hyperapp.h)("div", {
        key: "faq-".concat(faq.id, "-feedback")
      }, (0, _hyperapp.h)("div", {
        class: "cxco-c-divider"
      }), (0, _hyperapp.h)(FeedbackMessage, {
        faq: faq
      }), (0, _hyperapp.h)(FeedbackButtons, {
        faq: faq
      }), (0, _hyperapp.h)(FeedbackArea, {
        faq: faq
      }));
    }
  };
};
/**
 * Feedback Welcome and Thanks message
 * @param {Object} param0 faq
 */


exports.Feedback = Feedback;

var FeedbackMessage = function FeedbackMessage(_ref2) {
  var faq = _ref2.faq;
  return function (state, actions) {
    var _faq$feedback;

    if ((_faq$feedback = faq.feedback) === null || _faq$feedback === void 0 ? void 0 : _faq$feedback.message) {
      return (0, _hyperapp.h)("label", {
        class: "cxco-u-fs-small"
      }, faq.feedback.message);
    }
  };
};

exports.FeedbackMessage = FeedbackMessage;

var FeedbackButtons = function FeedbackButtons(_ref3) {
  var faq = _ref3.faq;
  return function (state, actions) {
    function feedbackClick(score) {
      faq.feedback.score = score;
      faq.feedback.label = score > 0 ? state.feedback.positive : state.feedback.negative;
      faq.feedback.comment = '';
      actions.feedbackClick(faq);
    }

    if (!faq.feedback.sent) {
      return (0, _hyperapp.h)("div", {
        class: "cxco-o-buttongroup"
      }, (0, _hyperapp.h)("div", {
        class: "cxco-o-buttongroup__item"
      }, (0, _hyperapp.h)("button", {
        onclick: function onclick(e) {
          return feedbackClick(1);
        },
        class: "cxco-c-button cxco-c-button--small cxco-c-button--outlined"
      }, state.feedback.positive)), (0, _hyperapp.h)("div", {
        class: "cxco-o-buttongroup__item"
      }, (0, _hyperapp.h)("button", {
        onclick: function onclick(e) {
          return feedbackClick(-1);
        },
        class: "cxco-c-button cxco-c-button--small cxco-c-button--outlined",
        "data-state": "".concat(faq.feedback.shouldShowTextarea ? 'selected' : '')
      }, state.feedback.negative)));
    }
  };
};

exports.FeedbackButtons = FeedbackButtons;

var FeedbackArea = function FeedbackArea(_ref4) {
  var faq = _ref4.faq;
  return function (state, actions) {
    var _faq$feedback2;

    var comment = '';

    function feedbackClick(score) {
      faq.feedback.score = score;
      faq.feedback.label = score > 0 ? state.feedback.positive : state.feedback.negative;
      faq.feedback.comment = comment;
      actions.feedbackClick(faq);
    }

    function updateFaqFeedbackComment(e) {
      comment = e.target.value;
    }

    if ((_faq$feedback2 = faq.feedback) === null || _faq$feedback2 === void 0 ? void 0 : _faq$feedback2.shouldShowTextarea) {
      return (0, _hyperapp.h)("div", null, (0, _hyperapp.h)("textarea", {
        class: "cxco-c-input cxco-u-fs-small",
        oninput: function oninput(e) {
          return updateFaqFeedbackComment(e);
        },
        placeholder: state.feedback.placeholder
      }), (0, _hyperapp.h)("button", {
        onclick: function onclick(e) {
          return feedbackClick(-1);
        },
        class: "cxco-c-button cxco-c-button--small cxco-c-button--outlined"
      }, state.feedback.submit));
    }
  };
};

exports.FeedbackArea = FeedbackArea;