Merge pull request #494 from layerx-labs/fix-comment-notifications

Fix comment notifications

components/profile/notification-form/view.tsx

@@ -47,7 +47,7 @@ export default function NotificationFormView({
   const { t } = useTranslation(["common", " profile"]);
 
   return (
-    <div className="row mb-4">
+    <div className="row mb-5">
       <div className="col-12">
         <div className="row align-items-end gap-2 gap-lg-0">
           <div className="col-12 col-lg-4">
@@ -129,7 +129,7 @@ export default function NotificationFormView({
         </If>
       </div>
 
-      <div className="row align-items-center mt-3">
+      <div className="row align-items-center mt-4">
         <div className="d-flex col justify-content-between align-items-center">
           <div className="mr-1">
             <div className="base-medium text-white mb-1">{t("profile:notifications-form.title")}</div>
@@ -148,9 +148,9 @@ export default function NotificationFormView({
       </div>
 
       <If condition={isNotificationEnabled}>
-        <div className="row mt-2">
+        <div className="row mt-4">
           <div className="col-12 col-md-6">
-            <div className="row align-items-center gy-3">
+            <div className="row align-items-center gy-4">
               {Object.keys(notificationSettings).map(key => (
                 <div className="col-12 col-md-6" key={key}>
                   <div className="d-flex align-items-center gap-1">

db/models/user.js

@@ -150,6 +150,12 @@ class User extends Model {
       sourceKey: "id",
       as: "comments"
     });
+
+    this.hasOne(models.notificationSettings, {
+      foreignKey: "userId",
+      sourceKey: "id",
+      as: "notificationSettings"
+    });
   }
 
   static findByAddress(address) {

server/common/comments/post.ts

@@ -202,6 +202,63 @@ export default async function post(req: NextApiRequest, res: NextApiResponse) {
     }
   }
 
+
+  const subscribers = await models.user.findAll({
+    attributes: ["id", "email"],
+    where: {
+      [Op.and]: [
+        { email: { [Op.not]: null } },
+        { email: { [Op.not]: "" } },
+        { 
+          id: { 
+            [Op.notIn]: pushEvents.flatMap(event => event.params.target.map(target => target.id))
+          } 
+        },
+        { id: { [Op.ne]: bounty.userId } }
+      ]
+    },
+    include: [
+      {
+        association: "notificationSettings",
+        required: true,
+        attributes: [],
+        where: {
+          subscriptions: {
+            [Op.contains]: [bounty.id]
+          }
+        },
+      }
+    ]
+  });
+
+  if (subscribers.length) {
+    const data = {
+      type: deliverableId && "deliverable" || proposalId && "proposal" || "task",
+      entryId: deliverableId || proposalId,
+      taskId: issueId,
+      comment,
+      madeBy: user.handle || user.address,
+      creator: user.address,
+      marketplace: bounty.network.name,
+    };
+
+    const params = {
+      type: AnalyticEventName.SUBSCRIBER_COMMENT,
+      target: subscribers,
+      data
+    };
+
+
+    pushEvents.push({ name: AnalyticEventName.SUBSCRIBER_COMMENT, params });
+    pushEvents.push({ 
+      name: AnalyticEventName.NOTIF_SUBSCRIBER_COMMENT,
+      params: {
+        ...params,
+        type: AnalyticEventName.NOTIF_SUBSCRIBER_COMMENT
+      }
+    });
+  }
+
   if (pushEvents.length)
     Push.events(pushEvents);
 

server/services/notifications/templates.ts

@@ -7,4 +7,6 @@ export const Templates: { [k in AnalyticEventName]?: string } = {
   NOTIF_REPLY_TO_THREAD_CREATOR: "reply-thread-creator.hbs",
   REPLY_TO_THREAD_PARTICIPANT: "reply-thread-participant.hbs",
   NOTIF_REPLY_TO_THREAD_PARTICIPANT: "reply-thread-participant.hbs",
+  SUBSCRIBER_COMMENT: "comment-subscriber.hbs",
+  NOTIF_SUBSCRIBER_COMMENT: "comment-subscriber.hbs",
 }

server/services/push/types/index.ts

@@ -18,6 +18,7 @@ export type CommentPushProps =
       taskId: string;
       entryId?: string;
       creator?: string;
+      type?: "task" | "proposal" | "deliverable"
     }
   >
 
@@ -51,6 +52,8 @@ export enum AnalyticEventName {
   NOTIF_REPLY_TO_THREAD_CREATOR = "NOTIF_REPLY_TO_THREAD_CREATOR",
   REPLY_TO_THREAD_PARTICIPANT = "REPLY_TO_THREAD_PARTICIPANT",
   NOTIF_REPLY_TO_THREAD_PARTICIPANT = "NOTIF_REPLY_TO_THREAD_PARTICIPANT",
+  SUBSCRIBER_COMMENT = "SUBSCRIBER_COMMENT",
+  NOTIF_SUBSCRIBER_COMMENT = "NOTIF_SUBSCRIBER_COMMENT",
 }
 
 export enum AnalyticTypes {
@@ -69,4 +72,6 @@ export const AnalyticsEvents: AnalyticEventPool = {
   [AnalyticEventName.NOTIF_REPLY_TO_THREAD_CREATOR]: [analytic(AnalyticTypes.CreateNotification)],
   [AnalyticEventName.REPLY_TO_THREAD_PARTICIPANT]: [analytic(AnalyticTypes.EmailNotification)],
   [AnalyticEventName.NOTIF_REPLY_TO_THREAD_PARTICIPANT]: [analytic(AnalyticTypes.CreateNotification)],
+  [AnalyticEventName.SUBSCRIBER_COMMENT]: [analytic(AnalyticTypes.EmailNotification)],
+  [AnalyticEventName.NOTIF_SUBSCRIBER_COMMENT]: [analytic(AnalyticTypes.CreateNotification)],
 }

server/templates/compilers/email-comment-subscriber-template-compiler.ts

@@ -0,0 +1,35 @@
+import {Template} from "./template";
+import {EmailNotificationSubjects} from "../index";
+import Handlebars from "handlebars";
+import {CommentPushProps} from "../../services/push/types";
+import getConfig from "next/config";
+
+const { publicRuntimeConfig } = getConfig();
+
+export class EmailCommentSubscriberTemplateCompiler extends Template {
+  constructor() {
+    super("server/templates/");
+  }
+
+  compile(payload: CommentPushProps) {
+    const title = `${payload.data.marketplace} @ BEPRO | ${EmailNotificationSubjects[payload.type]}`;
+
+    const actionUrlEntryPart = payload.data.entryId ? `${payload.data.type}/${payload.data.entryId}/` : "";
+    const actionUrlPart =
+      `${payload.data.marketplace}/task/${payload.data.taskId}/${actionUrlEntryPart}`;
+
+    const templateData = {
+      pageTitle: title,
+      comment: payload.data.comment,
+      type: payload.data.type,
+      isTaskType: payload.data.type === "task",
+      actionHref: `${publicRuntimeConfig.urls.home}/${actionUrlPart}/?fromEmail=${payload.uuid}`,
+      commentCreator: payload.data.creator,
+    };
+
+    super.registerPartials();
+
+    return Handlebars.compile(this.getHtmlOf("emails/comment-subscriber.hbs"))(templateData, {allowProtoPropertiesByDefault: true});
+  }
+
+}

server/templates/compilers/email-comment-template-compiler.ts

@@ -2,6 +2,9 @@ import {Template} from "./template";
 import {EmailNotificationSubjects} from "../index";
 import Handlebars from "handlebars";
 import {CommentPushProps} from "../../services/push/types";
+import getConfig from "next/config";
+
+const { publicRuntimeConfig } = getConfig();
 
 export class EmailCommentTemplateCompiler extends Template {
 
@@ -32,7 +35,7 @@ export class EmailCommentTemplateCompiler extends Template {
       pageTitle: title,
       comment: payload.data.comment,
       type,
-      actionHref: `https://app.bepro.network/${actionUrlPart}/?fromEmail=${payload.uuid}`
+      actionHref: `${publicRuntimeConfig.urls.home}/${actionUrlPart}/?fromEmail=${payload.uuid}`
     };
 
     super.registerPartials();

server/templates/compilers/get-template-compiler.ts

@@ -5,7 +5,8 @@ import {warn} from "../../../services/logging";
 import {ErrorMessages} from "../../errors/error-messages";
 import {NotifCommentTemplateCompiler} from "./notif-comment-template-compiler";
 import { NotifReplyThreadTemplateCompiler } from "server/templates/compilers/notif-reply-thread-template-compiler";
-
+import { NotifCommentSubscriberTemplateCompiler } from "server/templates/compilers/notif-comment-subscriber-template-compiler";
+import { EmailCommentSubscriberTemplateCompiler } from "server/templates/compilers/email-comment-subscriber-template-compiler";
 
 export function getTemplateCompiler({name}: Pick<AnalyticEvent, "name">): Template {
   switch (name) {
@@ -20,6 +21,10 @@ export function getTemplateCompiler({name}: Pick<AnalyticEvent, "name">): Templa
   case AnalyticEventName.NOTIF_REPLY_TO_THREAD_CREATOR:
   case AnalyticEventName.NOTIF_REPLY_TO_THREAD_PARTICIPANT:
     return new NotifReplyThreadTemplateCompiler();
+  case AnalyticEventName.SUBSCRIBER_COMMENT:
+    return new EmailCommentSubscriberTemplateCompiler();
+  case AnalyticEventName.NOTIF_SUBSCRIBER_COMMENT:
+    return new NotifCommentSubscriberTemplateCompiler();
   default:
     warn(ErrorMessages.UnknownTemplateCompiler, {name});
     return null;

server/templates/compilers/notif-comment-subscriber-template-compiler.ts

@@ -0,0 +1,29 @@
+import {Template} from "./template";
+import Handlebars from "handlebars";
+import {CommentPushProps} from "../../services/push/types";
+
+export class NotifCommentSubscriberTemplateCompiler extends Template {
+  constructor() {
+    super("server/templates/");
+  }
+
+  compile(payload: CommentPushProps) {
+    const actionUrlEntryPart = payload.data.entryId ? `${payload.data.type}/${payload.data.entryId}/` : "";
+    const actionUrlPart =
+      `${payload.data.marketplace}/task/${payload.data.taskId}/${actionUrlEntryPart}`;
+
+    const templateData = {
+      comment: payload.data.comment,
+      type: payload.data.type,
+      isTaskType: payload.data.type === "task",
+      actionHref: `${actionUrlPart}/`,
+      creator: payload.data.creator,
+      marketplace: payload.data.marketplace,
+    };
+
+    super.registerPartials();
+
+    return Handlebars.compile(this.getHtmlOf("notifs/comment-subscriber.hbs"))(templateData, {allowProtoPropertiesByDefault: true});
+  }
+
+}

server/templates/emails/comment-subscriber.hbs

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{pageTitle}}</title>
+    {{> headLinks}}
+    {{> styles}}
+</head>
+<body id="body">
+<table id="container" cellspacing="0" cellpadding="0" border="0">
+    <tr>
+        <td>
+            {{> logo}}
+            {{#if isTaskType}}
+                <h1>You have a new comment on a subscribed task</h1>
+            {{else}}
+                <h1>You have a new comment on a {{type}} of a subscribed task</h1>
+            {{/if}}
+
+            <table id="action-card" cellspacing="0" cellpadding="0" border="0">
+                <tr>
+                    <td>
+                        <p>{{commentCreator}} commented:</p>
+                        <p>{{comment}}</p>
+                        <a id="action-button" href="{{actionHref}}">View comment</a>
+                    </td>
+                </tr>
+            </table>
+            {{> appLinks}}
+        </td>
+    </tr>
+</table>
+</body>
+</html>

server/templates/index.ts

@@ -12,5 +12,8 @@ export const EmailTemplates = {
 export const EmailNotificationSubjects: { [k in AnalyticEventName]?: string } = {
   COMMENT_PROPOSAL: "A comment has been made on your proposal",
   COMMENT_DELIVERABLE: "A comment has been made on your deliverable",
-  COMMENT_TASK: "A comment has been made on your task"
+  COMMENT_TASK: "A comment has been made on your task",
+  REPLY_TO_THREAD_CREATOR: "A new reply on your comment",
+  REPLY_TO_THREAD_PARTICIPANT: "A new reply on a thread you participate",
+  SUBSCRIBER_COMMENT: "A new comment on a task you're subscribed"
 }

server/templates/notifs/comment-subscriber.hbs

@@ -0,0 +1,25 @@
+{{> avatar}}
+<div id="link">{{actionHref}}</div>
+<div class="d-flex flex-column ms-3">
+    {{#if isTaskType}}
+        <span class="xs-medium title text-white mb-3">
+            Comment on a subscribed task
+        </span>
+    {{else}}
+        <span class="xs-medium title text-white mb-3">
+            Comment on a {{type}} of a subscribed task
+        </span>
+    {{/if}}
+
+    {{#if comment}}
+    <span class="sm-regular mb-3 text-white-50">
+        {{comment}}
+    </span>
+    {{/if}}
+
+    <div class="d-flex gap-2 text-white-50">
+        <span class="sm-regular">{{marketplace}}</span>
+        <span>•</span>
+        <span class="sm-regular">%DATE%</span>
+    </div>
+</div>