From 4fdd3c1ad35e093647bb6118979e27726e5a110f Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Mon, 23 Mar 2020 11:55:00 -0400
Subject: [PATCH 1/9] Add subcategory selection if subcategories specified, and
 submit final report

---
 src/components/modal/report/modal.jsx         | 58 ++++++++++++++++---
 src/components/modal/report/report-options.js | 33 ++++++++++-
 2 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index 9ff95c7f1..42aeaef8d 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -23,8 +23,9 @@ require('./modal.scss');
 // hard to read. Make the code easier to read by giving each step number a label.
 const STEPS = {
     category: 0,
-    textInput: 1,
-    confirmation: 2
+    subcategory: 1,
+    textInput: 2,
+    confirmation: 3
 };
 
 class ReportModal extends React.Component {
@@ -32,22 +33,32 @@ class ReportModal extends React.Component {
         super(props);
         bindAll(this, [
             'handleSetCategory',
-            'handleSubmit'
+            'handleSubmit',
+            'handleSetSubcategory'
         ]);
         this.state = {
             step: STEPS.category,
-            categoryValue: ''
+            categoryValue: '',
+            subcategoryValue: null
         };
     }
     handleSetCategory (formData) {
+        const category = this.props.reportOptions.find(o => o.value === formData.category) || this.props.reportOptions[0];
+
         return this.setState({
             categoryValue: formData.category,
+            step: category.subcategories ? STEPS.subcategory : STEPS.textInput
+        });
+    }
+    handleSetSubcategory (formData) {
+        return this.setState({
+            subcategoryValue: formData.subcategory,
             step: STEPS.textInput
         });
     }
     handleSubmit (formData) {
         this.props.onReport({
-            report_category: this.state.categoryValue,
+            report_category: this.state.subcategoryValue ? this.state.subcategoryValue : this.state.categoryValue,
             notes: formData.notes
         });
     }
@@ -66,6 +77,12 @@ class ReportModal extends React.Component {
         const contentLabel = intl.formatMessage({id: `report.${type}`});
         const categoryRequiredMessage = intl.formatMessage({id: 'report.reasonMissing'});
         const category = reportOptions.find(o => o.value === this.state.categoryValue) || reportOptions[0];
+        let finalCategory = category;
+
+        if (category.subcategories) {
+           finalCategory = category.subcategories.find(o => o.value === this.state.subcategoryValue) || category.subcategories[0];
+        }
+
 
         // Confirmation step is shown if a report has been submitted, even if state is reset by closing the modal.
         // This prevents multiple report submission within the same session because submission is stored in redux.
@@ -125,6 +142,33 @@ class ReportModal extends React.Component {
                                 />
                             </FormStep>
 
+                            {/* Subcategory selection step */}
+                            <FormStep
+                                nextLabel={{id: 'general.next'}}
+                                onNext={this.handleSetSubcategory}
+                            >
+                                <div className="instructions">
+                                    <div className="instructions-header">
+                                        <FormattedMessage {...category.label} />
+                                    </div>
+                                    <FormattedMessage {...category.prompt} />
+                                </div>
+                                <Select
+                                    required
+                                    elementWrapperClassName="report-modal-field"
+                                    label={null}
+                                    name="subcategory"
+                                    options={category.subcategories ? category.subcategories.map(option => ({
+                                        value: option.value,
+                                        label: intl.formatMessage(option.label),
+                                        key: option.value
+                                    })) : []}
+                                    validationErrors={{
+                                        isDefaultRequiredValue: categoryRequiredMessage
+                                    }}
+                                />
+                            </FormStep>
+
                             {/* Text input step */}
                             <FormStep
                                 isWaiting={isWaiting}
@@ -133,9 +177,9 @@ class ReportModal extends React.Component {
                             >
                                 <div className="instructions">
                                     <div className="instructions-header">
-                                        <FormattedMessage {...category.label} />
+                                        <FormattedMessage {...subcategory.label} />
                                     </div>
-                                    <FormattedMessage {...category.prompt} />
+                                    <FormattedMessage {...subcategory.prompt} />
                                 </div>
                                 <TextArea
                                     autoFocus
diff --git a/src/components/modal/report/report-options.js b/src/components/modal/report/report-options.js
index 62375a618..403e7f38b 100644
--- a/src/components/modal/report/report-options.js
+++ b/src/components/modal/report/report-options.js
@@ -3,7 +3,8 @@ const PropTypes = require('prop-types');
 const {
     arrayOf,
     string,
-    shape
+    shape,
+    bool
 } = PropTypes;
 
 /**
@@ -15,10 +16,18 @@ const messageShape = shape({
     id: string.isRequired
 });
 
+const subcategoryShape = shape({
+    value: string.isRequired,
+    label: messageShape.isRequired,
+    prompt: messageShape.isRequired,
+    preventSubmission: bool
+});
+
 const categoryShape = shape({
     value: string.isRequired,
     label: messageShape.isRequired,
-    prompt: messageShape.isRequired
+    prompt: messageShape.isRequired,
+    subcategories: arrayOf(subcategoryShape)
 });
 
 const reportOptionsShape = arrayOf(categoryShape);
@@ -67,7 +76,25 @@ const REPORT_OPTIONS = [
     {
         value: '6',
         label: {id: 'general.other'},
-        prompt: {id: 'report.promptGuidelines'}
+        prompt: {id: 'report.promptGuidelines'},
+        subcategories: [
+            {
+                value: '',
+                label: {id: 'report.reasonPlaceHolder'},
+                prompt: {id: 'report.promptPlaceholder'}
+            },
+            {
+                value: '11',
+                label: {id: 'report.reasonCopy'},
+                prompt: {id: 'report.promptCopy'}
+            },
+            {
+                value: '12',
+                label: {id: 'report.reasonPersonal'},
+                prompt: {id: 'report.promptPersonal'},
+                preventSubmission: true
+            }
+        ]
     }
 ];
 

From 010ee42a998615f0e41706ad3d0b7d5955801aa4 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Fri, 27 Mar 2020 11:40:30 -0400
Subject: [PATCH 2/9] Add a deadend step to report flow

---
 src/components/modal/report/modal.jsx | 29 ++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index 42aeaef8d..a41bcbe46 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -25,7 +25,8 @@ const STEPS = {
     category: 0,
     subcategory: 1,
     textInput: 2,
-    confirmation: 3
+    confirmation: 3,
+    deadend: 4
 };
 
 class ReportModal extends React.Component {
@@ -51,9 +52,13 @@ class ReportModal extends React.Component {
         });
     }
     handleSetSubcategory (formData) {
+        const category = this.props.reportOptions.find(o => o.value === this.state.categoryValue) || this.props.reportOptions[0];
+
+        const subcategory = category.subcategories.find(o => o.value === formData.subcategory) || category.subcategories[0];
+        
         return this.setState({
-            subcategoryValue: formData.subcategory,
-            step: STEPS.textInput
+            subcategoryValue: subcategory.value,
+            step: subcategory.preventSubmission ? STEPS.deadend : STEPS.textInput
         });
     }
     handleSubmit (formData) {
@@ -177,9 +182,9 @@ class ReportModal extends React.Component {
                             >
                                 <div className="instructions">
                                     <div className="instructions-header">
-                                        <FormattedMessage {...subcategory.label} />
+                                        <FormattedMessage {...finalCategory.label} />
                                     </div>
-                                    <FormattedMessage {...subcategory.prompt} />
+                                    <FormattedMessage {...finalCategory.prompt} />
                                 </div>
                                 <TextArea
                                     autoFocus
@@ -213,6 +218,20 @@ class ReportModal extends React.Component {
                                     <FormattedMessage id="report.receivedBody" />
                                 </div>
                             </FormStep>
+
+                            {/* Deadend */}
+                            <FormStep
+                                submitEnabled
+                                nextLabel={{id: 'general.close'}}
+                                onNext={onRequestClose}
+                            >
+                                <div className="instructions">
+                                    <div className="instructions-header">
+                                        <FormattedMessage {...finalCategory.label} />
+                                    </div>
+                                    <FormattedMessage {...finalCategory.prompt} />
+                                </div>
+                            </FormStep>
                         </Progression>
                     </ModalInnerContent>
                 </div>

From 22bed516f57bbd2f93c72b418996987eb0e09996 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Mon, 30 Mar 2020 16:44:01 -0400
Subject: [PATCH 3/9] Subcategories and deadends work

---
 src/components/modal/report/modal.jsx  | 7 ++++---
 src/components/modal/report/modal.scss | 6 ++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index a41bcbe46..c5890968f 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
 const connect = require('react-redux').connect;
+const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
@@ -156,7 +157,7 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...category.label} />
                                     </div>
-                                    <FormattedMessage {...category.prompt} />
+                                    <FormattedHTMLMessage {...category.prompt} />
                                 </div>
                                 <Select
                                     required
@@ -184,7 +185,7 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
                                     </div>
-                                    <FormattedMessage {...finalCategory.prompt} />
+                                    <FormattedHTMLMessage {...finalCategory.prompt} />
                                 </div>
                                 <TextArea
                                     autoFocus
@@ -224,7 +225,7 @@ class ReportModal extends React.Component {
                                 submitEnabled
                                 nextLabel={{id: 'general.close'}}
                                 onNext={onRequestClose}
-                            >
+                            >   
                                 <div className="instructions">
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss
index 57625b835..77276131f 100644
--- a/src/components/modal/report/modal.scss
+++ b/src/components/modal/report/modal.scss
@@ -10,6 +10,8 @@
 .report-modal-content {
     margin: 1rem auto;
     width: 80%;
+    font-size: .875rem;
+
 
     .instructions {
         line-height: 1.5rem;
@@ -69,6 +71,10 @@
             }
         }
     }
+
+    ul {
+        font-size: .875rem;
+    }
 }
 
 .report-modal-field {

From ab71f6020a5cf24d03fc6635ba7fc6357dd1c554 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Mon, 30 Mar 2020 17:46:21 -0400
Subject: [PATCH 4/9] Format prompts with multiple paragraphs and a list

---
 src/components/modal/report/modal.jsx         | 20 ++++++-
 src/components/modal/report/modal.scss        |  2 +-
 src/components/modal/report/report-options.js | 58 +++++++++++++++++--
 src/l10n.json                                 | 22 +++++++
 4 files changed, 95 insertions(+), 7 deletions(-)

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index c5890968f..10445daba 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -85,10 +85,16 @@ class ReportModal extends React.Component {
         const category = reportOptions.find(o => o.value === this.state.categoryValue) || reportOptions[0];
         let finalCategory = category;
 
+
         if (category.subcategories) {
            finalCategory = category.subcategories.find(o => o.value === this.state.subcategoryValue) || category.subcategories[0];
         }
 
+        const promptList = finalCategory.list && finalCategory.list.map((listItem, index) =>
+          <li key={index}>
+            <FormattedMessage {...listItem} />
+          </li>
+        );
 
         // Confirmation step is shown if a report has been submitted, even if state is reset by closing the modal.
         // This prevents multiple report submission within the same session because submission is stored in redux.
@@ -230,7 +236,19 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
                                     </div>
-                                    <FormattedMessage {...finalCategory.prompt} />
+                                    <p>
+                                        <FormattedMessage {...finalCategory.prompt} />
+                                    </p>
+                                    {finalCategory.prompt2 && (
+                                        <p>
+                                            <FormattedMessage {...finalCategory.prompt2} />
+                                        </p>
+                                    )}
+                                    {promptList && (
+                                        <ul>
+                                            {promptList}
+                                        </ul>
+                                    )}
                                 </div>
                             </FormStep>
                         </Progression>
diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss
index 77276131f..a433a6ec3 100644
--- a/src/components/modal/report/modal.scss
+++ b/src/components/modal/report/modal.scss
@@ -72,7 +72,7 @@
         }
     }
 
-    ul {
+    ul, p {
         font-size: .875rem;
     }
 }
diff --git a/src/components/modal/report/report-options.js b/src/components/modal/report/report-options.js
index 403e7f38b..42ff9ca52 100644
--- a/src/components/modal/report/report-options.js
+++ b/src/components/modal/report/report-options.js
@@ -20,6 +20,8 @@ const subcategoryShape = shape({
     value: string.isRequired,
     label: messageShape.isRequired,
     prompt: messageShape.isRequired,
+    prompt2: messageShape,
+    list: arrayOf(messageShape),
     preventSubmission: bool
 });
 
@@ -83,18 +85,64 @@ const REPORT_OPTIONS = [
                 label: {id: 'report.reasonPlaceHolder'},
                 prompt: {id: 'report.promptPlaceholder'}
             },
+            {
+                value: 'report.reasonDontLikeIt',
+                label: {id: 'report.reasonDontLikeIt'},
+                prompt: {id: 'report.promptDontLikeIt'},
+                prompt2: {id: 'report.promptDontLikeIt'},
+                list: [
+                    {id: 'report.itemSupportive'},
+                    {id: 'report.itemConstructive'},
+                    {id: 'report.itemSpecific'}
+                ],
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonDoesntWork',
+                label: {id: 'report.reasonDoesntWork'},
+                prompt: {id: 'report.promptDoesntWork'},
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonCouldImprove',
+                label: {id: 'report.reasonCouldImprove'},
+                prompt: {id: 'report.promptCouldImprove'},
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonTooHard',
+                label: {id: 'report.reasonTooHard'},
+                prompt: {id: 'report.promptTooHard'},
+                preventSubmission: true
+            },
+            {
+                value: '9',
+                label: {id: 'report.reasonMisleading'},
+                prompt: {id: 'report.promptMisleading'}
+            },
+            {
+                value: '10',
+                label: {id: 'report.reasonFaceReveal'},
+                prompt: {id: 'report.promptFaceReveal'}
+            },
             {
                 value: '11',
-                label: {id: 'report.reasonCopy'},
-                prompt: {id: 'report.promptCopy'}
+                label: {id: 'report.reasonNoRemixingAllowed'},
+                prompt: {id: 'report.promptNoRemixingAllowed'}
             },
             {
                 value: '12',
-                label: {id: 'report.reasonPersonal'},
-                prompt: {id: 'report.promptPersonal'},
-                preventSubmission: true
+                label: {id: 'report.reasonCreatorsSafety'},
+                prompt: {id: 'report.promptCreatorsSafety'}
+            },
+            {
+                value: '13',
+                label: {id: 'report.reasonSomethingElse'},
+                prompt: {id: 'report.promptSomethingElse'}
             }
         ]
