Create FlagCommentPage

src/ROUTES.js

@@ -108,6 +108,8 @@ export default {
     NEW_TASK_DETAILS: `${NEW_TASK}/details`,
     NEW_TASK_TITLE: `${NEW_TASK}/title`,
     NEW_TASK_DESCRIPTION: `${NEW_TASK}/description`,
+    FLAG_COMMENT: `flag/:reportID/:reportActionID`,
+    getFlagCommentRoute: (reportID, reportActionID) => `flag/${reportID}/${reportActionID}`,
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',

src/components/Icon/Expensicons.js

@@ -41,6 +41,10 @@ import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
 import Expand from '../../../assets/images/expand.svg';
 import Eye from '../../../assets/images/eye.svg';
 import EyeDisabled from '../../../assets/images/eye-disabled.svg';
+import Flag from '../../../assets/images/flag.svg';
+import FlagLevelOne from '../../../assets/images/flag_level_01.svg';
+import FlagLevelTwo from '../../../assets/images/flag_level_02.svg';
+import FlagLevelThree from '../../../assets/images/flag_level_03.svg';
 import Gallery from '../../../assets/images/gallery.svg';
 import Gear from '../../../assets/images/gear.svg';
 import Globe from '../../../assets/images/globe.svg';
@@ -162,6 +166,10 @@ export {
     EyeDisabled,
     FallbackAvatar,
     FallbackWorkspaceAvatar,
+    Flag,
+    FlagLevelOne,
+    FlagLevelTwo,
+    FlagLevelThree,
     Gallery,
     Gear,
     Globe,

src/languages/en.js

@@ -267,6 +267,7 @@ export default {
         deleteConfirmation: ({action}) => `Are you sure you want to delete this ${ReportActionsUtils.isMoneyRequestAction(action) ? 'request' : 'comment'}?`,
         onlyVisible: 'Only visible to',
         replyInThread: 'Reply in thread',
+        flagAsOffensive: 'Flag as offensive',
     },
     emojiReactions: {
         addReactionTooltip: 'Add reaction',
@@ -1400,4 +1401,21 @@ export default {
         copyUrlToClipboard: 'Copy URL to clipboard',
         copied: 'Copied!',
     },
+    moderation: {
+        flagDescription:
+            'All flagged messages will be sent to a moderator for review. If a message is flagged at a level above Spam or Inconsiderate, it will immediately be hidden. Users may, however, choose to reveal the message while it is being reviewed if they choose. Dependent on the decision of the moderator, the message may or may not be permanently hidden or deleted, and the sender may be banned from posting temporarily or permanently.',
+        chooseAReason: 'Choose a reason below:',
+        spam: 'Spam',
+        spamDescription: 'Unsolicited off-topic promotion',
+        inconsiderate: 'Inconsiderate',
+        inconsiderateDescription: 'Insulting or disrespectful phrasing, with questionable intentions',
+        intimidation: 'Intimidation',
+        intimidationDescription: 'Aggressively pursuing an agenda over valid objections',
+        bullying: 'Bullying',
+        bullyingDescription: 'Targeting an individual to obtain obedience',
+        harassment: 'Harassment',
+        harassmentDescription: 'Racist, misogynistic, or other broadly discriminatory behavior',
+        assault: 'Assault',
+        assaultDescription: 'Specifically targeted emotional attack with the intention of harm',
+    },
 };

src/languages/es.js

@@ -266,6 +266,7 @@ export default {
         deleteConfirmation: ({action}) => `¿Estás seguro de que quieres eliminar este ${ReportActionsUtils.isMoneyRequestAction(action) ? 'pedido' : 'comentario'}`,
         onlyVisible: 'Visible sólo para',
         replyInThread: 'Responder en el hilo',
+        flagAsOffensive: 'Marcar como ofensivo',
     },
     emojiReactions: {
         addReactionTooltip: 'Añadir una reacción',
@@ -1866,4 +1867,21 @@ export default {
         copyUrlToClipboard: 'Copiar URL al portapapeles',
         copied: '¡Copiado!',
     },
+    moderation: {
+        flagDescription:
+            'Todos los mensajes marcados se enviarán a un moderador para su revisión. Si un mensaje se marca en un nivel superior a Spam o Desconsiderado, se ocultará de inmediato. Sin embargo, los usuarios pueden optar por revelar el mensaje mientras se revisa si así lo desean. Dependiendo de la decisión del moderador, el mensaje puede ocultarse o eliminarse permanentemente o no, y el remitente puede tener prohibido enviar mensajes de forma temporal o permanente.',
+        chooseAReason: 'Elige un motivo de abajo:',
+        spam: 'Spam',
+        spamDescription: 'Promoción fuera de tema no solicitada',
+        inconsiderate: 'Desconsiderado',
+        inconsiderateDescription: 'Frase insultante o irrespetuosa, con intenciones cuestionables',
+        intimidation: 'Intimidación',
+        intimidationDescription: 'Persigue agresivamente una agenda sobre objeciones válidas',
+        bullying: 'Bullying',
+        bullyingDescription: 'Apunta a un individuo para obtener obediencia',
+        harassment: 'Acoso',
+        harassmentDescription: 'Comportamiento racista, misógino u otro comportamiento discriminatorio',
+        assault: 'Agresion',
+        assaultDescription: 'Ataque emocional específicamente dirigido con la intención de hacer daño',
+    },
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -370,6 +370,12 @@ class AuthScreens extends React.Component {
                     component={ModalStackNavigators.YearPickerStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="Flag_Comment"
+                    options={modalScreenOptions}
+                    component={ModalStackNavigators.FlagCommentStackNavigator}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name={SCREENS.NOT_FOUND}
                     options={{headerShown: false}}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -702,6 +702,16 @@ const YearPickerStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const FlagCommentStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const FlagCommentPage = require('../../../pages/FlagCommentPage').default;
+            return FlagCommentPage;
+        },
+        name: 'FlagComment_Root',
+    },
+]);
+
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
@@ -723,4 +733,5 @@ export {
     ReimbursementAccountModalStackNavigator,
     WalletStatementStackNavigator,
     YearPickerStackNavigator,
+    FlagCommentStackNavigator,
 };

src/libs/Navigation/linkingConfig.js

@@ -327,6 +327,11 @@ export default {
                     YearPicker_Root: ROUTES.SELECT_YEAR,
                 },
             },
