Adding other field.

client/coral-embed-stream/src/CommentStream.js

@@ -274,7 +274,7 @@ const mapDispatchToProps = (dispatch) => ({
   getStream: (rootId) => dispatch(getStream(rootId)),
   addNotification: (type, text) => dispatch(addNotification(type, text)),
   clearNotification: () => dispatch(clearNotification()),
-  postAction: (item, action, user, itemType, field, detail) => dispatch(postAction(item, action, user, itemType, field, detail)),
+  postAction: (item, action, itemType, field, detail) => dispatch(postAction(item, action, itemType, field, detail)),
   showSignInDialog: () => dispatch(showSignInDialog()),
   deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)),
   appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)),

client/coral-embed-stream/style/default.css

@@ -237,6 +237,11 @@ hr {
     margin-top: 10px;
 }
 
+.coral-plugin-flags-other-text {
+  margin-left: 20px;
+  width: 75%;
+}
+
 /* Close comments */
 
 .close-comments-intro-wrapper {

client/coral-framework/actions/items.js

@@ -217,12 +217,12 @@ export function postItem (item, type, id) {
 *
 */
 
-export function postAction (item_id, action_type, user_id, item_type, field, detail) {
+export function postAction (item_id, action_type, item_type, field, detail) {
   return () => {
     const action = {
       action_type,
-      user_id,
-      field, detail
+      field,
+      detail
     };
 
     return coralApi(`/${item_type}/${item_id}/actions`, {method: 'POST', body: action});

client/coral-plugin-flags/FlagButton.js

@@ -9,8 +9,10 @@ export default class FlagButton extends Component {
 
   state = {
     showMenu: false,
+    showOther: false,
     itemType: '',
-    reason: '',
+    detail: '',
+    otherText: '',
     step: 1
   }
 
@@ -23,14 +25,16 @@ export default class FlagButton extends Component {
   }
 
   onPopupContinue = () => {
-    const {postAction, addItem, updateItem, currentUser, flag, id, author_id} = this.props;
-    const {itemType, field, detail, step} = this.state;
+    const {postAction, addItem, updateItem, flag, id, author_id} = this.props;
+    const {itemType, field, detail, step, otherText} = this.state;
 
     this.setState({step: step + 1});
 
     if (itemType && detail) {
+      console.log('OtherText', otherText);
+      const updatedDetail = otherText || detail;
       const item_id = itemType === 'comments' ? id : author_id;
-      postAction(item_id, 'flag', currentUser.id, itemType, field, detail)
+      postAction(item_id, 'flag', itemType, field, updatedDetail)
         .then((action) => {
           let id = `${action.action_type}_${action.item_id}`;
           addItem({id, current_user: action, count: flag ? flag.count + 1 : 1}, 'actions');
@@ -43,7 +47,7 @@ export default class FlagButton extends Component {
     switch(step) {
     case 1: {
       return {
-        header: lang.t('step-1-username'),
+        header: lang.t('step-1-header'),
         options: [
           {val: 'user', text: lang.t('flag-username')},
           {val: 'comments', text: lang.t('flag-comment')},
@@ -57,14 +61,14 @@ export default class FlagButton extends Component {
       [
         {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')},
         {val: 'This comment is offensive', text: lang.t('comment-offensive')},
-        {val: 'This comment reveals personally identifiable inforation without consent', text: lang.t('personal-info')},
-        {val: 'Other', text: lang.t('other')},
+        {val: 'This comment reveals personally identifiable infomration', text: lang.t('personal-info')},
+        {val: 'other', text: lang.t('other')},
       ]
       : [
         {val: 'This username is offensive', text: lang.t('username-offensive')},
         {val: 'I don\'t like this username', text: lang.t('no-like-username')},
-        {val: 'This looks like an ad/marketing', text: lang.t('marketing ')},
-        {val: 'Other', text: lang.t('other')},
+        {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
+        {val: 'other', text: lang.t('other')},
       ];
       return {
         header: lang.t('step-2-header'),
@@ -75,19 +79,27 @@ export default class FlagButton extends Component {
     }
     case 3: {
       return {
-        header: lang.t('step-3-input'),
+        header: lang.t('step-3-header'),
         text: lang.t('thank-you')
       };
     }}
   }
 
   onPopupOptionClick = (sets) => (e) => {
-    this.setState({[sets]: e.target.value});
+    if(sets === 'detail' && e.target.value === 'other') {
+      this.setState({showOther: true});
+    }
 
     // If flagging a user, indicate that this is referencing the username rather than the bio
     if(sets === 'itemType' && e.target.value === 'user') {
       this.setState({field: 'username'});
     }
+
+    this.setState({[sets]: e.target.value});
+  }
+
+  onOtherTextChange = (e) => {
+    this.setState({otherText: e.target.value});
   }
 
   render () {
@@ -131,6 +143,19 @@ export default class FlagButton extends Component {
                     </div>
                   )
                 }
+                {
+                  this.state.showOther && <div>
+                    <input
+                      className={`${name}-other-text`}
+                      type="text"
+                      id="otherText"
+                      onChange={this.onOtherTextChange}
+                      value={this.state.otherText}/>
+                    <label htmlFor={'otherText'} className={`${name}-popup-radio-label screen-reader-text`}>
+                      lang.t('flag-reason')
+                    </label><br/>
+                  </div>
+                }
               </form>
             }
             <div className={`${name}-popup-counter`}>

client/coral-plugin-flags/translations.json

@@ -17,6 +17,7 @@
     "no-like-username": "I don't like this username",
     "marketing": "This looks like an ad/marketing",
     "thank-you": "We value your safety and feedback. A moderator will review your flag.",
+    "flag-reason": "Reason for flag",
     "other": "Other"
   },
   "es": {
@@ -37,6 +38,7 @@
     "no-like-username": "¡traduceme!",
     "marketing": "¡traduceme!",
     "thank-you": "¡traduceme!",
+    "flag-reason": "Reason for flag",
     "other": "¡traduceme!"
   }
 }