+
+
     }
 ];
 
diff --git a/src/l10n.json b/src/l10n.json
index daaafb78f..06197ef57 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -258,6 +258,15 @@
     "report.reasonMissing": "Please select a reason",
     "report.reasonImage": "Inappropriate Images",
     "report.reasonPersonal": "Sharing Personal Contact Information",
+    "report.reasonDontLikeIt": "I don't like this project",
+    "report.reasonDoesntWork": "This project does not work",
+    "report.reasonCouldImprove": "This project could be improved on",
+    "report.reasonTooHard": "This project is too hard",
+    "report.reasonMisleading": "The project is misleading or tricks the community",
+    "report.reasonFaceReveal": "It's a face reveal or is just trying to show someone's picture",
+    "report.reasonNoRemixingAllowed": "The project doesn't allow remixing",
+    "report.reasonCreatorsSafety": "I'm worried about the safety of the creator of this project",
+    "report.reasonSomethingElse": "Something else",
     "report.receivedHeader": "We have received your report!",
     "report.receivedBody": "The Scratch Team will review the project based on the Scratch community guidelines.",
     "report.promptPlaceholder": "Select a reason why above.",
@@ -269,6 +278,19 @@
     "report.promptPersonal": "Please say where the personal contact information is shared (For example: Notes & Credits, sprite name, project text, etc.)",
     "report.promptGuidelines": "Please be specific about why this project does not follow our Community Guidelines",
     "report.promptImage": "Please say the name of the sprite or the backdrop with the inappropriate image",
