[CORL-3030]: New notification types

client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx

@@ -10,6 +10,7 @@ import { GQLNOTIFICATION_TYPE } from "coral-framework/schema";
 import {
   CheckCircleIcon,
   LegalHammerIcon,
+  MessagesBubbleSquareTextIcon,
   QuestionCircleIcon,
   RejectCommentBoxIcon,
   SvgIcon,
@@ -24,6 +25,7 @@ import { NotificationContainer_viewer } from "coral-stream/__generated__/Notific
 
 import DSAReportDecisionMadeNotificationBody from "./DSAReportDecisionMadeNotificationBody";
 import RejectedCommentNotificationBody from "./RejectedCommentNotificationBody";
+import RepliedCommentNotificationBody from "./RepliedCommentNotificationBody";
 
 import styles from "./NotificationContainer.css";
 
@@ -48,7 +50,12 @@ const getIcon = (type: NOTIFICATION_TYPE | null): ComponentType => {
   if (type === GQLNOTIFICATION_TYPE.DSA_REPORT_DECISION_MADE) {
     return LegalHammerIcon;
   }
-
+  if (type === GQLNOTIFICATION_TYPE.REPLY) {
+    return MessagesBubbleSquareTextIcon;
+  }
+  if (type === GQLNOTIFICATION_TYPE.REPLY_STAFF) {
+    return MessagesBubbleSquareTextIcon;
+  }
   return QuestionCircleIcon;
 };
 
@@ -88,6 +95,20 @@ const getTitle = (bundles: FluentBundle[], type: NOTIFICATION_TYPE | null) => {
       "Your illegal content report has been reviewed"
     );
   }
+  if (type === GQLNOTIFICATION_TYPE.REPLY) {
+    return getMessage(
+      bundles,
+      "notifications-yourCommentHasReceivedAReply",
+      "Your comment has received a reply"
+    );
+  }
+  if (type === GQLNOTIFICATION_TYPE.REPLY_STAFF) {
+    return getMessage(
+      bundles,
+      "notifications-yourCommentHasReceivedAStaffReply",
+      "Your comment has received a reply from a staff member"
+    );
+  }
 
   return getMessage(bundles, "notifications-defaultTitle", "Notification");
 };
