add new mute messages

Get correct mute message info for modal

remove extra spapce

src/components/modal/mute/modal.scss

@@ -15,6 +15,7 @@
     }
     .mute-content {
         padding-top: 16px;
+        justify-content: flex-start;
     }
     .mute-inner-content {
         padding: 0 32px;

src/views/preview/comment/compose-comment.jsx

@@ -48,7 +48,9 @@ class ComposeComment extends React.Component {
             error: null,
             appealId: null,
             muteOpen: false,
-            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms
+            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt ?
+                this.props.muteStatus.muteExpiresAt * 1000 : 0, // convert to ms
+            muteType: this.props.muteStatus.currentMessageType
         };
     }
     handleInput (event) {
@@ -93,7 +95,8 @@ class ComposeComment extends React.Component {
                     error: body.rejected,
                     appealId: body.appealId,
                     muteOpen: muteOpen,
-                    muteExpiresAtMs: muteExpiresAtMs
+                    muteExpiresAtMs: muteExpiresAtMs,
+                    muteType: body.status.mute_status.currentMessageType
                 });
                 return;
             }
@@ -159,13 +162,34 @@ class ComposeComment extends React.Component {
 
     getMuteMessageInfo () {
         // return the ids for the messages that are shown for this mute type
-        // Note, it will probably be passed a 'type', but right now there's only one
         // If mute modals have more than one unique "step" we could pass an array of steps
-        return {
-            commentType: 'comment.type.disrespectful',
-            muteStepHeader: 'comment.disrespectful.header',
-            muteStepContent: ['comment.disrespectful.content1', 'comment.disrespectful.content2']
+        const messageInfo = {
+            pii: {
+                commentType: 'comment.type.pii',
+                muteStepHeader: 'comment.pii.header',
+                muteStepContent: ['comment.pii.content1', 'comment.pii.content2', 'comment.pii.content3']
+            },
+            unconstructive: {
+                commentType: 'comment.type.unconstructive',
+                muteStepHeader: 'comment.unconstructive.header',
+                muteStepContent: ['comment.unconstructive.content1', 'comment.unconstructive.content2']
+            },
+            vulgarity: {
+                commentType: 'comment.type.vulgarity',
+                muteStepHeader: 'comment.vulgarity.header',
+                muteStepContent: ['comment.vulgarity.content1', 'comment.vulgar.content2']
+            },
+            general: {
+                commentType: 'comment.type.disrespectful',
+                muteStepHeader: 'comment.disrespectful.header',
+                muteStepContent: ['comment.disrespectful.content1', 'comment.disrespectful.content2']
+            }
         };
+
+        if (this.state.muteType && messageInfo[this.state.muteType]) {
+            return messageInfo[this.state.muteType];
+        }
+        return messageInfo.general;
     }
 
     handleCancel () {
@@ -177,6 +201,7 @@ class ComposeComment extends React.Component {
         });
         if (this.props.onCancel) this.props.onCancel();
     }
+
     render () {
         return (
             <React.Fragment>
@@ -300,7 +325,8 @@ ComposeComment.propTypes = {
     commenteeId: PropTypes.number,
     muteStatus: PropTypes.shape({
         offenses: PropTypes.array,
-        muteExpiresAt: PropTypes.number
+        muteExpiresAt: PropTypes.number,
+        currentMessageType: PropTypes.string
     }),
     onAddComment: PropTypes.func,
     onCancel: PropTypes.func,

src/views/preview/l10n.json

@@ -49,5 +49,18 @@
     "comment.type.disrespectful": "Scratch thinks your most recent comment was disrespectful.",
     "comment.disrespectful.header": "Make sure to be friendly and respectful when using Scratch.",
     "comment.disrespectful.content1": "The Scratch comment filter thinks your comment was disrespectful.",
-    "comment.disrespectful.content2": "Remember: There is a person behind every Scratch account and unfriendly comments can really hurt someone's feelings."
+    "comment.disrespectful.content2": "Remember: There is a person behind every Scratch account and unfriendly comments can really hurt someone's feelings.",
+    "comment.type.pii": "The Scratch comment filter thought your most recent comment was sharing or asking for private information.",
+    "comment.pii.header": "Make sure not to share private information on Scratch.",
+    "comment.pii.content1": "The Scratch comment filter thinks that in your comment, you were sharing or asking for private information.",
+    "comment.pii.content2": "Things you share on Scratch can be seen by everyone, and can appear in search engines. Private information can be used by other people in harmful ways, so it’s important to keep it private.",
+    "comment.pii.content3": "This is a serious safety issue.",
+    "comment.type.unconstructive": "The Scratch comment filter thought your most recent comment was saying something bad about someone’s project.",
+    "comment.unconstructive.header": "Make sure to be supportive when commenting on other people’s projects",
+    "comment.unconstructive.content1": "The Scratch comment filter thinks your comment was saying something bad or mean about someone’s project.",
+    "comment.unconstructive.content2": "If you think something could be better, you can say something you like about the project, and make a suggestion about how to improve it.",
+    "comment.type.vulgarity": "The Scratch comment filter thought your most recent comment contained a bad word.",
+    "comment.vulgarity.header": "Make sure to use language that’s appropriate for all ages",
+    "comment.vulgarity.content1": "The Scratch comment filter thinks your comment contains a bad word.",
+    "comment.vulgarity.content2": "Scratch has users of all ages, so it’s important to use language that is appropriate for all Scratchers."
 }

test/unit/components/compose-comment.test.jsx

@@ -267,4 +267,21 @@ describe('Compose Comment test', () => {
         expect(commentInstance.isMuted()).toBe(false);
         global.Date.now = realDateNow;
     });
+
+    test('getMuteMessageInfo: muteType set', () => {
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        commentInstance.setState({muteType: 'unconstructive'});
+        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.unconstructive');
+    });
+
+    test('getMuteMessageInfo: muteType not set', () => {
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.disrespectful');
+    });
+
+    test('getMuteMessageInfo: muteType set to something we don\'t have messages for', () => {
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        commentInstance.setState({muteType: 'spaghetti'});
+        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.disrespectful');
+    });
 });