@atlaskit/feedback-collector 7.1.0

package/dist/esm/components/FeedbackFlag.js

@@ -0,0 +1,20 @@
+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';
+
+var FeedbackFlag = function FeedbackFlag(props) {
+  return /*#__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/esm/components/FeedbackForm.js

@@ -0,0 +1,205 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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, 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';
+
+var getFieldLabels = function 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'
+  };
+};
+
+var getSelectOptions = function 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'
+  }];
+};
+
+var getDefaultSelectValue = function getDefaultSelectValue(record) {
+  return {
+    label: record !== null && record !== void 0 && record.empty.selectOptionLabel ? record.empty.selectOptionLabel : 'I want to...',
+    value: 'empty'
+  };
+};
+
+var FeedbackForm = /*#__PURE__*/function (_Component) {
+  _inherits(FeedbackForm, _Component);
+
+  var _super = _createSuper(FeedbackForm);
+
+  function FeedbackForm() {
+    var _this;
+
+    _classCallCheck(this, FeedbackForm);
+
+    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), "state", {
+      type: 'empty',
+      description: '',
+      canBeContacted: false,
+      enrollInResearchGroup: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isTypeSelected", function () {
+      return _this.state.type !== 'empty';
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSubmit", function () {
+      var _this$state = _this.state,
+          type = _this$state.type,
+          description = _this$state.description,
+          canBeContacted = _this$state.canBeContacted,
+          enrollInResearchGroup = _this$state.enrollInResearchGroup;
+
+      _this.props.onSubmit({
+        type: type,
+        description: description,
+        canBeContacted: canBeContacted,
+        enrollInResearchGroup: enrollInResearchGroup
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(FeedbackForm, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var showTypeField = this.props.showTypeField;
+      var canShowTextField = this.isTypeSelected() || !showTypeField;
+      var 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
+      }, function (_ref) {
+        var formProps = _ref.formProps;
+        return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, _this2.props.feedbackTitle)), /*#__PURE__*/React.createElement(ModalBody, null, _this2.props.feedbackTitleDetails, showTypeField ? /*#__PURE__*/React.createElement(Select, {
+          onChange: function onChange(option) {
+            if (!option || option instanceof Array) {
+              return;
+            }
+
+            _this2.setState({
+              type: option.value
+            });
+          },
+          menuPortalTarget: document.body,
+          styles: {
+            menuPortal: function menuPortal(base) {
+              return _objectSpread(_objectSpread({}, base), {}, {
+                zIndex: 9999
+              });
+            }
+          },
+          defaultValue: getDefaultSelectValue(_this2.props.feedbackGroupLabels),
+          options: getSelectOptions(_this2.props.feedbackGroupLabels)
+        }) : null, canShowTextField ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Field, {
+          label: showTypeField ? getFieldLabels(_this2.props.feedbackGroupLabels)[_this2.state.type] : null,
+          isRequired: true,
+          name: "description"
+        }, function (_ref2) {
+          var fieldProps = _ref2.fieldProps;
+          return /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
+            name: "foo",
+            minimumRows: 6,
+            placeholder: _this2.props.summaryPlaceholder,
+            onChange: function onChange(e) {
+              return _this2.setState({
+                description: e.target.value
+              });
+            },
+            value: _this2.state.description
+          }));
+        }), /*#__PURE__*/React.createElement(Field, {
+          name: "can-be-contacted"
+        }, function (_ref3) {
+          var fieldProps = _ref3.fieldProps;
+          return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+            label: _this2.props.canBeContactedLabel,
+            onChange: function onChange(event) {
+              return _this2.setState({
+                canBeContacted: event.target.checked
+              });
+            }
+          }));
+        }), /*#__PURE__*/React.createElement(Field, {
+          name: "enroll-in-research-group"
+        }, function (_ref4) {
+          var fieldProps = _ref4.fieldProps;
+          return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+            label: _this2.props.enrolInResearchLabel,
+            onChange: function onChange(event) {
+              return _this2.setState({
+                enrollInResearchGroup: event.target.checked
+              });
+            }
+          }));
+        })) : /*#__PURE__*/React.createElement(Fragment, null)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+          appearance: "subtle",
+          onClick: _this2.props.onClose
+        }, _this2.props.cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+          appearance: "primary",
+          type: "submit",
+          isDisabled: isDisabled
+        }, _this2.props.submitButtonLabel)));
+      }));
+    }
+  }]);
+
+  return FeedbackForm;
+}(Component);
+
+_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: function onClose() {},
+  onSubmit: function onSubmit() {}
+});
+
+export { FeedbackForm as default };

