Show the correct step of the modal based on whether the reply was just a click...

Show the correct step of the modal based on whether the reply was just a click to try to reply while already muted or whether they replied and got muted.

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

@@ -187,6 +187,14 @@ class ComposeComment extends React.Component {
         return creationTimeMinutesAgo < 2 && numOffenses === 1;
     }
 
+    getMuteModalStartStep () {
+        // Decides which step of the mute modal to start on. If this was a reply button click,
+        // we show them the step that tells them how much time is left on their mute, otherwise
+        // they start at the beginning of the progression.
+        return this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE ?
+            MuteModal.steps.MUTE_INFO : MuteModal.steps.COMMENT_ISSUE;
+    }
+
     getMuteMessageInfo () {
         // return the ids for the messages that are shown for this mute type
         // If mute modals have more than one unique "step" we could pass an array of steps
@@ -344,7 +352,7 @@ class ComposeComment extends React.Component {
                         muteModalMessages={this.getMuteMessageInfo()}
                         shouldCloseOnOverlayClick={false}
                         showWarning={this.state.showWarning}
-                        startStep={this.props.isReply ? MuteModal.steps.MUTE_INFO : MuteModal.steps.COMMENT_ISSUE}
+                        startStep={this.getMuteModalStartStep()}
                         timeMuted={formatTime.formatRelativeTime(this.state.muteExpiresAtMs, window._locale)}
                         onRequestClose={this.handleMuteClose}
                     />

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

@@ -135,7 +135,7 @@ describe('Compose Comment test', () => {
     test('Comment Status and compose box show on replies when not muted', () => {
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0;
-        const component = getComposeCommentWrapper({isReply:true});
+        const component = getComposeCommentWrapper({isReply: true});
         expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
         expect(component.find('CommentingStatus').exists()).toEqual(false);
         global.Date.now = realDateNow;
@@ -362,6 +362,27 @@ describe('Compose Comment test', () => {
         global.Date.now = realDateNow;
     });
 
+    test('getMuteModalStartStep: not a reply ', () => {
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.getMuteModalStartStep()).toBe(0);
+    });
+
+    test('getMuteModalStartStep: A reply that got them muted ', () => {
+        const commentInstance = getComposeCommentWrapper({isReply: true}).instance();
+        commentInstance.setState({
+            status: 'REJECTED_MUTE'
+        });
+        expect(commentInstance.getMuteModalStartStep()).toBe(0);
+    });
+
+    test('getMuteModalStartStep: A reply click when already muted ', () => {
+        const commentInstance = getComposeCommentWrapper({isReply: true}).instance();
+        commentInstance.setState({
+            status: 'EDITING'
+        });
+        expect(commentInstance.getMuteModalStartStep()).toBe(1);
+    });
+
     test('isMuted: expiration is in the future ', () => {
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0; // Set "now" to 0 for easier testing.