+    "report.promptDontLikeIt": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.",
+    "report.prompt2DontLikeIt": "Here are tips on sharing constructive feedback:",
+    "report.itemSupportive": "Be supportive and encouraging.",
+    "report.itemConstructive": "Leave a comment telling them what you like, but also what they could do to make the project better.",
+    "report.itemSpecific": "Try to be specific with your feedback. For instance: The controls to move the character did not work.",
+    "report.promptDoesntWork": "<p>A Scratch project, like any other application, may contain a few bugs. That is expected and completely okay!</p> <p>We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.</p>",
+    "report.promptCouldImprove": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.<br />Here are tips on sharing constructive feedback: <ul><li>Be supportive and encouraging.</li><li>Leave a comment telling them what you like, but also what they could do to make the project better.</li><li>Try to be specific with your feedback. For instance: The controls to move the character did not work.</li>",
+    "report.promptTooHard": "If you feel a project could be easier, we encourage you to share that feedback directly with the creator of the project. Or remix it yourself and make it as easy or hard as you like!",
+    "report.promptMisleading": "Tell us more about how it's tricking or misleading people",
+    "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a 'face reveal', or the project focuses on the person's appearance, please click report.",
+    "report.promptNoRemixingAllowed": "Please let us know where the project says it is not okay to remix — such as in the Notes & Credits, project title, etc.  ",
+    "report.promptCreatorsSafety": "It's important that everyone on Scratch remains safe online and in real life. Please let us know why you are worried about the safety of this user.",
+    "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the Community Guidelines.",
     "report.tooLongError": "That's too long! Please find a way to shorten your text.",
     "report.tooShortError": "That's too short. Please describe in detail what's inappropriate or disrespectful about the project.",
     "report.send": "Send",

