@massds/mayflower-react/dist/FeedbackForm/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactCharacterCounter = _interopRequireDefault(require("react-character-counter"));

var _classnames = _interopRequireDefault(require("classnames"));

var _is = _interopRequireDefault(require("is"));

var _index = _interopRequireDefault(require("../Paragraph/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

// These components exist to make it clear in FeedbackForm's render what's going on.
var RefererField = function RefererField(props) {
  return /*#__PURE__*/_react["default"].createElement("input", _extends({
    type: "hidden"
  }, props));
};

var NodeIdField = function NodeIdField(props) {
  return /*#__PURE__*/_react["default"].createElement("input", _extends({
    type: "hidden"
  }, props));
}; // Required for jsonp responses to work.


var JsonPField = function JsonPField() {
  return /*#__PURE__*/_react["default"].createElement("input", {
    type: "hidden",
    name: "jsonp",
    value: 1
  });
}; // A hidden input field that prevents FormStack from looking for a required field that wasn't filled in.


var HiddenFields = function HiddenFields(props) {
  var formId = props.formId,
      rest = _objectWithoutPropertiesLoose(props, ["formId"]);

  return /*#__PURE__*/_react["default"].createElement("input", _extends({
    type: "hidden",
    name: "hidden_fields",
    id: "hidden_fields" + formId
  }, rest));
};

HiddenFields.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The form id that the hidden input will be rendered within. */
  formId: _propTypes["default"].number
} : {};

var FeedbackForm = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(FeedbackForm, _React$Component);

  function FeedbackForm() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "state", {
      yesText: '',
      noText: '',
      errorMessage: /*#__PURE__*/_react["default"].createElement(_index["default"], {
        className: "error"
      }, "Please go back and fill in any required fields (marked with an *)"),
      feedbackChoice: null,
      hasError: [],
      success: false,
      formSubmitted: false
    });

    _defineProperty(_assertThisInitialized(_this), "yesRadio", /*#__PURE__*/_react["default"].createRef());

    _defineProperty(_assertThisInitialized(_this), "yesTextArea", /*#__PURE__*/_react["default"].createRef());

    _defineProperty(_assertThisInitialized(_this), "noRadio", /*#__PURE__*/_react["default"].createRef());

    _defineProperty(_assertThisInitialized(_this), "noTextArea", /*#__PURE__*/_react["default"].createRef());

    _defineProperty(_assertThisInitialized(_this), "submitButton", /*#__PURE__*/_react["default"].createRef());

    _defineProperty(_assertThisInitialized(_this), "defaultDisclaimer", function () {
      return /*#__PURE__*/_react["default"].createElement("div", {
        id: "feedback-note",
        className: "ma__disclaimer"
      }, "We use your feedback to help us improve this site but we are not able to respond directly.", /*#__PURE__*/_react["default"].createElement("strong", null, "Please do not include personal or contact information."), ' ', "If you need a response, please locate the contact information elsewhere on this page or in the footer.");
    });

    _defineProperty(_assertThisInitialized(_this), "prefixLabel", function (id) {
      return "label" + id;
    });

    _defineProperty(_assertThisInitialized(_this), "prefixField", function (id) {
      return "field" + id;
    });

    _defineProperty(_assertThisInitialized(_this), "handleRadioChange", function (e) {
      if (e.currentTarget === _this.yesRadio.current) {
        return {
          feedbackChoice: true
        };
      }

      if (e.currentTarget === _this.noRadio.current) {
        return {
          feedbackChoice: false
        };
      }

      return {};
    });

    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
      var newState = {};
      e.persist();

      if (e.currentTarget === _this.yesRadio.current || e.currentTarget === _this.noRadio.current) {
        newState = Object.assign(newState, _this.handleRadioChange(e));
      }

      if (e.currentTarget === _this.yesTextArea.current) {
        newState = Object.assign(newState, {
          yesText: e.currentTarget.value
        });
      }

      if (e.currentTarget === _this.noTextArea.current) {
        newState = Object.assign(newState, {
          noText: e.currentTarget.value
        });
      } // If the form was previously submitted but the user made a new change, reset the form submitted status.


      if (_this.state.formSubmitted && Object.keys(newState).length > 0) {
        newState.formSubmitted = false;
        newState.success = false;
        newState.successMessage = '';
      }

      _this.setState(newState, _this.checkForErrors);
    });

    _defineProperty(_assertThisInitialized(_this), "removeError", function (errors, idToRemove) {
      return errors.filter(function (fieldId) {
        return !_is["default"].equal(fieldId, idToRemove);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "checkForErrors", function () {
      var hasError = [].concat(_this.state.hasError);
      var _this$props = _this.props,
          radioId = _this$props.radioId,
          noFeedbackId = _this$props.noFeedbackId;
      var _this$state = _this.state,
          feedbackChoice = _this$state.feedbackChoice,
          formSubmitted = _this$state.formSubmitted; // The user has not selected yes or no.

      if (!hasError.includes(radioId) && feedbackChoice === null) {
        hasError.push(radioId);
      }

      if (hasError.includes(radioId) && !_is["default"].nil(feedbackChoice)) {
        hasError = _this.removeError(hasError, radioId);
      } // The user has selected no but has not typed any feedback.


      if (!hasError.includes(noFeedbackId) && feedbackChoice === false && formSubmitted && _is["default"].empty(_this.noTextArea.current.value)) {
        hasError.push(noFeedbackId);
      } else if (hasError.includes(noFeedbackId) && feedbackChoice === false && !_is["default"].empty(_this.noTextArea.current.value)) {
        hasError = _this.removeError(hasError, noFeedbackId);
      } // If the user changed choices from no to yes, remove the error for no if there was one.


      if (feedbackChoice === true && hasError.includes(noFeedbackId)) {
        hasError = _this.removeError(hasError, noFeedbackId);
      } // Prevent calling setState too often while typing in textareas.


      if (!_is["default"].equal(hasError, _this.state.hasError)) {
        _this.setState({
          hasError: hasError
        });
      }

      return hasError;
    });

    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (e) {
      e.preventDefault(); // Update the component state to know that the form was just submitted,
      // then check the form for any errors based on this new state.

      _this.setState({
        formSubmitted: true
      }, function () {
        // checkForErrors doesn't immediately update state, so it returns what this.state.hasError is being set to.
        var errors = _this.checkForErrors(); // If no remaining errors, submit form.
        // Since we have to use jsonp and this component could be used with server side rendering, ensure that window exists.


        if (window && _is["default"].array.empty(errors)) {
          Promise.resolve().then(function () {
            return _interopRequireWildcard(require("b-jsonp"));
          }).then(function (module) {
            var jsonp = module["default"];
            var form = document.getElementById("fsForm" + _this.props.formId);
            var data = new FormData(form);
            var body = {};
            new Map(data.entries()).forEach(function (value, key) {
              body[key] = value;
            }); // This library leaves behind the script added by formstack in the head of the document.
            // Any errors are handled by onSubmitError and the response is handled through onPostSubmit.
            // jsonp requires you to pass a function for the last param though.

            jsonp('https://www.formstack.com/forms/index.php', body, {
              prefix: "form" + _this.props.formId,
              name: 'onPostSubmit'
            }, function () {});
          });
        }
      });
    });

    return _this;
  }

  var _proto = FeedbackForm.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    if (window) {
      // We don't have the FormStack class available, but we can fake like we do:
      window["form" + this.props.formId] = {
        onSubmitError: function onSubmitError(err) {
          if (err) {
            _this2.setState(function (state, props) {
              var hasError = [].concat(state.hasError);
              hasError.push(props.radioId);
              hasError.push(props.noFeedbackId);

              var errorMessage = /*#__PURE__*/_react["default"].createElement(_index["default"], {
                className: "error"
              }, err.error);

              return {
                hasError: hasError,
                errorMessage: errorMessage
              };
            });
          }
        },
        onPostSubmit: function onPostSubmit() {
          _this2.setState({
            success: true
          });
        }
      };
    }
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        yesFeedbackId = _this$props2.yesFeedbackId,
        yesDisclaimer = _this$props2.yesDisclaimer,
        noFeedbackId = _this$props2.noFeedbackId,
        noDisclaimer = _this$props2.noDisclaimer,
        refererId = _this$props2.refererId,
        formId = _this$props2.formId,
        formRef = _this$props2.formRef,
        radioId = _this$props2.radioId,
        nodeId = _this$props2.nodeId,
        successMessage = _this$props2.successMessage;
    var _this$state2 = this.state,
        hasError = _this$state2.hasError,
        success = _this$state2.success,
        feedbackChoice = _this$state2.feedbackChoice,
        formSubmitted = _this$state2.formSubmitted,
        noText = _this$state2.noText,
        yesText = _this$state2.yesText,
        errorMessage = _this$state2.errorMessage;
    var yesId = this.prefixField(yesFeedbackId);
    var noId = this.prefixField(noFeedbackId);
    var formProps = {
      id: "fsForm" + formId,
      method: 'post',
      className: 'formForm',
      onSubmit: this.handleSubmit,
      action: 'https://www.formstack.com/forms/index.php',
      encType: 'multipart/form-data'
    }; // Allows other components to have direct access to the form element.

    if (formRef) {
      formProps.ref = formRef;
    }

    var refererProps = {
      id: this.prefixField(refererId),
      name: this.prefixField(refererId),
      size: '50',
      value: window.location.href,
      className: 'fsField'
    };
    var yesFieldSetClassNames = (0, _classnames["default"])({
      'radio-yes': true,
      error: hasError.includes(yesFeedbackId)
    });
    var noFieldSetClassNames = (0, _classnames["default"])({
      'radio-no': true,
      error: hasError.includes(noFeedbackId)
    });
    var noTextAreaClassNames = (0, _classnames["default"])({
      'fsField required': true,
      error: hasError.includes(noFeedbackId)
    });
    var radiosClassNames = hasError.includes(radioId) ? 'error' : null;
    var messsageClassNames = (0, _classnames["default"])({
      messages: true,
      hide: success === false && _is["default"].array.empty(hasError)
    });
    var messageStyle = {
      fontWeight: 'bold'
    };

    if (!_is["default"].array.empty(hasError)) {
      messageStyle.color = 'red';
    }

    var characterCounterProps = {
      maxLength: 10000,
      wrapperStyle: {
        display: 'block',
        fontSize: '17px',
        lineHeight: '1.625rem',
        textAlign: 'right'
      },
      characterCounterStyle: {
        position: 'relative',
        display: 'block',
        bottom: '32px',
        right: '5px',
        top: 'auto',
        fontSize: '1rem',
        fontWeight: 400,
        lineHeight: '1.625rem'
      },
      overrideStyle: true
    };
    return success && formSubmitted ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__feedback-form",
      "data-mass-feedback-form": true
    }, /*#__PURE__*/_react["default"].createElement("h2", {
      className: "visually-hidden"
    }, "Feedback"), /*#__PURE__*/_react["default"].createElement("form", _extends({
      noValidate: true
    }, formProps), /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
      className: messsageClassNames,
      style: messageStyle
    }, _is["default"].fn(successMessage) && successMessage())))) : /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__feedback-form",
      "data-mass-feedback-form": true
    }, /*#__PURE__*/_react["default"].createElement("h2", {
      className: "visually-hidden"
    }, "Feedback"), /*#__PURE__*/_react["default"].createElement("form", _extends({
      noValidate: true
    }, formProps), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      name: "form",
      value: formId
    }), /*#__PURE__*/_react["default"].createElement(JsonPField, null), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      name: "viewkey",
      value: "vx39GBYJhi"
    }), feedbackChoice === true && /*#__PURE__*/_react["default"].createElement(HiddenFields, {
      formId: formId,
      value: noId
    }), feedbackChoice === false && /*#__PURE__*/_react["default"].createElement(HiddenFields, {
      formId: formId,
      value: yesId
    }), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      name: "_submit",
      value: "1"
    }), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      name: "style_version",
      value: "3"
    }), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      id: "viewparam",
      name: "viewparam",
      value: "524744"
    }), /*#__PURE__*/_react["default"].createElement(RefererField, refererProps), /*#__PURE__*/_react["default"].createElement(NodeIdField, {
      id: "field58154059",
      name: "field58154059",
      value: nodeId
    }), /*#__PURE__*/_react["default"].createElement(NodeIdField, {
      id: "field57432673",
      name: "field57432673",
      value: nodeId
    }), /*#__PURE__*/_react["default"].createElement("fieldset", {
      className: radiosClassNames
    }, /*#__PURE__*/_react["default"].createElement("legend", {
      className: "fsLabel requiredLabel fsLabelVertical"
    }, "Did you find what you were looking for on this webpage?", /*#__PURE__*/_react["default"].createElement("span", null, ' ', "*", /*#__PURE__*/_react["default"].createElement("span", {
      className: "visually-hidden"
    }, "required"))), /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__input-group__items ma__input-group__items--inline"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__input-group__item"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "ma__input-radio"
    }, /*#__PURE__*/_react["default"].createElement("input", {
      className: "fsField required",
      id: this.prefixField(radioId) + "_1",
      onChange: this.handleChange,
      ref: this.yesRadio,
      name: this.prefixField(radioId),
      type: "radio",
      value: "Yes"
    }), /*#__PURE__*/_react["default"].createElement("label", {
      className: "fsOptionLabel ma__input-radio__label",
      htmlFor: this.prefixField(radioId) + "_1"
    }, "Yes"))), /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__input-group__item"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "ma__input-radio"
    }, /*#__PURE__*/_react["default"].createElement("input", {
      className: "fsField required",
      id: this.prefixField(radioId) + "_2",
      onChange: this.handleChange,
      ref: this.noRadio,
      name: this.prefixField(radioId),
      type: "radio",
      value: "No"
    }), /*#__PURE__*/_react["default"].createElement("label", {
      className: "fsOptionLabel ma__input-radio__label",
      htmlFor: this.prefixField(radioId) + "_2"
    }, "No"))))), feedbackChoice === false && /*#__PURE__*/_react["default"].createElement("fieldset", {
      className: noFieldSetClassNames
    }, /*#__PURE__*/_react["default"].createElement("label", {
      htmlFor: noId
    }, "If \"No,\" please tell us what you were looking for:", /*#__PURE__*/_react["default"].createElement("span", null, ' ', "*", /*#__PURE__*/_react["default"].createElement("span", {
      className: "visually-hidden"
    }, "required"))), /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__textarea__wrapper"
    }, /*#__PURE__*/_react["default"].createElement(_reactCharacterCounter["default"], _extends({
      value: noText
    }, characterCounterProps), /*#__PURE__*/_react["default"].createElement("textarea", {
      id: noId,
      ref: this.noTextArea,
      onChange: this.handleChange,
      className: noTextAreaClassNames,
      name: noId,
      "aria-required": "true",
      maxLength: "10000",
      disabled: feedbackChoice === false ? null : 'disabled',
      "aria-describedby": "feedback-note"
    }))), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      id: yesId,
      name: yesId,
      value: ""
    }), /*#__PURE__*/_react["default"].createElement("span", null, _is["default"].fn(noDisclaimer) ? noDisclaimer() : this.defaultDisclaimer())), feedbackChoice === true && /*#__PURE__*/_react["default"].createElement("fieldset", {
      className: yesFieldSetClassNames
    }, /*#__PURE__*/_react["default"].createElement("label", {
      htmlFor: yesId
    }, "Is there anything else you would like to tell us?"), /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__textarea__wrapper"
    }, /*#__PURE__*/_react["default"].createElement(_reactCharacterCounter["default"], _extends({
      value: yesText
    }, characterCounterProps), /*#__PURE__*/_react["default"].createElement("textarea", {
      ref: this.yesTextArea,
      onChange: this.handleChange,
      id: yesId,
      name: yesId,
      maxLength: "10000",
      disabled: feedbackChoice === true ? null : 'disabled',
      "aria-describedby": "feedback-note2"
    }))), /*#__PURE__*/_react["default"].createElement("input", {
      type: "hidden",
      id: noId,
      name: noId,
      value: ""
    }), /*#__PURE__*/_react["default"].createElement("span", null, _is["default"].fn(yesDisclaimer) ? yesDisclaimer() : this.defaultDisclaimer())), /*#__PURE__*/_react["default"].createElement("fieldset", {
      className: "ma_feedback-fieldset ma__mass-feedback-form__form--submit-wrapper"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: messsageClassNames,
      style: messageStyle
    }, success === false && errorMessage), /*#__PURE__*/_react["default"].createElement("input", {
      id: "submitButton2521317",
      ref: this.submitButton,
      className: "submitButton ma__button ma__button--small",
      style: {
        display: 'block'
      },
      type: "submit",
      value: "Send Feedback"
    }))));
  };

  return FeedbackForm;
}(_react["default"].Component);

