From d1442aed3566bf609b27469e7a2aa5f78f3fd475 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 02:33:20 +0500
Subject: [PATCH 1/8] Block new reactions on report action of report that has
 creation errors

---
 .../Reactions/ReportActionItemEmojiReactions.js   | 15 +++++++++------
 src/pages/home/report/ReportActionItem.js         |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 806e87b4301d..0091a528fb5c 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -19,7 +19,7 @@ const propTypes = {
     emojiReactions: EmojiReactionsPropTypes,
 
     /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */
-    reportActionID: PropTypes.string.isRequired,
+    reportAction: PropTypes.object,
 
     /**
      * Function to call when the user presses on an emoji.
@@ -37,6 +37,7 @@ const defaultProps = {
 };
 
 function ReportActionItemEmojiReactions(props) {
+    const hasErrors = !_.isEmpty(props.reportAction.errors);
     const {reactionListRef} = useContext(ReportScreenContext);
     const popoverReactionListAnchor = useRef(null);
     let totalReactionCount = 0;
@@ -91,7 +92,7 @@ function ReportActionItemEmojiReactions(props) {
         };
 
         const onReactionListOpen = (event) => {
-            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID);
+            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportAction.reportActionID);
         };
 
         return {
@@ -143,10 +144,12 @@ function ReportActionItemEmojiReactions(props) {
                         </Tooltip>
                     );
                 })}
-                <AddReactionBubble
-                    onSelectEmoji={props.toggleReaction}
-                    reportAction={{reportActionID: props.reportActionID}}
-                />
+                {!hasErrors && (
+                    <AddReactionBubble
+                        onSelectEmoji={props.toggleReaction}
+                        reportAction={{reportActionID: props.reportAction.reportActionID}}
+                    />
+                )}
             </View>
         )
     );
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 9f0c2d8cda47..8b944b3354d0 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -399,7 +399,7 @@ function ReportActionItem(props) {
                 {!ReportActionsUtils.isMessageDeleted(props.action) && (
                     <View style={draftMessageRightAlign}>
                         <ReportActionItemEmojiReactions
-                            reportActionID={props.action.reportActionID}
+                            reportAction={props.action}
                             emojiReactions={props.emojiReactions}
                             toggleReaction={(emoji) => {
                                 if (Session.isAnonymousUser()) {

From bf188acfade22437b8ee4ffa402cbd25be4e00a6 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 02:33:53 +0500
Subject: [PATCH 2/8] Block user from removing reactions on report action of
 report that has creation errors

---
 src/components/Reactions/EmojiReactionBubble.js  | 16 ++++++++++++++--
 .../Reactions/ReportActionItemEmojiReactions.js  |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 30520cb633ef..0a7f308ce912 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -38,6 +38,9 @@ const propTypes = {
      */
     hasUserReacted: PropTypes.bool,
 
+    /** Whether the user can react with the current emoji */
+    isReactionBlocked: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -45,6 +48,7 @@ const defaultProps = {
     count: 0,
     onReactionListOpen: () => {},
     isContextMenu: false,
+    isReactionBlocked: false,
 
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -52,8 +56,16 @@ const defaultProps = {
 function EmojiReactionBubble(props) {
     return (
         <PressableWithSecondaryInteraction
-            style={({hovered, pressed}) => [styles.emojiReactionBubble, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu)]}
-            onPress={props.onPress}
+            style={({hovered, pressed}) => [
+                styles.emojiReactionBubble,
+                StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu),
+                props.isReactionBlocked && styles.cursorDisabled,
+            ]}
+            onPress={() => {
+                if (props.isReactionBlocked) return;
+
+                props.onPress();
+            }}
             onLongPress={props.onReactionListOpen}
             onSecondaryInteraction={props.onReactionListOpen}
             ref={props.forwardedRef}
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 0091a528fb5c..29c2661a68c9 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -139,6 +139,7 @@ function ReportActionItemEmojiReactions(props) {
                                     reactionUsers={reaction.reactionUsers}
                                     hasUserReacted={reaction.hasUserReacted}
                                     onReactionListOpen={reaction.onReactionListOpen}
+                                    isReactionBlocked={hasErrors}
                                 />
                             </View>
                         </Tooltip>

From aecdc3e4d120fb6601e32ae66171f0ffd4fd80be Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 03:53:42 +0500
Subject: [PATCH 3/8] Updated report action prop type in report item emoji
 reactions

---
 .../Reactions/ReportActionItemEmojiReactions.js           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 29c2661a68c9..59e65da9387a 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -18,8 +18,12 @@ import ReportScreenContext from '../../pages/home/ReportScreenContext';
 const propTypes = {
     emojiReactions: EmojiReactionsPropTypes,
 
-    /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */
-    reportAction: PropTypes.object,
+    /** The report action belonging to the emoji reaction */
+    reportAction: PropTypes.shape({
+        reportActionID: PropTypes.string.isRequired,
+        // eslint-disable-next-line react/forbid-prop-types
+        errors: PropTypes.object,
+    }),
 
     /**
      * Function to call when the user presses on an emoji.

From 87ed5ddd8130a6a2982715fe390f2bd2b45bbaf1 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 12:28:03 +0500
Subject: [PATCH 4/8] Updated early return style

---
 src/components/Reactions/EmojiReactionBubble.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 0a7f308ce912..1e7816052658 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -62,7 +62,9 @@ function EmojiReactionBubble(props) {
                 props.isReactionBlocked && styles.cursorDisabled,
             ]}
             onPress={() => {
-                if (props.isReactionBlocked) return;
+                if (props.isReactionBlocked) {
+                    return;
+                }
 
                 props.onPress();
             }}

From 1086186fac2f17270c56093aec62ce2a11ca9b06 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 12:38:10 +0500
Subject: [PATCH 5/8] Added prop for report action item error in emoji
 reactions

---
 .../ReportActionItemEmojiReactions.js         | 21 +++++++++----------
 src/pages/home/report/ReportActionItem.js     | 11 +++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 59e65da9387a..1912014d6716 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -18,12 +18,8 @@ import ReportScreenContext from '../../pages/home/ReportScreenContext';
 const propTypes = {
     emojiReactions: EmojiReactionsPropTypes,
 
-    /** The report action belonging to the emoji reaction */
-    reportAction: PropTypes.shape({
-        reportActionID: PropTypes.string.isRequired,
-        // eslint-disable-next-line react/forbid-prop-types
-        errors: PropTypes.object,
-    }),
+    /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */
+    reportActionID: PropTypes.string.isRequired,
 
     /**
      * Function to call when the user presses on an emoji.
@@ -32,16 +28,19 @@ const propTypes = {
      */
     toggleReaction: PropTypes.func.isRequired,
 
+    /** A bool indicating if the current report action has any errors */
+    hasReportActionErrors: PropTypes.bool,
+
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
     emojiReactions: {},
+    hasReportActionErrors: false,
 };
 
 function ReportActionItemEmojiReactions(props) {
-    const hasErrors = !_.isEmpty(props.reportAction.errors);
     const {reactionListRef} = useContext(ReportScreenContext);
     const popoverReactionListAnchor = useRef(null);
     let totalReactionCount = 0;
@@ -96,7 +95,7 @@ function ReportActionItemEmojiReactions(props) {
         };
 
         const onReactionListOpen = (event) => {
-            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportAction.reportActionID);
+            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID);
         };
 
         return {
@@ -143,16 +142,16 @@ function ReportActionItemEmojiReactions(props) {
                                     reactionUsers={reaction.reactionUsers}
                                     hasUserReacted={reaction.hasUserReacted}
                                     onReactionListOpen={reaction.onReactionListOpen}
-                                    isReactionBlocked={hasErrors}
+                                    isReactionBlocked={props.hasReportActionErrors}
                                 />
                             </View>
                         </Tooltip>
                     );
                 })}
-                {!hasErrors && (
+                {!props.hasReportActionErrors && (
                     <AddReactionBubble
                         onSelectEmoji={props.toggleReaction}
-                        reportAction={{reportActionID: props.reportAction.reportActionID}}
+                        reportAction={{reportActionID: props.reportActionID}}
                     />
                 )}
             </View>
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 8b944b3354d0..7b6105a3fd05 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -245,7 +245,7 @@ function ReportActionItem(props) {
      * @param {Boolean} hovered whether the ReportActionItem is hovered
      * @returns {Object} child component(s)
      */
-    const renderItemContent = (hovered = false) => {
+    const renderItemContent = (hovered = false, hasErrors = false) => {
         let children;
         const originalMessage = lodashGet(props.action, 'originalMessage', {});
 
@@ -399,8 +399,9 @@ function ReportActionItem(props) {
                 {!ReportActionsUtils.isMessageDeleted(props.action) && (
                     <View style={draftMessageRightAlign}>
                         <ReportActionItemEmojiReactions
-                            reportAction={props.action}
+                            reportActionID={props.action.reportActionID}
                             emojiReactions={props.emojiReactions}
+                            hasReportActionErrors={hasErrors}
                             toggleReaction={(emoji) => {
                                 if (Session.isAnonymousUser()) {
                                     hideContextMenu(false);
@@ -438,8 +439,8 @@ function ReportActionItem(props) {
      * @param {Boolean} isWhisper whether the ReportActionItem is a whisper
      * @returns {Object} report action item
      */
-    const renderReportActionItem = (hovered, isWhisper) => {
-        const content = renderItemContent(hovered || isContextMenuActive);
+    const renderReportActionItem = (hovered, isWhisper, hasErrors) => {
+        const content = renderItemContent(hovered || isContextMenuActive, hasErrors);
 
         if (props.draftMessage) {
             return <ReportActionItemDraft>{content}</ReportActionItemDraft>;
@@ -592,7 +593,7 @@ function ReportActionItem(props) {
                                         />
                                     </View>
                                 )}
-                                {renderReportActionItem(hovered, isWhisper)}
+                                {renderReportActionItem(hovered, isWhisper, hasErrors)}
                             </OfflineWithFeedback>
                         </View>
                     </View>

From bf8d641c4e6dfdd59d3eb2d1e5fc6675ca871937 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 12:39:48 +0500
Subject: [PATCH 6/8] Added jsdoc for report action errors prop

---
 src/pages/home/report/ReportActionItem.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 7b6105a3fd05..eec643d1ea0e 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -243,6 +243,7 @@ function ReportActionItem(props) {
     /**
      * Get the content of ReportActionItem
      * @param {Boolean} hovered whether the ReportActionItem is hovered
+     * @param {Boolean} hasErrors whether the report action has any errors
      * @returns {Object} child component(s)
      */
     const renderItemContent = (hovered = false, hasErrors = false) => {
@@ -437,6 +438,7 @@ function ReportActionItem(props) {
      * Get ReportActionItem with a proper wrapper
      * @param {Boolean} hovered whether the ReportActionItem is hovered
      * @param {Boolean} isWhisper whether the ReportActionItem is a whisper
+     * @param {Boolean} hasErrors whether the report action has any errors
      * @returns {Object} report action item
      */
     const renderReportActionItem = (hovered, isWhisper, hasErrors) => {

From 913794278042fe348769ed439f06fbabbab7bee4 Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 19:32:48 +0500
Subject: [PATCH 7/8] Renamed reaction blocked prop

---
 .../Reactions/ReportActionItemEmojiReactions.js        | 10 +++++-----
 src/pages/home/report/ReportActionItem.js              |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 1912014d6716..0be077bd5f0e 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -28,8 +28,8 @@ const propTypes = {
      */
     toggleReaction: PropTypes.func.isRequired,
 
-    /** A bool indicating if the current report action has any errors */
-    hasReportActionErrors: PropTypes.bool,
+    /** A bool indicating if the user can add or remove reactions from current action */
+    isReactionBlocked: PropTypes.bool,
 
     ...withCurrentUserPersonalDetailsPropTypes,
 };
@@ -37,7 +37,7 @@ const propTypes = {
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
     emojiReactions: {},
-    hasReportActionErrors: false,
+    isReactionBlocked: false,
 };
 
 function ReportActionItemEmojiReactions(props) {
@@ -142,13 +142,13 @@ function ReportActionItemEmojiReactions(props) {
                                     reactionUsers={reaction.reactionUsers}
                                     hasUserReacted={reaction.hasUserReacted}
                                     onReactionListOpen={reaction.onReactionListOpen}
-                                    isReactionBlocked={props.hasReportActionErrors}
+                                    isReactionBlocked={props.isReactionBlocked}
                                 />
                             </View>
                         </Tooltip>
                     );
                 })}
-                {!props.hasReportActionErrors && (
+                {!props.isReactionBlocked && (
                     <AddReactionBubble
                         onSelectEmoji={props.toggleReaction}
                         reportAction={{reportActionID: props.reportActionID}}
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index eec643d1ea0e..0949fff044fe 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -402,7 +402,7 @@ function ReportActionItem(props) {
                         <ReportActionItemEmojiReactions
                             reportActionID={props.action.reportActionID}
                             emojiReactions={props.emojiReactions}
-                            hasReportActionErrors={hasErrors}
+                            isReactionBlocked={hasErrors}
                             toggleReaction={(emoji) => {
                                 if (Session.isAnonymousUser()) {
                                     hideContextMenu(false);

From c17a085dac644ac761119388b04daad0382b6d5d Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Wed, 23 Aug 2023 23:20:08 +0500
Subject: [PATCH 8/8] Updated emojis block boolean prop name

---
 src/components/Reactions/EmojiReactionBubble.js        | 10 +++++-----
 .../Reactions/ReportActionItemEmojiReactions.js        | 10 +++++-----
 src/pages/home/report/ReportActionItem.js              |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 1e7816052658..bb37735d6920 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -38,8 +38,8 @@ const propTypes = {
      */
     hasUserReacted: PropTypes.bool,
 
-    /** Whether the user can react with the current emoji */
-    isReactionBlocked: PropTypes.bool,
+    /** We disable reacting with emojis on report actions that have errors */
+    shouldBlockReactions: PropTypes.bool,
 
     ...windowDimensionsPropTypes,
 };
@@ -48,7 +48,7 @@ const defaultProps = {
     count: 0,
     onReactionListOpen: () => {},
     isContextMenu: false,
-    isReactionBlocked: false,
+    shouldBlockReactions: false,
 
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -59,10 +59,10 @@ function EmojiReactionBubble(props) {
             style={({hovered, pressed}) => [
                 styles.emojiReactionBubble,
                 StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu),
-                props.isReactionBlocked && styles.cursorDisabled,
+                props.shouldBlockReactions && styles.cursorDisabled,
             ]}
             onPress={() => {
-                if (props.isReactionBlocked) {
+                if (props.shouldBlockReactions) {
                     return;
                 }
 
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 0be077bd5f0e..ec2755f1a5dd 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -28,8 +28,8 @@ const propTypes = {
      */
     toggleReaction: PropTypes.func.isRequired,
 
-    /** A bool indicating if the user can add or remove reactions from current action */
-    isReactionBlocked: PropTypes.bool,
+    /** We disable reacting with emojis on report actions that have errors */
+    shouldBlockReactions: PropTypes.bool,
 
     ...withCurrentUserPersonalDetailsPropTypes,
 };
@@ -37,7 +37,7 @@ const propTypes = {
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
     emojiReactions: {},
-    isReactionBlocked: false,
+    shouldBlockReactions: false,
 };
 
 function ReportActionItemEmojiReactions(props) {
@@ -142,13 +142,13 @@ function ReportActionItemEmojiReactions(props) {
                                     reactionUsers={reaction.reactionUsers}
                                     hasUserReacted={reaction.hasUserReacted}
                                     onReactionListOpen={reaction.onReactionListOpen}
-                                    isReactionBlocked={props.isReactionBlocked}
+                                    shouldBlockReactions={props.shouldBlockReactions}
                                 />
                             </View>
                         </Tooltip>
                     );
                 })}
-                {!props.isReactionBlocked && (
+                {!props.shouldBlockReactions && (
                     <AddReactionBubble
                         onSelectEmoji={props.toggleReaction}
                         reportAction={{reportActionID: props.reportActionID}}
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 0949fff044fe..f61e4d5e1c5d 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -402,7 +402,7 @@ function ReportActionItem(props) {
                         <ReportActionItemEmojiReactions
                             reportActionID={props.action.reportActionID}
                             emojiReactions={props.emojiReactions}
-                            isReactionBlocked={hasErrors}
+                            shouldBlockReactions={hasErrors}
                             toggleReaction={(emoji) => {
                                 if (Session.isAnonymousUser()) {
                                     hideContextMenu(false);
