show a message to user if comment is rejected on submission (#2733)

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.
      */

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css

@@ -0,0 +1,7 @@
+.flex {
+  width: 100%;
+}
+
+.buttonWrapper {
+  padding-left: var(--spacing-2);
+}

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;

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} />

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