From ccb5fa444c188c7575985152a40b8f9167f8e22e Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Wed, 1 Apr 2020 15:49:53 -0400
Subject: [PATCH 5/9] Format report prompts without using FormattedHTMLMessage

---
 src/components/modal/report/modal.jsx         |  20 +-
 src/components/modal/report/report-options.js | 152 ---------------
 .../modal/report/report-options.jsx           | 184 ++++++++++++++++++
 src/l10n.json                                 |  15 +-
 4 files changed, 196 insertions(+), 175 deletions(-)
 delete mode 100644 src/components/modal/report/report-options.js
 create mode 100644 src/components/modal/report/report-options.jsx

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index 10445daba..047170900 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -15,7 +15,7 @@ const TextArea = require('../../forms/textarea.jsx');
 const previewActions = require('../../../redux/preview.js');
 const Progression = require('../../progression/progression.jsx');
 const FormStep = require('./form-step.jsx');
-const {reportOptionsShape, REPORT_OPTIONS} = require('./report-options.js');
+const {reportOptionsShape, REPORT_OPTIONS} = require('./report-options.jsx');
 
 require('../../forms/button.scss');
 require('./modal.scss');
@@ -163,7 +163,7 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...category.label} />
                                     </div>
-                                    <FormattedHTMLMessage {...category.prompt} />
+                                    {category.prompt}
                                 </div>
                                 <Select
                                     required
@@ -191,7 +191,7 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
                                     </div>
-                                    <FormattedHTMLMessage {...finalCategory.prompt} />
+                                    {finalCategory.prompt}
                                 </div>
                                 <TextArea
                                     autoFocus
