From 9618e5dab160df985bc9ccf9e11240f12cdd89e8 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Tue, 3 Dec 2019 16:35:57 -0500
Subject: [PATCH] show a message to user if comment is rejected on submission
 (#2733)

---
 src/core/client/stream/classes.ts             |  6 +++
 .../PostCommentRejectedMessage.css            |  7 ++++
 .../PostCommentRejectedMessage.tsx            | 39 +++++++++++++++++++
 .../PostCommentSubmitStatusContainer.tsx      |  6 ++-
 src/locales/en-US/stream.ftl                  |  2 +
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css
 create mode 100644 src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx

diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
index 6235a99b3..115b5846c 100644
--- a/src/core/client/stream/classes.ts
+++ b/src/core/client/stream/classes.ts
@@ -148,6 +148,12 @@ const CLASSES = {
      */
     inReview: "coral coral-createComment-inReview",
 
+    /**
+     * rejected is the message notifying the user that the posted comment is
+     * rejected.
+     */
+    rejected: "coral coral-createComment-rejected",
+
     /**
      * dismissButton is the button to dismiss the in review message.
      */
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css
new file mode 100644
index 000000000..ea6a1abd1
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css
@@ -0,0 +1,7 @@
+.flex {
+  width: 100%;
+}
+
+.buttonWrapper {
+  padding-left: var(--spacing-2);
+}
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx
new file mode 100644
index 000000000..c49915249
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.tsx
@@ -0,0 +1,39 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import CLASSES from "coral-stream/classes";
+import { Button, Flex, Message } from "coral-ui/components";
+
+import styles from "./PostCommentRejectedMessage.css";
+
+export interface PostCommentRejectedProps {
+  onDismiss: () => void;
+}
+
+const PostCommentRejected: FunctionComponent<
+  PostCommentRejectedProps
+> = props => {
+  return (
+    <Message color="error" className={CLASSES.createComment.rejected} fullWidth>
+      <Flex justifyContent="space-between" className={styles.flex}>
+        <Localized id="comments-submitStatus-submittedAndRejected">
+          <div>This comment has been rejected for violating our guidelines</div>
+        </Localized>
+        <div className={styles.buttonWrapper}>
+          <Localized id="comments-submitStatus-dismiss">
+            <Button
+              className={CLASSES.createComment.dismissButton}
+              onClick={props.onDismiss}
+              variant="underlined"
+              color="light"
+            >
+              Dismiss
+            </Button>
+          </Localized>
+        </div>
+      </Flex>
+    </Message>
+  );
+};
+
+export default PostCommentRejected;
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentSubmitStatusContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentSubmitStatusContainer.tsx
index 8e27626c5..6a3f6c190 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentSubmitStatusContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentSubmitStatusContainer.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { SubmitStatus } from "../../helpers/getSubmitStatus";
 import PostCommentInReviewMessage from "./PostCommentInReviewMessage";
+import PostCommentRejectedMessage from "./PostCommentRejectedMessage";
 
 interface Props {
   status: SubmitStatus | null;
@@ -33,8 +34,9 @@ export default class PostCommentSubmitStatusContainer extends React.Component<
       case "RETRY":
         throw new Error("Not implemented");
       case "REJECTED":
-      // TODO: Show a different message when rejected?
-      // falls through
+        return this.state.dismissed ? null : (
+          <PostCommentRejectedMessage onDismiss={this.handleOnDismiss} />
+        );
       case "IN_REVIEW":
         return this.state.dismissed ? null : (
           <PostCommentInReviewMessage onDismiss={this.handleOnDismiss} />
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 9d59c001f..6bbfcea45 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -370,6 +370,8 @@ comments-reportPopover-dismiss = Dismiss
 comments-submitStatus-dismiss = Dismiss
 comments-submitStatus-submittedAndWillBeReviewed =
   Your comment has been submitted and will be reviewed by a moderator
+comments-submitStatus-submittedAndRejected =
+  This comment has been rejected for violating our guidelines
 
 # Configure
 configure-configureQuery-errorLoadingProfile = Error loading configure