+            Flag_Comment: {
+                screens: {
+                    FlagComment_Root: ROUTES.FLAG_COMMENT,
+                },
+            },
             [SCREENS.NOT_FOUND]: '*',
         },
     },

src/libs/ReportUtils.js

@@ -193,6 +193,25 @@ function canEditReportAction(reportAction) {
     );
 }
 
+/**
+ * Can only flag if:
+ *
+ * - It was written by someone else
+ * - It's an ADDCOMMENT that is not an attachment
+ *
+ * @param {Object} reportAction
+ * @returns {Boolean}
+ */
+function canFlagReportAction(reportAction) {
+    return (
+        reportAction.actorEmail !== sessionEmail &&
+        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
+        !isReportMessageAttachment(lodashGet(reportAction, ['message', 0], {})) &&
+        !ReportActionsUtils.isDeletedAction(reportAction) &&
+        !ReportActionsUtils.isCreatedTaskReportAction(reportAction)
+    );
+}
+
 /**
  * Whether the Money Request report is settled
  *
@@ -2255,6 +2274,7 @@ export {
     isReportMessageAttachment,
     findLastAccessedReport,
     canEditReportAction,
+    canFlagReportAction,
     canDeleteReportAction,
     canLeaveRoom,
     sortReportsByLastRead,

src/libs/actions/Report.js

@@ -1685,30 +1685,30 @@ function leaveRoom(reportID) {
  * @param {String} severity
  */
 function flagComment(reportID, reportAction, severity) {
-    let newDecision;
+    const message = reportAction.message[0];
+    let updatedDecision;
     if (severity === CONST.MODERATION.FLAG_SEVERITY_SPAM || severity === CONST.MODERATION.FLAG_SEVERITY_INCONSIDERATE) {
-        newDecision = {
-            decision: CONST.MODERATION.MODERATOR_DECISION_PENDING,
-        };
+        if (_.isEmpty(message.moderationDecisions) || message.moderationDecisions[0].decision !== CONST.MODERATOR_DECISION_PENDING_HIDE) {
+            updatedDecision = [{
+                decision: CONST.MODERATION.MODERATOR_DECISION_PENDING,
+            }];
+        }
     } else {
-        newDecision = {
+        updatedDecision = [{
             decision: CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE,
-        };
+        }];
     }
 
-    const message = reportAction.message[0];
     const reportActionID = reportAction.reportActionID;
 
-    const updatedDecisions = [...(message.moderationDecisions || []), newDecision];
-
     const updatedMessage = {
         ...message,
-        moderationDecisions: updatedDecisions,
+        moderationDecisions: updatedDecision,
     };
 
     const optimisticData = [
         {
-            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
             value: {
                 [reportActionID]: {
@@ -1721,7 +1721,7 @@ function flagComment(reportID, reportAction, severity) {
 
     const failureData = [
         {
-            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
             value: {
                 [reportActionID]: {
@@ -1734,7 +1734,7 @@ function flagComment(reportID, reportAction, severity) {
 
     const successData = [
         {
-            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
             value: {
                 [reportActionID]: {