exports["default"] = FeedbackForm;

_defineProperty(FeedbackForm, "defaultProps", {
  formId: 2521317,
  radioId: 47054416,
  yesFeedbackId: 52940022,
  noFeedbackId: 47054414,
  refererId: 47056299
});

FeedbackForm.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A ref object as created by React.createRef(). Will be applied to the form element. */
  formRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
    current: _propTypes["default"].any
  })]),

  /** A function whose return value is displayed after a successful form submission. */
  successMessage: _propTypes["default"].func.isRequired,

  /** The field id number for the yes textarea. */
  yesFeedbackId: _propTypes["default"].number,

  /** The field id number for the no textarea. */
  noFeedbackId: _propTypes["default"].number,

  /** The field id number for the referer. */
  refererId: _propTypes["default"].number,

  /** The id number for the form from FormStack. */
  formId: _propTypes["default"].number,

  /** The field id number for the yes/no radio buttons. */
  radioId: _propTypes["default"].number,

  /** A drupal node id number for the referer. */
  nodeId: _propTypes["default"].number,

  /** A function whose return value is rendered under the yes textarea. */
  yesDisclaimer: _propTypes["default"].func,

  /** A function whose return value is rendered under the no textarea. */
  noDisclaimer: _propTypes["default"].func
} : {};
module.exports = exports.default;