feat: Reaction notifications

apps/meteor/app/reactions/server/index.ts

@@ -1 +1,2 @@
 import './setReaction';
+import './notifications';

apps/meteor/app/reactions/server/notifications.ts

@@ -0,0 +1,107 @@
+import { Subscriptions, Users } from '@rocket.chat/models';
+
+import { callbacks } from '../../../server/lib/callbacks';
+import { i18n } from '../../../server/lib/i18n';
+import { notifyOnSubscriptionChangedByRoomIdAndUserId } from '../../lib/server/lib/notifyListener';
+import { settings } from '../../settings/server';
+import { notifyDesktopUser } from '../../lib/server/functions/notifications/desktop';
+import { emoji } from '../../emoji/server';
+
+callbacks.add(
+	'afterSetReaction',
+	async (message, { user, reaction, room }) => {
+		try {
+			if (settings.get<boolean>('Troubleshoot_Disable_Notifications') === true) {
+				return;
+			}
+
+			if (!message.u?._id || message.u._id === user._id) {
+				return;
+			}
+
+			const recipient = await Users.findOneById(message.u._id, {
+				projection: {
+					'active': 1,
+					'status': 1,
+					'settings.preferences.receiveReactionNotifications': 1,
+					'language': 1,
+				},
+			});
+
+			if (!recipient || !recipient.active) {
+				return;
+			}
+
+			const receiveReactionNotifications =
+				recipient.settings?.preferences?.receiveReactionNotifications ??
+				settings.get<boolean>('Accounts_Default_User_Preferences_receiveReactionNotifications');
+
+			if (!receiveReactionNotifications) {
+				return;
+			}
+
+			await Subscriptions.incUserMentionsAndUnreadForRoomIdAndUserIds(room._id, [recipient._id], 0, 1);
+			void notifyOnSubscriptionChangedByRoomIdAndUserId(room._id, recipient._id);
+
+			const useRealName = settings.get<boolean>('UI_Use_Real_Name');
+			const reactorName = (useRealName && user.name) || user.username;
+
+			const emojione = (emoji.packages as any).emojione;
+			const emojiActual =
+				(emojione &&
+					(emoji.list[reaction] as any)?.uc_output &&
+					emojione.convert((emoji.list[reaction] as any).uc_output.toUpperCase())) ||
+				reaction;
+			const msgText = message.msg || i18n.t('Attachment', { lng: recipient.language });
+
+			const notificationMessage = i18n.t('Reaction_Notification', {
+				name: reactorName,
+				reaction: emojiActual,
+				message: msgText,
+				lng: recipient.language || settings.get<string>('Language') || 'en',
+			});
+
+			await notifyDesktopUser({
+				userId: recipient._id,
+				user,
+				message,
+				room,
+				notificationMessage,
+			});
+		} catch (e) {
+			console.error('Error sending reaction notification', e);
+		}
+	},
+	callbacks.priority.LOW,
+	'RecordReactionNotification',
+);
+
+callbacks.add(
+	'afterUnsetReaction',
+	async (message, { user, room }) => {
+		try {
+			if (!message.u?._id || message.u._id === user._id) {
+				return;
+			}
+
+			const recipientId = message.u._id;
+
+			await Subscriptions.updateOne(
+				{
+					rid: room._id,
+					'u._id': recipientId,
+					unread: { $gt: 0 },
+				},
+				{
+					$inc: { unread: -1 },
+				},
+			);
+
+			void notifyOnSubscriptionChangedByRoomIdAndUserId(room._id, recipientId);
+		} catch (e) {
+			console.error('Error handling reaction notification removal', e);
+		}
+	},
+	callbacks.priority.LOW,
+	'RecordReactionNotificationRemoval',
+);

apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx

@@ -204,6 +204,16 @@ const PreferencesNotificationsSection = () => {
 						</FieldRow>
 					</Field>
 				)}
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Receive_Reaction_Notifications')}</FieldLabel>
+						<Controller
+							name='receiveReactionNotifications'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
 			</FieldGroup>
 		</AccordionItem>
 	);

apps/meteor/client/views/account/preferences/useAccountPreferencesValues.ts

@@ -39,6 +39,7 @@ export type AccountPreferencesData = {
 	notificationsSoundVolume?: number;
 	voipRingerVolume?: number;
 	desktopNotificationVoiceCalls?: boolean;
+	receiveReactionNotifications?: boolean;
 };
 
 export const useAccountPreferencesValues = (): AccountPreferencesData => {
@@ -55,6 +56,7 @@ export const useAccountPreferencesValues = (): AccountPreferencesData => {
 	const receiveLoginDetectionEmail = useUserPreference<boolean>('receiveLoginDetectionEmail', true);
 	const notifyCalendarEvents = useUserPreference<boolean>('notifyCalendarEvents');
 	const enableMobileRinging = useUserPreference<boolean>('enableMobileRinging');
+	const receiveReactionNotifications = useUserPreference<boolean>('receiveReactionNotifications');
 
 	const unreadAlert = useUserPreference<boolean>('unreadAlert');
 	const showThreadsInMainChannel = useUserPreference<boolean>('showThreadsInMainChannel');
@@ -111,5 +113,6 @@ export const useAccountPreferencesValues = (): AccountPreferencesData => {
 		notificationsSoundVolume,
 		voipRingerVolume,
 		desktopNotificationVoiceCalls,
+		receiveReactionNotifications,
 	};
 };

apps/meteor/server/settings/accounts.ts

@@ -770,6 +770,12 @@ export const createAccountSettings = () =>
 				type: 'string',
 				public: true,
 			});
+
+			await this.add('Accounts_Default_User_Preferences_receiveReactionNotifications', true, {
+				type: 'boolean',
+				public: true,
+				i18nLabel: 'Receive_Reaction_Notifications',
+			});
 		});
 
 		await this.section('Avatar', async function () {

packages/i18n/src/locales/en.i18n.json

@@ -4340,6 +4340,7 @@
   "React_when_read_only_changed_successfully": "Allow reacting when read only changed successfully",
   "React_with__reaction__": "Reacted with {{reaction}}",
   "Reacted_with": "Reacted with",
+  "Reaction_Notification": "{{reaction}} to your message: {{message}}",
   "Reactions": "Reactions",
   "Read_Receipts": "Read receipts",
   "Read_by": "Read by",
@@ -4360,6 +4361,7 @@
   "Receive_Group_Mentions": "Receive @all and @here mentions",
   "Receive_Login_Detection_Emails": "Receive login detection emails",
   "Receive_Login_Detection_Emails_Description": "Receive an email each time a new login is detected on your account.",
+  "Receive_Reaction_Notifications": "Receive Reaction Notifications",
   "Receive_alerts": "Receive alerts",
   "Receive_login_notifications": "Receive login notifications",
   "Recent": "Recent",