feat: Add tracking pixel to notifications for mark-as-read functionality (#5626)

server/emails/templates/BaseEmail.tsx

@@ -1,4 +1,5 @@
 import Bull from "bull";
+import * as React from "react";
 import mailer from "@server/emails/mailer";
 import Logger from "@server/logging/Logger";
 import Metrics from "@server/logging/Metrics";
@@ -84,6 +85,9 @@ export default abstract class BaseEmail<T extends EmailProps, S = unknown> {
     }
 
     const data = { ...this.props, ...(bsResponse ?? ({} as S)) };
+    const notification = this.metadata?.notificationId
+      ? await Notification.unscoped().findByPk(this.metadata?.notificationId)
+      : undefined;
 
     try {
       await mailer.sendMail({
@@ -91,7 +95,12 @@ export default abstract class BaseEmail<T extends EmailProps, S = unknown> {
         fromName: this.fromName?.(data),
         subject: this.subject(data),
         previewText: this.preview(data),
-        component: this.render(data),
+        component: (
+          <>
+            {this.render(data)}
+            {notification ? this.pixel(notification) : null}
+          </>
+        ),
         text: this.renderAsText(data),
         headCSS: this.headCSS?.(data),
       });
@@ -105,24 +114,20 @@ export default abstract class BaseEmail<T extends EmailProps, S = unknown> {
       throw err;
     }
 
-    if (this.metadata?.notificationId) {
+    if (notification) {
       try {
-        await Notification.update(
-          {
-            emailedAt: new Date(),
-          },
-          {
-            where: {
-              id: this.metadata.notificationId,
-            },
-          }
-        );
+        notification.emailedAt = new Date();
+        await notification.save();
       } catch (err) {
         Logger.error(`Failed to update notification`, err, this.metadata);
       }
     }
   }
 
+  private pixel(notification: Notification) {
+    return <img src={notification.pixelUrl} width="1" height="1" />;
+  }
+
   /**
    * Returns the subject of the email.
    *