diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.tsx b/src/components/Reactions/ReportActionItemEmojiReactions.tsx index c6bf4f9e4016..943158607db4 100644 --- a/src/components/Reactions/ReportActionItemEmojiReactions.tsx +++ b/src/components/Reactions/ReportActionItemEmojiReactions.tsx @@ -33,7 +33,7 @@ type ReportActionItemEmojiReactionsProps = WithCurrentUserPersonalDetailsProps & * This can also be an emoji the user already reacted with, * hence this function asks to toggle the reaction by emoji. */ - toggleReaction: (emoji: Emoji) => void; + toggleReaction: (emoji: Emoji, ignoreSkinToneOnCompare?: boolean) => void; /** We disable reacting with emojis on report actions that have errors */ shouldBlockReactions?: boolean; @@ -107,7 +107,7 @@ function ReportActionItemEmojiReactions({ totalReactionCount += reactionCount; const onPress = () => { - toggleReaction(emoji); + toggleReaction(emoji, true); }; const onReactionListOpen = (event: ReactionListEvent) => { diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index bc5f7a347cd0..edded7a4c4c6 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -2612,6 +2612,7 @@ function toggleEmojiReaction( reactionObject: Emoji, existingReactions: OnyxEntry, paramSkinTone: number = preferredSkinTone, + ignoreSkinToneOnCompare = false, ) { const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction); @@ -2633,7 +2634,7 @@ function toggleEmojiReaction( // Only use skin tone if emoji supports it const skinTone = emoji.types === undefined ? -1 : paramSkinTone; - if (existingReactionObject && EmojiUtils.hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, skinTone)) { + if (existingReactionObject && EmojiUtils.hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, ignoreSkinToneOnCompare ? undefined : skinTone)) { removeEmojiReaction(originalReportID, reportAction.reportActionID, emoji); return; } diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 81eea8866181..bd19dff42038 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -381,8 +381,8 @@ function ReportActionItem({ }, [index, originalMessage, prevActionResolution, reportScrollManager, isActionableWhisper, hasResolutionInOriginalMessage]); const toggleReaction = useCallback( - (emoji: Emoji) => { - Report.toggleEmojiReaction(report.reportID, action, emoji, emojiReactions); + (emoji: Emoji, ignoreSkinToneOnCompare?: boolean) => { + Report.toggleEmojiReaction(report.reportID, action, emoji, emojiReactions, undefined, ignoreSkinToneOnCompare); }, [report, action, emojiReactions], ); @@ -757,7 +757,7 @@ function ReportActionItem({ reportAction={action} emojiReactions={emojiReactions} shouldBlockReactions={hasErrors} - toggleReaction={(emoji) => { + toggleReaction={(emoji, ignoreSkinToneOnCompare) => { if (Session.isAnonymousUser()) { hideContextMenu(false); @@ -765,7 +765,7 @@ function ReportActionItem({ Session.signOutAndRedirectToSignIn(); }); } else { - toggleReaction(emoji); + toggleReaction(emoji, ignoreSkinToneOnCompare); } }} setIsEmojiPickerActive={setIsEmojiPickerActive}