@atlaskit/feedback-collector 7.1.0

package/dist/cjs/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FeedbackFlag", {
+  enumerable: true,
+  get: function get() {
+    return _FeedbackFlag.default;
+  }
+});
+Object.defineProperty(exports, "FeedbackForm", {
+  enumerable: true,
+  get: function get() {
+    return _FeedbackForm.default;
+  }
+});
+exports.default = void 0;
+
+var _FeedbackCollector = _interopRequireDefault(require("./components/FeedbackCollector"));
+
+var _FeedbackFlag = _interopRequireDefault(require("./components/FeedbackFlag"));
+
+var _FeedbackForm = _interopRequireDefault(require("./components/FeedbackForm"));
+
+var _default = _FeedbackCollector.default;
+exports.default = _default;

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/feedback-collector",
+	"version": "7.1.0",
+	"sideEffects": false
+}

package/dist/es2019/components/FeedbackCollector.js

@@ -0,0 +1,162 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import truncate from 'lodash/truncate';
+import FeedbackForm from './FeedbackForm';
+const MAX_SUMMARY_LENGTH_CHARS = 100;
+
+const singleLineTruncatedText = (text, length = MAX_SUMMARY_LENGTH_CHARS) => {
+  const singleLineText = text.replace(/\n/g, ' ');
+  return truncate(singleLineText, {
+    length
+  });
+};
+
+export default class FeedbackCollector extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "postFeedback", formValues => {
+      const body = this.mapFormToJSD(formValues); // Don't dispatch unless we have suitable props (allows tests to pass through empty strings and avoid redundant network calls)
+
+      if (this.props.embeddableKey && this.props.requestTypeId) {
+        fetch(`https://jsd-widget.atlassian.com/api/embeddable/${this.props.embeddableKey}/request?requestTypeId=${this.props.requestTypeId}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(body)
+        });
+      }
+
+      this.props.onClose(); // slightly delay confirming submit since we don't wait for the REST call to succeed
+      //
+      // Because `onClose` is invoked prior to this timeout triggering, the `componentWillUnmount`
+      // may occur before the `onSubmit` is called. To prevent prematurely cancelling the
+      // network request, we deliberately don't clear this timeout inside `componentWillUnmount`.
+      //
+
+      setTimeout(() => this.props.onSubmit(formValues), this.props.timeoutOnSubmit);
+    });
+  }
+
+  getTypeFieldValue(dtype) {
+    switch (dtype) {
+      case 'bug':
+        return this.props.typeBugDefaultValue;
+
+      case 'comment':
+        return this.props.typeCommentDefaultValue;
+
+      case 'suggestion':
+        return this.props.typeSuggestionDefaultValue;
+
+      case 'question':
+        return this.props.typeQuestionDefaultValue;
+
+      case 'empty':
+      default:
+        return this.props.typeEmptyDefaultValue;
+    }
+  }
+
+  getEmail(formValues) {
+    return formValues.canBeContacted && this.props.email ? this.props.email : this.props.emailDefaultValue;
+  }
+
+  getDescription(formValues) {
+    return formValues.description || this.props.descriptionDefaultValue;
+  }
+
+  getSummary(formValues) {
+    return singleLineTruncatedText(formValues.description, this.props.summaryTruncateLength) || this.props.summaryDefaultValue;
+  }
+
+  getCustomerName() {
+    return this.props.name || this.props.customerNameDefaultValue;
+  }
+
+  mapFormToJSD(formValues) {
+    return {
+      fields: [this.props.showTypeField ? {
+        id: this.props.typeFieldId,
+        value: this.getTypeFieldValue(formValues.type)
+      } : undefined, {
+        id: this.props.summaryFieldId,
+        value: this.getSummary(formValues)
+      }, {
+        id: this.props.descriptionFieldId,
+        value: this.getDescription(formValues)
+      }, {
+        id: this.props.emailFieldId,
+        value: this.getEmail(formValues)
+      }, {
+        id: this.props.customerNameFieldId,
+        value: this.getCustomerName()
+      }, formValues.canBeContacted ? {
+        id: this.props.canBeContactedFieldId,
+        value: this.props.canBeContactedDefaultValue
+      } : undefined, formValues.enrollInResearchGroup ? {
+        id: this.props.enrollInResearchFieldId,
+        value: this.props.enrollInResearchDefaultValue
+      } : undefined, ...this.props.additionalFields].filter(Boolean)
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(FeedbackForm, {
+      feedbackTitle: this.props.feedbackTitle,
+      feedbackTitleDetails: this.props.feedbackTitleDetails,
+      showTypeField: this.props.showTypeField,
+      canBeContactedLabel: this.props.canBeContactedLabel,
+      enrolInResearchLabel: this.props.enrolInResearchLabel,
+      summaryPlaceholder: this.props.summaryPlaceholder,
+      submitButtonLabel: this.props.submitButtonLabel,
+      cancelButtonLabel: this.props.cancelButtonLabel,
+      feedbackGroupLabels: this.props.feedbackGroupLabels,
+      onSubmit: this.postFeedback,
+      onClose: this.props.onClose
+    });
+  }
+
+}
+
+_defineProperty(FeedbackCollector, "defaultProps", {
+  canBeContactedFieldId: 'customfield_10043',
+  canBeContactedDefaultValue: [{
+    id: '10109'
+  }],
+  additionalFields: [],
+  customerNameFieldId: 'customfield_10045',
+  customerNameDefaultValue: 'unknown',
+  descriptionFieldId: 'description',
+  descriptionDefaultValue: '',
+  enrollInResearchFieldId: 'customfield_10044',
+  enrollInResearchDefaultValue: [{
+    id: '10110'
+  }],
+  emailFieldId: 'email',
+  emailDefaultValue: 'do-not-reply@atlassian.com',
+  summaryFieldId: 'summary',
+  summaryDefaultValue: '',
+  summaryTruncateLength: 100,
+  timeoutOnSubmit: 700,
+  typeFieldId: 'customfield_10042',
+  typeBugDefaultValue: {
+    id: '10105'
+  },
+  typeCommentDefaultValue: {
+    id: '10106'
+  },
+  typeSuggestionDefaultValue: {
+    id: '10107'
+  },
+  typeQuestionDefaultValue: {
+    id: '10108'
+  },
+  typeEmptyDefaultValue: {
+    id: 'empty'
+  },
+  showTypeField: true,
+  onClose: () => {},
+  onSubmit: () => {}
+});

package/dist/es2019/components/FeedbackFlag.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { AutoDismissFlag } from '@atlaskit/flag';
+import SuccessIcon from '@atlaskit/icon/glyph/check-circle';
+import { G300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+
+const FeedbackFlag = props => /*#__PURE__*/React.createElement(AutoDismissFlag, _extends({
+  icon: /*#__PURE__*/React.createElement(SuccessIcon, {
+    primaryColor: token('color.iconBorder.success', G300),
+    label: "Success"
+  }),
+  id: "feedbackSent",
+  description: props.description ? props.description : 'Your valuable feedback helps us continually improve our products.',
+  title: props.title ? props.title : 'Thanks!'
+}, props));
+
+export default FeedbackFlag;

package/dist/es2019/components/FeedbackForm.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component, Fragment } from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { Checkbox } from '@atlaskit/checkbox';
+import Form, { Field } from '@atlaskit/form';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import Select from '@atlaskit/select';
+import TextArea from '@atlaskit/textarea';
+
+const getFieldLabels = record => {
+  return {
+    bug: record !== null && record !== void 0 && record.bug.fieldLabel ? record.bug.fieldLabel : 'Describe the bug or issue',
+    comment: record !== null && record !== void 0 && record.comment.fieldLabel ? record.comment.fieldLabel : "Let us know what's on your mind",
+    suggestion: record !== null && record !== void 0 && record.suggestion.fieldLabel ? record.suggestion.fieldLabel : "Let us know what you'd like to improve",
+    question: record !== null && record !== void 0 && record.question.fieldLabel ? record.question.fieldLabel : 'What would you like to know?',
+    empty: record !== null && record !== void 0 && record.empty.fieldLabel ? record.empty.fieldLabel : 'Select an option'
+  };
+};
+
+const getSelectOptions = record => {
+  return [{
+    label: record !== null && record !== void 0 && record.question.selectOptionLabel ? record.question.selectOptionLabel : 'Ask a question',
+    value: 'question'
+  }, {
+    label: record !== null && record !== void 0 && record.comment.selectOptionLabel ? record.comment.selectOptionLabel : 'Leave a comment',
+    value: 'comment'
+  }, {
+    label: record !== null && record !== void 0 && record.bug.selectOptionLabel ? record.bug.selectOptionLabel : 'Report a bug',
+    value: 'bug'
+  }, {
+    label: record !== null && record !== void 0 && record.suggestion.selectOptionLabel ? record.suggestion.selectOptionLabel : 'Suggest an improvement',
+    value: 'suggestion'
+  }];
+};
+
+const getDefaultSelectValue = record => {
+  return {
+    label: record !== null && record !== void 0 && record.empty.selectOptionLabel ? record.empty.selectOptionLabel : 'I want to...',
+    value: 'empty'
+  };
+};
+
+export default class FeedbackForm extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      type: 'empty',
+      description: '',
+      canBeContacted: false,
+      enrollInResearchGroup: false
+    });
+
+    _defineProperty(this, "isTypeSelected", () => this.state.type !== 'empty');
+
+    _defineProperty(this, "onSubmit", () => {
+      const {
+        type,
+        description,
+        canBeContacted,
+        enrollInResearchGroup
+      } = this.state;
+      this.props.onSubmit({
+        type,
+        description,
+        canBeContacted,
+        enrollInResearchGroup
+      });
+    });
+  }
+
+  render() {
+    const {
+      showTypeField
+    } = this.props;
+    const canShowTextField = this.isTypeSelected() || !showTypeField;
+    const isDisabled = showTypeField ? !this.isTypeSelected() || !this.state.description : !this.state.description;
+    return /*#__PURE__*/React.createElement(Modal, {
+      onClose: this.props.onClose
+    }, /*#__PURE__*/React.createElement(Form, {
+      onSubmit: this.onSubmit
+    }, ({
+      formProps
+    }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.feedbackTitle)), /*#__PURE__*/React.createElement(ModalBody, null, this.props.feedbackTitleDetails, showTypeField ? /*#__PURE__*/React.createElement(Select, {
+      onChange: option => {
+        if (!option || option instanceof Array) {
+          return;
+        }
+
+        this.setState({
+          type: option.value
+        });
+      },
+      menuPortalTarget: document.body,
+      styles: {
+        menuPortal: base => ({ ...base,
+          zIndex: 9999
+        })
+      },
+      defaultValue: getDefaultSelectValue(this.props.feedbackGroupLabels),
+      options: getSelectOptions(this.props.feedbackGroupLabels)
+    }) : null, canShowTextField ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Field, {
+      label: showTypeField ? getFieldLabels(this.props.feedbackGroupLabels)[this.state.type] : null,
+      isRequired: true,
+      name: "description"
+    }, ({
+      fieldProps
+    }) => /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
+      name: "foo",
+      minimumRows: 6,
+      placeholder: this.props.summaryPlaceholder,
+      onChange: e => this.setState({
+        description: e.target.value
+      }),
+      value: this.state.description
+    }))), /*#__PURE__*/React.createElement(Field, {
+      name: "can-be-contacted"
+    }, ({
+      fieldProps
+    }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+      label: this.props.canBeContactedLabel,
+      onChange: event => this.setState({
+        canBeContacted: event.target.checked
+      })
+    }))), /*#__PURE__*/React.createElement(Field, {
+      name: "enroll-in-research-group"
+    }, ({
+      fieldProps
+    }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+      label: this.props.enrolInResearchLabel,
+      onChange: event => this.setState({
+        enrollInResearchGroup: event.target.checked
+      })
+    })))) : /*#__PURE__*/React.createElement(Fragment, null)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+      appearance: "subtle",
+      onClick: this.props.onClose
+    }, this.props.cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+      appearance: "primary",
+      type: "submit",
+      isDisabled: isDisabled
+    }, this.props.submitButtonLabel)))));
+  }
+
+}
+
+_defineProperty(FeedbackForm, "defaultProps", {
+  showTypeField: true,
+  feedbackTitle: 'Share your thoughts',
+  enrolInResearchLabel: "I'd like to participate in product research",
+  canBeContactedLabel: 'Atlassian can contact me about this feedback',
+  submitButtonLabel: 'Send feedback',
+  cancelButtonLabel: 'Cancel',
+  onClose: () => {},
+  onSubmit: () => {}
+});

package/dist/es2019/index.js

@@ -0,0 +1,5 @@
+import FeedbackCollector from './components/FeedbackCollector';
+import FeedbackFlag from './components/FeedbackFlag';
+import FeedbackForm from './components/FeedbackForm';
+export default FeedbackCollector;
+export { FeedbackFlag, FeedbackForm };

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/feedback-collector",
+	"version": "7.1.0",
+	"sideEffects": false
+}

package/dist/esm/components/FeedbackCollector.js

@@ -0,0 +1,205 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import truncate from 'lodash/truncate';
+import FeedbackForm from './FeedbackForm';
+var MAX_SUMMARY_LENGTH_CHARS = 100;
+
+var singleLineTruncatedText = function singleLineTruncatedText(text) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SUMMARY_LENGTH_CHARS;
+  var singleLineText = text.replace(/\n/g, ' ');
+  return truncate(singleLineText, {
+    length: length
+  });
+};
+
+var FeedbackCollector = /*#__PURE__*/function (_Component) {
+  _inherits(FeedbackCollector, _Component);
+
+  var _super = _createSuper(FeedbackCollector);
+
+  function FeedbackCollector() {
+    var _this;
+
+    _classCallCheck(this, FeedbackCollector);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "postFeedback", function (formValues) {
+      var body = _this.mapFormToJSD(formValues); // Don't dispatch unless we have suitable props (allows tests to pass through empty strings and avoid redundant network calls)
+
+
+      if (_this.props.embeddableKey && _this.props.requestTypeId) {
+        fetch("https://jsd-widget.atlassian.com/api/embeddable/".concat(_this.props.embeddableKey, "/request?requestTypeId=").concat(_this.props.requestTypeId), {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(body)
+        });
+      }
+
+      _this.props.onClose(); // slightly delay confirming submit since we don't wait for the REST call to succeed
+      //
+      // Because `onClose` is invoked prior to this timeout triggering, the `componentWillUnmount`
+      // may occur before the `onSubmit` is called. To prevent prematurely cancelling the
+      // network request, we deliberately don't clear this timeout inside `componentWillUnmount`.
+      //
+
+
+      setTimeout(function () {
+        return _this.props.onSubmit(formValues);
+      }, _this.props.timeoutOnSubmit);
+    });
+
+    return _this;
+  }
+
+  _createClass(FeedbackCollector, [{
+    key: "getTypeFieldValue",
+    value: function getTypeFieldValue(dtype) {
+      switch (dtype) {
+        case 'bug':
+          return this.props.typeBugDefaultValue;
+
+        case 'comment':
+          return this.props.typeCommentDefaultValue;
+
+        case 'suggestion':
+          return this.props.typeSuggestionDefaultValue;
+
+        case 'question':
+          return this.props.typeQuestionDefaultValue;
+
+        case 'empty':
+        default:
+          return this.props.typeEmptyDefaultValue;
+      }
+    }
+  }, {
+    key: "getEmail",
+    value: function getEmail(formValues) {
+      return formValues.canBeContacted && this.props.email ? this.props.email : this.props.emailDefaultValue;
+    }
+  }, {
+    key: "getDescription",
+    value: function getDescription(formValues) {
+      return formValues.description || this.props.descriptionDefaultValue;
+    }
+  }, {
+    key: "getSummary",
+    value: function getSummary(formValues) {
+      return singleLineTruncatedText(formValues.description, this.props.summaryTruncateLength) || this.props.summaryDefaultValue;
+    }
+  }, {
+    key: "getCustomerName",
+    value: function getCustomerName() {
+      return this.props.name || this.props.customerNameDefaultValue;
+    }
+  }, {
+    key: "mapFormToJSD",
+    value: function mapFormToJSD(formValues) {
+      return {
+        fields: [this.props.showTypeField ? {
+          id: this.props.typeFieldId,
+          value: this.getTypeFieldValue(formValues.type)
+        } : undefined, {
+          id: this.props.summaryFieldId,
+          value: this.getSummary(formValues)
+        }, {
+          id: this.props.descriptionFieldId,
+          value: this.getDescription(formValues)
+        }, {
+          id: this.props.emailFieldId,
+          value: this.getEmail(formValues)
+        }, {
+          id: this.props.customerNameFieldId,
+          value: this.getCustomerName()
+        }, formValues.canBeContacted ? {
+          id: this.props.canBeContactedFieldId,
+          value: this.props.canBeContactedDefaultValue
+        } : undefined, formValues.enrollInResearchGroup ? {
+          id: this.props.enrollInResearchFieldId,
+          value: this.props.enrollInResearchDefaultValue
+        } : undefined].concat(_toConsumableArray(this.props.additionalFields)).filter(Boolean)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(FeedbackForm, {
+        feedbackTitle: this.props.feedbackTitle,
+        feedbackTitleDetails: this.props.feedbackTitleDetails,
+        showTypeField: this.props.showTypeField,
+        canBeContactedLabel: this.props.canBeContactedLabel,
+        enrolInResearchLabel: this.props.enrolInResearchLabel,
+        summaryPlaceholder: this.props.summaryPlaceholder,
+        submitButtonLabel: this.props.submitButtonLabel,
+        cancelButtonLabel: this.props.cancelButtonLabel,
+        feedbackGroupLabels: this.props.feedbackGroupLabels,
+        onSubmit: this.postFeedback,
+        onClose: this.props.onClose
+      });
+    }
+  }]);
+
+  return FeedbackCollector;
+}(Component);
+
+_defineProperty(FeedbackCollector, "defaultProps", {
+  canBeContactedFieldId: 'customfield_10043',
+  canBeContactedDefaultValue: [{
+    id: '10109'
+  }],
+  additionalFields: [],
+  customerNameFieldId: 'customfield_10045',
+  customerNameDefaultValue: 'unknown',
+  descriptionFieldId: 'description',
+  descriptionDefaultValue: '',
+  enrollInResearchFieldId: 'customfield_10044',
+  enrollInResearchDefaultValue: [{
+    id: '10110'
+  }],
+  emailFieldId: 'email',
+  emailDefaultValue: 'do-not-reply@atlassian.com',
+  summaryFieldId: 'summary',
+  summaryDefaultValue: '',
+  summaryTruncateLength: 100,
+  timeoutOnSubmit: 700,
+  typeFieldId: 'customfield_10042',
+  typeBugDefaultValue: {
+    id: '10105'
+  },
+  typeCommentDefaultValue: {
+    id: '10106'
+  },
+  typeSuggestionDefaultValue: {
+    id: '10107'
+  },
+  typeQuestionDefaultValue: {
+    id: '10108'
+  },
+  typeEmptyDefaultValue: {
+    id: 'empty'
+  },
+  showTypeField: true,
+  onClose: function onClose() {},
+  onSubmit: function onSubmit() {}
+});
+
+export { FeedbackCollector as default };