@@ -236,19 +236,7 @@ class ReportModal extends React.Component {
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
                                     </div>
-                                    <p>
-                                        <FormattedMessage {...finalCategory.prompt} />
-                                    </p>
-                                    {finalCategory.prompt2 && (
-                                        <p>
-                                            <FormattedMessage {...finalCategory.prompt2} />
-                                        </p>
-                                    )}
-                                    {promptList && (
-                                        <ul>
-                                            {promptList}
-                                        </ul>
-                                    )}
+                                    {finalCategory.prompt}
                                 </div>
                             </FormStep>
                         </Progression>
diff --git a/src/components/modal/report/report-options.js b/src/components/modal/report/report-options.js
deleted file mode 100644
index 42ff9ca52..000000000
--- a/src/components/modal/report/report-options.js
+++ /dev/null
@@ -1,152 +0,0 @@
-const PropTypes = require('prop-types');
-
-const {
-    arrayOf,
-    string,
-    shape,
-    bool
-} = PropTypes;
-
-/**
- * Define both the PropType shape and default value for report options
- * to ensure structure is validated by PropType checking going forward.
- */
-
-const messageShape = shape({
-    id: string.isRequired
-});
-
-const subcategoryShape = shape({
-    value: string.isRequired,
-    label: messageShape.isRequired,
-    prompt: messageShape.isRequired,
-    prompt2: messageShape,
-    list: arrayOf(messageShape),
-    preventSubmission: bool
-});
-
-const categoryShape = shape({
-    value: string.isRequired,
-    label: messageShape.isRequired,
-    prompt: messageShape.isRequired,
-    subcategories: arrayOf(subcategoryShape)
-});
-
-const reportOptionsShape = arrayOf(categoryShape);
-
-const REPORT_OPTIONS = [
-    {
-        value: '',
-        label: {id: 'report.reasonPlaceHolder'},
-        prompt: {id: 'report.promptPlaceholder'}
-    },
-    {
-        value: '0',
-        label: {id: 'report.reasonCopy'},
-        prompt: {id: 'report.promptCopy'}
-    },
-    {
-        value: '1',
-        label: {id: 'report.reasonUncredited'},
-        prompt: {id: 'report.promptUncredited'}
-    },
-    {
-        value: '2',
-        label: {id: 'report.reasonScary'},
-        prompt: {id: 'report.promptScary'}
-    },
-    {
-        value: '3',
-        label: {id: 'report.reasonLanguage'},
-        prompt: {id: 'report.promptLanguage'}
-    },
-    {
-        value: '4',
-        label: {id: 'report.reasonMusic'},
-        prompt: {id: 'report.promptMusic'}
-    },
-    {
-        value: '8',
-        label: {id: 'report.reasonImage'},
-        prompt: {id: 'report.promptImage'}
-    },
-    {
-        value: '5',
-        label: {id: 'report.reasonPersonal'},
-        prompt: {id: 'report.promptPersonal'}
-    },
-    {
-        value: '6',
-        label: {id: 'general.other'},
-        prompt: {id: 'report.promptGuidelines'},
-        subcategories: [
-            {
-                value: '',
-                label: {id: 'report.reasonPlaceHolder'},
-                prompt: {id: 'report.promptPlaceholder'}
-            },
-            {
-                value: 'report.reasonDontLikeIt',
-                label: {id: 'report.reasonDontLikeIt'},
-                prompt: {id: 'report.promptDontLikeIt'},
-                prompt2: {id: 'report.promptDontLikeIt'},
-                list: [
-                    {id: 'report.itemSupportive'},
-                    {id: 'report.itemConstructive'},
-                    {id: 'report.itemSpecific'}
-                ],
-                preventSubmission: true
-            },
-            {
-                value: 'report.reasonDoesntWork',
-                label: {id: 'report.reasonDoesntWork'},
-                prompt: {id: 'report.promptDoesntWork'},
-                preventSubmission: true
-            },
-            {
-                value: 'report.reasonCouldImprove',
-                label: {id: 'report.reasonCouldImprove'},
-                prompt: {id: 'report.promptCouldImprove'},
-                preventSubmission: true
-            },
-            {
-                value: 'report.reasonTooHard',
-                label: {id: 'report.reasonTooHard'},
-                prompt: {id: 'report.promptTooHard'},
-                preventSubmission: true
-            },
-            {
-                value: '9',
-                label: {id: 'report.reasonMisleading'},
-                prompt: {id: 'report.promptMisleading'}
-            },
-            {
-                value: '10',
-                label: {id: 'report.reasonFaceReveal'},
-                prompt: {id: 'report.promptFaceReveal'}
-            },
-            {
-                value: '11',
-                label: {id: 'report.reasonNoRemixingAllowed'},
-                prompt: {id: 'report.promptNoRemixingAllowed'}
-            },
-            {
-                value: '12',
-                label: {id: 'report.reasonCreatorsSafety'},
-                prompt: {id: 'report.promptCreatorsSafety'}
-            },
-            {
-                value: '13',
-                label: {id: 'report.reasonSomethingElse'},
-                prompt: {id: 'report.promptSomethingElse'}
-            }
-        ]
-
-
-    }
-];
-
-module.exports = {
-    reportOptionsShape,
-    REPORT_OPTIONS
-};
diff --git a/src/components/modal/report/report-options.jsx b/src/components/modal/report/report-options.jsx
new file mode 100644
index 000000000..098e1b67f
--- /dev/null
+++ b/src/components/modal/report/report-options.jsx
@@ -0,0 +1,184 @@
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const PropTypes = require('prop-types');
+
+const {
+    arrayOf,
+    node,
+    string,
+    shape,
+    bool
+} = PropTypes;
+
+/**
+ * Define both the PropType shape and default value for report options
+ * to ensure structure is validated by PropType checking going forward.
+ */
+
+const messageShape = shape({
+    id: string.isRequired
+});
+
+const subcategoryShape = shape({
+    value: string.isRequired,
+    label: messageShape.isRequired,
+    prompt: node.isRequired,
+    preventSubmission: bool
+});
+
+const categoryShape = shape({
+    value: string.isRequired,
+    label: messageShape.isRequired,
+    prompt: node.isRequired,
+    subcategories: arrayOf(subcategoryShape)
+});
+
+const reportOptionsShape = arrayOf(categoryShape);
+
+const REPORT_OPTIONS = [
+    {
+        value: '',
+        label: {id: 'report.reasonPlaceHolder'},
+        prompt: <FormattedMessage id="report.promptPlaceholder" />
+    },
+    {
+        value: '0',
+        label: {id: 'report.reasonCopy'},
+        prompt: <FormattedMessage id="report.promptCopy" />
+    },
+    {
+        value: '1',
+        label: {id: 'report.reasonUncredited'},
+        prompt: <FormattedMessage id="report.promptUncredited" />
+    },
+    {
+        value: '2',
+        label: {id: 'report.reasonScary'},
+        prompt: <FormattedMessage id="report.promptScary" />
+    },
+    {
+        value: '3',
+        label: {id: 'report.reasonLanguage'},
+        prompt: <FormattedMessage id="report.promptLanguage" />
+    },
+    {
+        value: '4',
+        label: {id: 'report.reasonMusic'},
+        prompt: <FormattedMessage id="report.promptMusic" />
+    },
+    {
+        value: '8',
+        label: {id: 'report.reasonImage'},
+        prompt: <FormattedMessage id="report.promptImage" />
+    },
+    {
+        value: '5',
+        label: {id: 'report.reasonPersonal'},
+        prompt: <FormattedMessage id="report.promptPersonal" />
+    },
+    {
+        value: '6',
+        label: {id: 'general.other'},
+        prompt: <FormattedMessage id="report.promptGuidelines" />,
+        subcategories: [
+            {
+                value: '',
+                label: {id: 'report.reasonPlaceHolder'},
+                prompt: <FormattedMessage id="report.promptPlaceholder" />
+            },
+            {
+                value: 'report.reasonDontLikeIt',
+                label: {id: 'report.reasonDontLikeIt'},
+                prompt: (
+                    <div>
+                        <p><FormattedMessage id="report.promptDontLikeIt" /></p>
+                        <p><FormattedMessage id="report.promptTips" /></p>
+                        <ul>
+                            <li><FormattedMessage id="report.tipsSupportive" /></li>
+                            <li><FormattedMessage id="report.tipsConstructive" /></li>
+                            <li><FormattedMessage id="report.tipsSpecific" /></li>
+                        </ul>
+                    </div>
+                ),
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonDoesntWork',
+                label: {id: 'report.reasonDoesntWork'},
+                prompt: (
+                    <div>
+                        <p><FormattedMessage id="report.promptDoesntWork" /></p>
+                        <p><FormattedMessage id="report.promptDoesntWorkTips" /></p>
+                    </div>
+                ),
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonCouldImprove',
+                label: {id: 'report.reasonCouldImprove'},
+                prompt: (
+                    <div>
+                        <p><FormattedMessage id="report.promptDontLikeIt" /></p>
+                        <p><FormattedMessage id="report.promptTips" /></p>
+                        <ul>
+                            <li><FormattedMessage id="report.tipsSupportive" /></li>
+                            <li><FormattedMessage id="report.tipsConstructive" /></li>
+                            <li><FormattedMessage id="report.tipsSpecific" /></li>
+                        </ul>
+                    </div>
+                ),
+                preventSubmission: true
+            },
+            {
+                value: 'report.reasonTooHard',
+                label: {id: 'report.reasonTooHard'},
+                prompt: <FormattedMessage id="report.promptTooHard" />,
+                preventSubmission: true
+            },
+            {
+                value: '9',
+                label: {id: 'report.reasonMisleading'},
+                prompt: <FormattedMessage id="report.promptMisleading" />
+            },
+            {
+                value: '10',
+                label: {id: 'report.reasonFaceReveal'},
+                prompt: <FormattedMessage id="report.promptFaceReveal" />
+            },
+            {
+                value: '11',
+                label: {id: 'report.reasonNoRemixingAllowed'},
+                prompt: <FormattedMessage id="report.promptNoRemixingAllowed" />
+            },
+            {
+                value: '12',
+                label: {id: 'report.reasonCreatorsSafety'},
+                prompt: <FormattedMessage id="report.promptCreatorsSafety" />
+            },
+            {
+                value: '13',
+                label: {id: 'report.reasonSomethingElse'},
+                prompt: (
+                    <FormattedMessage
+                        id={`report.promptSomethingElse`}
+                        values={{
+                            CommunityGuidelinesLink: (
+                                <a href="/community_guidelines">
+                                    <FormattedMessage id="report.CommunityGuidelinesLinkText" />
+                                </a>
+                            )
+                        }}
+                    />
+                )
+            }
+        ]
+
+
+    }
+];
+
+module.exports = {
+    reportOptionsShape,
+    REPORT_OPTIONS
+};
diff --git a/src/l10n.json b/src/l10n.json
index 06197ef57..ea676d1bd 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -279,18 +279,19 @@
     "report.promptGuidelines": "Please be specific about why this project does not follow our Community Guidelines",
     "report.promptImage": "Please say the name of the sprite or the backdrop with the inappropriate image",
     "report.promptDontLikeIt": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.",
-    "report.prompt2DontLikeIt": "Here are tips on sharing constructive feedback:",
-    "report.itemSupportive": "Be supportive and encouraging.",
-    "report.itemConstructive": "Leave a comment telling them what you like, but also what they could do to make the project better.",
-    "report.itemSpecific": "Try to be specific with your feedback. For instance: The controls to move the character did not work.",
-    "report.promptDoesntWork": "<p>A Scratch project, like any other application, may contain a few bugs. That is expected and completely okay!</p> <p>We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.</p>",
-    "report.promptCouldImprove": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.<br />Here are tips on sharing constructive feedback: <ul><li>Be supportive and encouraging.</li><li>Leave a comment telling them what you like, but also what they could do to make the project better.</li><li>Try to be specific with your feedback. For instance: The controls to move the character did not work.</li>",
+    "report.promptTips": "Here are tips on sharing constructive feedback:",
+    "report.tipsSupportive": "Be supportive and encouraging.",
+    "report.tipsConstructive": "Leave a comment telling them what you like, but also what they could do to make the project better.",
+    "report.tipsSpecific": "Try to be specific with your feedback. For instance: The controls to move the character did not work.",
+    "report.promptDoesntWork": "A Scratch project, like any other application, may contain a few bugs. That is expected and completely okay!",
+    "report.promptDoesntWorkTips": "We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.",
+    "report.promptCouldImprove": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.",
     "report.promptTooHard": "If you feel a project could be easier, we encourage you to share that feedback directly with the creator of the project. Or remix it yourself and make it as easy or hard as you like!",
     "report.promptMisleading": "Tell us more about how it's tricking or misleading people",
     "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a 'face reveal', or the project focuses on the person's appearance, please click report.",
     "report.promptNoRemixingAllowed": "Please let us know where the project says it is not okay to remix — such as in the Notes & Credits, project title, etc.  ",
     "report.promptCreatorsSafety": "It's important that everyone on Scratch remains safe online and in real life. Please let us know why you are worried about the safety of this user.",
-    "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the Community Guidelines.",
+    "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the {communityGuidelinesLink}.",
     "report.tooLongError": "That's too long! Please find a way to shorten your text.",
     "report.tooShortError": "That's too short. Please describe in detail what's inappropriate or disrespectful about the project.",
     "report.send": "Send",

From 8f936229ce1c9961031d009307b10ba508c784b7 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Thu, 2 Apr 2020 10:43:45 -0400
Subject: [PATCH 6/9] Fix linting

---
 src/components/modal/report/modal.jsx | 21 +++++++++------------
 src/l10n.json                         |  2 +-
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx
index 047170900..ae1e3e67d 100644
--- a/src/components/modal/report/modal.jsx
+++ b/src/components/modal/report/modal.jsx
@@ -2,7 +2,6 @@ const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
 const connect = require('react-redux').connect;
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
 const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
@@ -45,7 +44,8 @@ class ReportModal extends React.Component {
         };
     }
     handleSetCategory (formData) {
-        const category = this.props.reportOptions.find(o => o.value === formData.category) || this.props.reportOptions[0];
+        const category = this.props.reportOptions.find(o => o.value === formData.category) ||
+        this.props.reportOptions[0];
 
         return this.setState({
             categoryValue: formData.category,
@@ -53,9 +53,11 @@ class ReportModal extends React.Component {
         });
     }
     handleSetSubcategory (formData) {
-        const category = this.props.reportOptions.find(o => o.value === this.state.categoryValue) || this.props.reportOptions[0];
+        const category = this.props.reportOptions.find(o => o.value === this.state.categoryValue) ||
+        this.props.reportOptions[0];
 
-        const subcategory = category.subcategories.find(o => o.value === formData.subcategory) || category.subcategories[0];
+        const subcategory = category.subcategories.find(o => o.value === formData.subcategory) ||
+        category.subcategories[0];
         
         return this.setState({
             subcategoryValue: subcategory.value,
@@ -87,15 +89,10 @@ class ReportModal extends React.Component {
 
 
         if (category.subcategories) {
-           finalCategory = category.subcategories.find(o => o.value === this.state.subcategoryValue) || category.subcategories[0];
+            finalCategory = category.subcategories.find(o => o.value === this.state.subcategoryValue) ||
+            category.subcategories[0];
         }
 
-        const promptList = finalCategory.list && finalCategory.list.map((listItem, index) =>
-          <li key={index}>
-            <FormattedMessage {...listItem} />
-          </li>
-        );
-
         // Confirmation step is shown if a report has been submitted, even if state is reset by closing the modal.
         // This prevents multiple report submission within the same session because submission is stored in redux.
         const step = isConfirmed ? STEPS.confirmation : this.state.step;
@@ -231,7 +228,7 @@ class ReportModal extends React.Component {
                                 submitEnabled
                                 nextLabel={{id: 'general.close'}}
                                 onNext={onRequestClose}
-                            >   
+                            >
                                 <div className="instructions">
                                     <div className="instructions-header">
                                         <FormattedMessage {...finalCategory.label} />
diff --git a/src/l10n.json b/src/l10n.json
index ea676d1bd..bbb547516 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -291,7 +291,7 @@
     "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a 'face reveal', or the project focuses on the person's appearance, please click report.",
     "report.promptNoRemixingAllowed": "Please let us know where the project says it is not okay to remix — such as in the Notes & Credits, project title, etc.  ",
     "report.promptCreatorsSafety": "It's important that everyone on Scratch remains safe online and in real life. Please let us know why you are worried about the safety of this user.",
-    "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the {communityGuidelinesLink}.",
+    "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the {CommunityGuidelinesLink}.",
     "report.tooLongError": "That's too long! Please find a way to shorten your text.",
     "report.tooShortError": "That's too short. Please describe in detail what's inappropriate or disrespectful about the project.",
     "report.send": "Send",

From 8b1d35a4c8fa726028c9a6d0b3c9dc38ad9e8e72 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Thu, 2 Apr 2020 11:50:45 -0400
Subject: [PATCH 7/9] Remove duplicate i10n string

---
 src/l10n.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/l10n.json b/src/l10n.json
index bbb547516..af4ef56a5 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -285,7 +285,6 @@
     "report.tipsSpecific": "Try to be specific with your feedback. For instance: The controls to move the character did not work.",
     "report.promptDoesntWork": "A Scratch project, like any other application, may contain a few bugs. That is expected and completely okay!",
     "report.promptDoesntWorkTips": "We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.",
-    "report.promptCouldImprove": "Scratch projects are made by people of all ages and levels of experience. If you don't like this project because you feel it can be improved upon, we encourage you to share constructive feedback directly with the creator.",
     "report.promptTooHard": "If you feel a project could be easier, we encourage you to share that feedback directly with the creator of the project. Or remix it yourself and make it as easy or hard as you like!",
     "report.promptMisleading": "Tell us more about how it's tricking or misleading people",
     "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a 'face reveal', or the project focuses on the person's appearance, please click report.",

From 537332a18d6d85ae1ed136aad9bf2d71a07c9569 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Thu, 2 Apr 2020 16:00:35 -0400
Subject: [PATCH 8/9] Refer correctly to the "Send" button in the Face Reveal
 prompt

---
 src/components/modal/report/report-options.jsx | 9 ++++++++-
 src/l10n.json                                  | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/report/report-options.jsx b/src/components/modal/report/report-options.jsx
index 098e1b67f..375a19ee7 100644
--- a/src/components/modal/report/report-options.jsx
+++ b/src/components/modal/report/report-options.jsx
@@ -144,7 +144,14 @@ const REPORT_OPTIONS = [
             {
                 value: '10',
                 label: {id: 'report.reasonFaceReveal'},
-                prompt: <FormattedMessage id="report.promptFaceReveal" />
+                prompt: (
+                    <FormattedMessage
+                        id={`report.promptFaceReveal`}
+                        values={{
+                            send: <FormattedMessage id="report.send" />
+                        }}
+                    />
+                )
             },
             {
                 value: '11',
diff --git a/src/l10n.json b/src/l10n.json
index af4ef56a5..26dbc363c 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -287,7 +287,7 @@
     "report.promptDoesntWorkTips": "We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.",
     "report.promptTooHard": "If you feel a project could be easier, we encourage you to share that feedback directly with the creator of the project. Or remix it yourself and make it as easy or hard as you like!",
     "report.promptMisleading": "Tell us more about how it's tricking or misleading people",
-    "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a 'face reveal', or the project focuses on the person's appearance, please click report.",
+    "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a \"face reveal,\" or the project focuses on the person's appearance, please click \"{send}\".",
     "report.promptNoRemixingAllowed": "Please let us know where the project says it is not okay to remix — such as in the Notes & Credits, project title, etc.  ",
     "report.promptCreatorsSafety": "It's important that everyone on Scratch remains safe online and in real life. Please let us know why you are worried about the safety of this user.",
     "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the {CommunityGuidelinesLink}.",

From 5e76f505e0fccbff4f3bf230f3e89739039bcafd Mon Sep 17 00:00:00 2001
From: Ray Schamp <rschamp@users.noreply.github.com>
Date: Thu, 2 Apr 2020 16:19:36 -0400
Subject: [PATCH 9/9] Adhere to MLA guidelines for punctuation

---
 src/l10n.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/l10n.json b/src/l10n.json
index 26dbc363c..0e72d073a 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -287,7 +287,7 @@
     "report.promptDoesntWorkTips": "We encourage you to share any issues you discover directly with the creator of the project. It's also helpful to provide suggestions on how they may improve their project, if possible.",
     "report.promptTooHard": "If you feel a project could be easier, we encourage you to share that feedback directly with the creator of the project. Or remix it yourself and make it as easy or hard as you like!",
     "report.promptMisleading": "Tell us more about how it's tricking or misleading people",
-    "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a \"face reveal,\" or the project focuses on the person's appearance, please click \"{send}\".",
+    "report.promptFaceReveal": "Scratch allows people to use pictures of their face in creative projects like games, stories, or animations. However, projects that are just a picture of their face, or which focus entirely on their physical appearance, aren't allowed on Scratch. If this is a \"face reveal,\" or the project focuses on the person's appearance, please click \"{send}.\"",
     "report.promptNoRemixingAllowed": "Please let us know where the project says it is not okay to remix — such as in the Notes & Credits, project title, etc.  ",
     "report.promptCreatorsSafety": "It's important that everyone on Scratch remains safe online and in real life. Please let us know why you are worried about the safety of this user.",
     "report.promptSomethingElse": "We encourage you to double check if your report fits any of the other available categories. If you strongly feel it does not, please explain why this project breaks the {CommunityGuidelinesLink}.",