@@ -133,6 +154,10 @@ const NotificationContainer: FunctionComponent<Props> = ({
         {type === GQLNOTIFICATION_TYPE.DSA_REPORT_DECISION_MADE && (
           <DSAReportDecisionMadeNotificationBody notification={notification} />
         )}
+        {(type === GQLNOTIFICATION_TYPE.REPLY ||
+          type === GQLNOTIFICATION_TYPE.REPLY_STAFF) && (
+          <RepliedCommentNotificationBody notification={notification} />
+        )}
         <div className={styles.footer}>
           <Timestamp className={styles.timestamp}>{createdAt}</Timestamp>
         </div>
@@ -159,6 +184,7 @@ const enhanced = withFragmentContainer<Props>({
       }
       ...RejectedCommentNotificationBody_notification
       ...DSAReportDecisionMadeNotificationBody_notification
+      ...RepliedCommentNotificationBody_notification
     }
   `,
 })(NotificationContainer);

client/src/core/client/stream/tabs/Notifications/RepliedCommentNotificationBody.css

@@ -0,0 +1,31 @@
+.body {
+  margin-left: var(--spacing-5);
+  margin-bottom: var(--spacing-2);
+
+  width: calc(100% - var(--spacing-4));
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-2);
+}
+
+.commentSection {
+  margin-bottom: var(--spacing-2);
+}
+
+.goToReplyButton {
+  color: var(--palette-primary-500);
+  padding: 0;
+  text-decoration: underline;
+}
+
+.replyInfo {
+  font-size: var(--font-size-3);
+}
+
+.commentBody {
+  background-color: var(--palette-grey-200);
+  margin-left: var(--spacing-2);
+  margin-top: var(--spacing-1);
+  padding: var(--spacing-2);
+}

client/src/core/client/stream/tabs/Notifications/RepliedCommentNotificationBody.tsx

@@ -0,0 +1,94 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { getURLWithCommentID } from "coral-framework/helpers";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import HTMLContent from "coral-stream/common/HTMLContent";
+import { Button } from "coral-ui/components/v3";
+
+import { RepliedCommentNotificationBody_notification } from "coral-stream/__generated__/RepliedCommentNotificationBody_notification.graphql";
+
+import styles from "./RepliedCommentNotificationBody.css";
+
+interface Props {
+  notification: RepliedCommentNotificationBody_notification;
+}
+
+const RepliedCommentNotificationBody: FunctionComponent<Props> = ({
+  notification,
+}) => {
+  const { comment, commentReply } = notification;
+  if (!commentReply) {
+    return null;
+  }
+
+  const permalinkURL = getURLWithCommentID(
+    commentReply.story.url,
+    commentReply.id
+  );
+
+  return (
+    <div className={styles.body}>
+      {comment && (
+        <>
+          <div className={styles.commentSection}>
+            <Localized id="">
+              <div className={styles.replyInfo}>
+                {commentReply.author?.username ?? ""} replied to your comment on{" "}
+                {commentReply.story.metadata?.title}:
+              </div>
+            </Localized>
+            <div className={styles.commentBody}>
+              <HTMLContent>{commentReply.body || ""}</HTMLContent>
+            </div>
+          </div>
+          <div className={styles.commentSection}>
+            <Localized id="">
+              <div className={styles.replyInfo}>In reply to:</div>
+            </Localized>
+            <div className={styles.commentBody}>
+              <HTMLContent>{comment.body || ""}</HTMLContent>
+            </div>
+          </div>
+          <Localized id="">
+            <Button
+              className={styles.goToReplyButton}
+              variant="none"
+              href={permalinkURL}
+              target="_blank"
+            >
+              Go to reply
+            </Button>
+          </Localized>
+        </>
+      )}
+    </div>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  notification: graphql`
+    fragment RepliedCommentNotificationBody_notification on Notification {
+      type
+      comment {
+        body
+      }
+      commentReply {
+        id
+        author {
+          username
+        }
+        body
+        story {
+          url
+          metadata {
+            title
+          }
+        }
+      }
+    }
+  `,
+})(RepliedCommentNotificationBody);
+
+export default enhanced;

client/src/core/client/ui/components/icons/MessagesBubbleSquareTextIcon.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from "react";
+
+const MessagesBubbleSquareTextIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/messages-chat-smileys/messages-speech-bubbles/messages-bubble-square-text
+  return (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.75 18.75h-10.5l-6 4.5v-4.5h-3a1.5 1.5 0 0 1 -1.5 -1.5v-15a1.5 1.5 0 0 1 1.5 -1.5h19.5a1.5 1.5 0 0 1 1.5 1.5v15a1.5 1.5 0 0 1 -1.5 1.5Z"
+        fill="none"
+        stroke="currentcolor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="m5.25 7.5 13.5 0"
+        fill="none"
+        stroke="currentcolor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="m5.25 12 10.5 0"
+        fill="none"
+        stroke="currentcolor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </svg>
+  );
+};
+
+export default MessagesBubbleSquareTextIcon;

client/src/core/client/ui/components/icons/index.ts

@@ -50,6 +50,7 @@ export { default as LikeIcon } from "./LikeIcon";
 export { default as ListBulletsIcon } from "./ListBulletsIcon";
 export { default as LockIcon } from "./LockIcon";
 export { default as MessagesBubbleSquareIcon } from "./MessagesBubbleSquareIcon";
+export { default as MessagesBubbleSquareTextIcon } from "./MessagesBubbleSquareTextIcon";
 export { default as MessagesBubbleSquareWarningIcon } from "./MessagesBubbleSquareWarningIcon";
 export { default as ModerationDecisionIcon } from "./ModerationDecisionIcon";
 export { default as MultipleActionsChatIcon } from "./MultipleActionsChatIcon";

locales/en-US/stream.ftl

@@ -1056,6 +1056,10 @@ notifications-yourCommentHasBeenApproved =
   Your comment has been approved
 notifications-yourCommentHasBeenFeatured =
   Your comment has been featured
+notifications-yourCommentHasReceivedAReply =
+  Your comment has received a reply
+notifications-yourCommentHasReceivedAStaffReply =
+  Your comment has received a reply from a staff member
 notifications-defaultTitle = Notification
 
 notifications-rejectedComment-body =

server/src/core/server/graph/resolvers/Notification.ts

@@ -19,6 +19,13 @@ export const NotificationResolver: Required<
 
     return await ctx.loaders.Comments.comment.load(commentID);
   },
+  commentReply: async ({ replyID }, input, ctx) => {
+    if (!replyID) {
+      return null;
+    }
+
+    return await ctx.loaders.Comments.comment.load(replyID);
+  },
   commentStatus: ({ commentStatus }) => commentStatus,
   dsaReport: async ({ reportID }, input, ctx) => {
     if (!reportID) {

server/src/core/server/graph/schema/schema.graphql

@@ -4846,6 +4846,7 @@ enum NOTIFICATION_TYPE {
   ILLEGAL_REJECTED
   DSA_REPORT_DECISION_MADE
   REPLY
+  REPLY_STAFF
 }
 
 type Notification {
@@ -4875,6 +4876,11 @@ type Notification {
   """
   comment: Comment
 
+  """
+  commentReply is the optional comment reply that is linked to this notification.
+  """
+  commentReply: Comment
+
   """
   commentStatus is the optional status of the comment when the notification
   was created. This allows for the context of the state of the comment to be