Flag comment (#9991)

* Added initial chat flag comment form

* Added user comment to slack message

* Updated copy and styles

* Fixed comma

* Updated admin messaging

website/client/components/chat/reportFlagModal.vue

@@ -1,18 +1,65 @@
 <template lang="pug">
-  b-modal#report-flag(:title='$t("abuseFlagModalHeading")', size='lg', :hide-footer='true')
-    .modal-header
-      h4(v-html="$t('abuseFlagModalHeading', reportData)")
+  b-modal#report-flag(:title='$t("abuseFlagModalHeading")', size='md', :hide-footer='true')
     .modal-body
+      strong(v-html="$t('abuseFlagModalHeading', reportData)")
       blockquote
         div(v-markdown='abuseObject.text')
-      p(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
-    .modal-footer
+      div
+        strong {{$t('whyReportingPost')}}
+        span.optional {{$t('optional')}}
+        textarea.form-control(v-model='reportComment', :placeholder='$t("whyReportingPostPlaceholder")')
+      small(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
+    .footer.text-center
       button.pull-left.btn.btn-danger(@click='clearFlagCount()', v-if='user.contributor.admin && abuseObject.flagCount > 0')
         | Reset Flag Count
-      button.btn.btn-primary(@click='close()') {{ $t('cancel') }}
-      button.btn.btn-danger(@click='reportAbuse()') {{ $t('abuseFlagModalButton') }}
+      a.cancel-link(@click.prevent='close()') {{ $t('cancel') }}
+      button.btn.btn-danger(@click='reportAbuse()') {{ $t('report') }}
 </template>
 
+<style>
+  #report-flag h5 {
+    color: #f23035;
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+   .modal-body {
+     margin-top: 1em;
+   }
+
+   blockquote {
+     border-radius: 2px;
+     background-color: #f4f4f4;
+     padding: 1em;
+     margin-top: 1em;
+   }
+
+   textarea {
+     margin-top: 1em;
+     margin-bottom: 1em;
+     border-radius: 2px;
+     border: solid 1px $gray-400;
+     min-height: 106px;
+   }
+
+   .footer {
+     padding: 1em;
+     padding-bottom: 2em;
+   }
+
+   a.cancel-link {
+     color: $blue-10;
+     margin-right: .5em;
+   }
+
+   .optional {
+     color: $gray-200;
+     float: right;
+   }
+</style>
+
 <script>
 import { mapState } from 'client/libs/store';
 import notifications from 'client/mixins/notifications';
@@ -45,6 +92,7 @@ export default {
       abuseFlagModalBody,
       abuseObject: '',
       groupId: '',
+      reportComment: '',
     };
   },
   created () {
@@ -64,9 +112,11 @@ export default {
     },
     async reportAbuse () {
       this.notify('Thank you for reporting this violation. The moderators have been notified.');
+
       await this.$store.dispatch('chat:flag', {
         groupId: this.groupId,
         chatId: this.abuseObject.id,
+        comment: this.reportComment,
       });
 
       this.close();

website/client/store/actions/chat.js

@@ -69,8 +69,10 @@ export async function like (store, payload) {
 }
 
 export async function flag (store, payload) {
-  let url = `/api/v3/groups/${payload.groupId}/chat/${payload.chatId}/flag`;
-  let response = await axios.post(url);
+  const url = `/api/v3/groups/${payload.groupId}/chat/${payload.chatId}/flag`;
+  const response = await axios.post(url, {
+    comment: payload.comment,
+  });
   return response.data.data;
 }
 

website/common/locales/en/groups.json

@@ -145,11 +145,14 @@
   "badAmountOfGemsToSend": "Amount must be within 1 and your current number of gems.",
   "report": "Report",
   "abuseFlag": "Report violation of Community Guidelines",
-  "abuseFlagModalHeading": "Report <%= name %> for violation?",
-  "abuseFlagModalBody": "Are you sure you want to report this post? You should ONLY report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction. Appropriate reasons to flag a post include but are not limited to:<br><br><ul style='margin-left: 10px;'><li>swearing, religious oaths</li><li>bigotry, slurs</li><li>adult topics</li><li>violence, including as a joke</li><li>spam, nonsensical messages</li></ul>",
+  "abuseFlagModalHeading": "Report a Violation",
+  "abuseFlagModalBody": "Are you sure you want to report this post? You should <strong>only</strong> report a post that violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Inappropriately reporting a post is a violation of the Community Guidelines and may give you an infraction.",
   "abuseFlagModalButton": "Report Violation",
   "abuseReported": "Thank you for reporting this violation. The moderators have been notified.",
   "abuseAlreadyReported": "You have already reported this message.",
+  "whyReportingPost": "Why are you reporting this post?",
+  "whyReportingPostPlaceholder": "Please help our moderators by letting us know why you are reporting this post for a violation, e.g., spam, swearing, religious oaths, bigotry, slurs, adult topics, violence.",
+  "optional": "Optional",
   "needsText": "Please type a message.",
   "needsTextPlaceholder": "Type your message here.",
   "copyMessageAsToDo": "Copy message as To-Do",

website/server/libs/chatReporting/groupChatReporter.js

@@ -41,18 +41,21 @@ export default class GroupChatReporter extends ChatReporter {
     if (!message) throw new NotFound(this.res.t('messageGroupChatNotFound'));
     if (message.uuid === 'system') throw new BadRequest(this.res.t('messageCannotFlagSystemMessages', {communityManagerEmail: COMMUNITY_MANAGER_EMAIL}));
 
-    return {message, group};
+    const userComment = this.req.body.comment;
+
+    return {message, group, userComment};
   }
 
-  async notify (group, message) {
+  async notify (group, message, userComment) {
     await super.notify(group, message);
 
     const groupUrl = getGroupUrl(group);
-    sendTxn(FLAG_REPORT_EMAILS, 'flag-report-to-mods', this.emailVariables.concat([
+    sendTxn(FLAG_REPORT_EMAILS, 'flag-report-to-mods-with-comments', this.emailVariables.concat([
       {name: 'GROUP_NAME', content: group.name},
       {name: 'GROUP_TYPE', content: group.type},
       {name: 'GROUP_ID', content: group._id},
       {name: 'GROUP_URL', content: groupUrl},
+      {name: 'REPORTER_COMMENT', content: userComment || ''},
     ]));
 
     slack.sendFlagNotification({
@@ -60,6 +63,7 @@ export default class GroupChatReporter extends ChatReporter {
       flagger: this.user,
       group,
       message,
+      userComment,
     });
   }
 
@@ -89,9 +93,9 @@ export default class GroupChatReporter extends ChatReporter {
   }
 
   async flag () {
-    let {message, group} = await this.validate();
+    let {message, group, userComment} = await this.validate();
     await this.flagGroupMessage(group, message);
-    await this.notify(group, message);
+    await this.notify(group, message, userComment);
     return message;
   }
 }

website/server/libs/slack.js

@@ -24,6 +24,7 @@ function sendFlagNotification ({
   flagger,
   group,
   message,
+  userComment,
 }) {
   if (!SLACK_FLAGGING_URL) {
     return;
@@ -33,6 +34,10 @@ function sendFlagNotification ({
   let title = `Flag in ${group.name}`;
   let text = `${flagger.profile.name} (${flagger.id}) flagged a message (language: ${flagger.preferences.language})`;
 
+  if (userComment) {
+    text += ` and commented: ${userComment}`;
+  }
+
   if (group.id === TAVERN_ID) {
     titleLink = `${BASE_URL}/groups/tavern`;
   } else if (group.privacy === 'public') {