package/dist/esm/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/esm/types.js

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

package/dist/esm/version.json

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

package/dist/types/components/FeedbackCollector.d.ts

@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import { FormFields, SelectOptionDetails, SelectValue } from '../types';
+declare type FieldValueType = string | Object | Object[];
+export declare type FieldType = {
+    id: string;
+    value: FieldValueType;
+};
+declare type FeedbackType = {
+    fields: FieldType[];
+};
+export interface Props {
+    /** The customer email */
+    email?: string;
+    /** The customer name */
+    name?: string;
+    /** The request id to access the widget service */
+    requestTypeId: string;
+    /** The embeddable key to access the widget service */
+    embeddableKey: string;
+    /**  Additional fields to send to the widget service **/
+    additionalFields: FieldType[];
+    /**  Override the default id for the "can be contacted" custom field in your widget service **/
+    canBeContactedFieldId: string;
+    /**  Override the default value for the "can be contacted" custom field in your widget service **/
+    canBeContactedDefaultValue: FieldValueType;
+    /**  Override the default id for the "customer name" custom field in your widget service **/
+    customerNameFieldId: string;
+    /**  Override the default value for the "customer name" custom field in your widget service **/
+    customerNameDefaultValue: FieldValueType;
+    /**  Override the default id for the "description" custom field in your widget service **/
+    descriptionFieldId: string;
+    /**  Override the default value for the "description" custom field in your widget service **/
+    descriptionDefaultValue: FieldValueType;
+    /**  Override the default id for the "enroll in research" custom field in your widget service **/
+    enrollInResearchFieldId: string;
+    /**  Override the default value for the "enroll in research" custom field in your widget service **/
+    enrollInResearchDefaultValue: FieldValueType;
+    /**  Override the default id for the "email" custom field in your widget service **/
+    emailFieldId: string;
+    /**  Override the default value for the "email" custom field in your widget service **/
+    emailDefaultValue: FieldValueType;
+    /**  Override the default id for the "summary" custom field in your widget service **/
+    summaryFieldId: string;
+    /**  Override the default value for the "summary" custom field in your widget service **/
+    summaryDefaultValue: FieldValueType;
+    /**  Number of characters that the "summary" field accepts, the rest will be truncated **/
+    summaryTruncateLength: number;
+    /** After this delay the onSubmit callback will be triggered optimistically **/
+    timeoutOnSubmit: number;
+    /**  Override the default id for the "type" custom field in your widget service **/
+    typeFieldId: string;
+    /**  Override the default value for the "Bug" type of response in your widget service **/
+    typeBugDefaultValue: FieldValueType;
+    /**  Override the default value for the "Comment" type of response in your widget service **/
+    typeCommentDefaultValue: FieldValueType;
+    /**  Override the default value for the "Suggestion" type of response in your widget service **/
+    typeSuggestionDefaultValue: FieldValueType;
+    /**  Override the default value for the "Question" type of response in your widget service **/
+    typeQuestionDefaultValue: FieldValueType;
+    /**  Override the default value for the "Empty" type of response in your widget service **/
+    typeEmptyDefaultValue: FieldValueType;
+    /**  Override to hide the feedback type select drop down for the feedback **/
+    showTypeField: boolean;
+    /**  Message which will be shown as the title of the feedback dialog **/
+    feedbackTitle?: React.ReactText;
+    /**  Message which will be shown below the title of the feedback dialog **/
+    feedbackTitleDetails?: React.ReactChild;
+    /**  Message which will be shown next to the enrol in research checkbox **/
+    enrolInResearchLabel?: React.ReactChild;
+    /**  Message which will be shown next to the can be contacted checkbox **/
+    canBeContactedLabel?: React.ReactChild;
+    /**  Message which will be shown inside the summary text field **/
+    summaryPlaceholder?: string;
+    /**  Message for submit button label **/
+    submitButtonLabel?: string;
+    /**  Message for cancel button label **/
+    cancelButtonLabel?: string;
+    /**  Message for select option labels and field labels **/
+    feedbackGroupLabels?: Record<SelectValue, SelectOptionDetails>;
+    /** Function that will be called to initiate the exit transition. */
+    onClose: () => void;
+    /** Function that will be called optimistically after a delay when the feedback is submitted. */
+    onSubmit: (formFields: FormFields) => void;
+}
+export default class FeedbackCollector extends Component<Props> {
+    static defaultProps: {
+        canBeContactedFieldId: string;
+        canBeContactedDefaultValue: {
+            id: string;
+        }[];
+        additionalFields: never[];
+        customerNameFieldId: string;
+        customerNameDefaultValue: string;
+        descriptionFieldId: string;
+        descriptionDefaultValue: string;
+        enrollInResearchFieldId: string;
+        enrollInResearchDefaultValue: {
+            id: string;
+        }[];
+        emailFieldId: string;
+        emailDefaultValue: string;
+        summaryFieldId: string;
+        summaryDefaultValue: string;
+        summaryTruncateLength: number;
+        timeoutOnSubmit: number;
+        typeFieldId: string;
+        typeBugDefaultValue: {
+            id: string;
+        };
+        typeCommentDefaultValue: {
+            id: string;
+        };
+        typeSuggestionDefaultValue: {
+            id: string;
+        };
+        typeQuestionDefaultValue: {
+            id: string;
+        };
+        typeEmptyDefaultValue: {
+            id: string;
+        };
+        showTypeField: boolean;
+        onClose: () => void;
+        onSubmit: () => void;
+    };
+    getTypeFieldValue(dtype: SelectValue): FieldValueType;
+    getEmail(formValues: FormFields): Object;
+    getDescription(formValues: FormFields): Object;
+    getSummary(formValues: FormFields): Object;
+    getCustomerName(): Object;
+    mapFormToJSD(formValues: FormFields): FeedbackType;
+    postFeedback: (formValues: FormFields) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/types/components/FeedbackFlag.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AkProps {
+    isDismissAllowed?: boolean;
+    description?: React.ReactText;
+    title?: React.ReactText;
+    onDismissed?: (...args: Array<any>) => void;
+}
+declare const FeedbackFlag: (props: AkProps) => JSX.Element;
+export default FeedbackFlag;

package/dist/types/components/FeedbackForm.d.ts

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { FormFields, SelectOptionDetails, SelectValue } from '../types';
+interface Props {
+    /**  Message which will be shown as the title of the feedback dialog **/
+    feedbackTitle?: React.ReactText;
+    /**  Override to hide the feedback type select drop down for the feedback **/
+    showTypeField?: boolean;
+    /**  Message which will be shown below the title of the feedback dialog **/
+    feedbackTitleDetails?: React.ReactChild;
+    /**  Message which will be shown next to the enrol in research checkbox **/
+    enrolInResearchLabel: React.ReactChild;
+    /**  Message which will be shown next to the can be contacted checkbox **/
+    canBeContactedLabel?: React.ReactChild;
+    /**  Message which will be shown inside the summary text field **/
+    summaryPlaceholder?: string;
+    /**  Message for submit button label **/
+    submitButtonLabel?: string;
+    /**  Message for cancel button label **/
+    cancelButtonLabel?: string;
+    /**  Message for select option labels and field labels **/
+    feedbackGroupLabels?: Record<SelectValue, SelectOptionDetails>;
+    /** Function that will be called to initiate the exit transition. */
+    onClose: () => void;
+    /** Function that will be called immediately after the submit action  */
+    onSubmit: (formValues: FormFields) => void;
+}
+export interface OptionType {
+    label: string;
+    value: SelectValue;
+}
+export default class FeedbackForm extends Component<Props, FormFields> {
+    state: FormFields;
+    static defaultProps: {
+        showTypeField: boolean;
+        feedbackTitle: string;
+        enrolInResearchLabel: string;
+        canBeContactedLabel: string;
+        submitButtonLabel: string;
+        cancelButtonLabel: string;
+        onClose: () => void;
+        onSubmit: () => void;
+    };
+    isTypeSelected: () => boolean;
+    onSubmit: () => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/types/index.d.ts

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