From 8fc9b57e7d693aa84777d62213cb8159db792776 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Fri, 28 Feb 2020 09:17:13 -0500
Subject: [PATCH 1/5] Add new Contact Us information page

Using the Freshdesk Feedback form
* adds new component HelpForm for the Freshdesk component
* adds new contact-us view
* modifies Information page css with style for a header on the right hand nav section
* adds new route for the contact-us page (is identical to the old scratchr2 URL)
---
 src/components/helpform/helpform.jsx          | 57 ++++++++++++++++++
 .../informationpage/informationpage.scss      |  5 ++
 src/routes.json                               |  8 +++
 src/views/contact-us/contact-us.jsx           | 60 +++++++++++++++++++
 src/views/contact-us/l10n.json                | 16 +++++
 5 files changed, 146 insertions(+)
 create mode 100644 src/components/helpform/helpform.jsx
 create mode 100644 src/views/contact-us/contact-us.jsx
 create mode 100644 src/views/contact-us/l10n.json

diff --git a/src/components/helpform/helpform.jsx b/src/components/helpform/helpform.jsx
new file mode 100644
index 00000000000..3f5deb79e07
--- /dev/null
+++ b/src/components/helpform/helpform.jsx
@@ -0,0 +1,57 @@
+const connect = require('react-redux').connect;
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const HelpForm = props => {
+    const prefix = 'https://mitscratch.freshdesk.com/widgets/feedback_widget/new?&widgetType=embedded&widgetView=yes&screenshot=No&searchArea=No&captcha=yes';
+    const title = `formTitle=${props.title}`;
+    const username = `helpdesk_ticket[custom_field][cf_scratch_name_40167]=${props.user.username || ''}`;
+    const agentText = encodeURI(window.navigator.userAgent.replace(';', ' -'));
+    const browser = `helpdesk_ticket[custom_field][cf_browser_40167]=${agentText}`;
+    return (
+        <div>
+            <script
+                src="https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js"
+                type="text/javascript"
+            />
+            <style
+                media="screen, projection"
+                type="text/css"
+            >
+                @import url(https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.css);
+            </style>
+            <iframe
+                className="freshwidget-embedded-form"
+                frameBorder="0"
+                height="505px"
+                id="freshwidget-embedded-form"
+                scrolling="no"
+                src={`${prefix}&${title}&${username}&${browser}`}
+                title={<FormattedMessage id="contactUs.questionsForum" />}
+                width="100%"
+            />
+        </div>
+    );
+};
+
+
+HelpForm.propTypes = {
+    title: PropTypes.string.isRequired,
+    user: PropTypes.shape({
+        classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        thumbnailUrl: PropTypes.string,
+        username: PropTypes.string
+    })
+};
+
+HelpForm.defaultProps = {
+    title: '',
+    user: {username: ''}
+};
+
+const mapStateToProps = state => ({
+    user: state.session.session.user
+});
+
+module.exports = connect(mapStateToProps)(HelpForm);
diff --git a/src/components/informationpage/informationpage.scss b/src/components/informationpage/informationpage.scss
index 704737272b3..877a3c4be43 100644
--- a/src/components/informationpage/informationpage.scss
+++ b/src/components/informationpage/informationpage.scss
@@ -47,6 +47,11 @@
             ol {
                 list-style: none;
             }
+
+            .nav-header {
+                font-size: 1.1rem;
+                font-weight: bold;
+            }
         }
 
         .info-inner {
diff --git a/src/routes.json b/src/routes.json
index 46d22c96e4a..19f7125bf27 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -92,6 +92,14 @@
         "routeAlias": "/connect/?$",
         "redirect": "https://eepurl.com/cws7_f"
     },
+    {
+        "name": "contact-us",
+        "pattern": "^/contact-us/?$",
+        "routeAlias": "/contact-us/?$",
+        "view": "contact-us/contact-us",
+        "title": "Contact Us",
+        "viewportWidth": "device-width"
+    },
     {
         "name": "credits",
         "pattern": "^/credits/?$",
diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
new file mode 100644
index 00000000000..0f55db87c1b
--- /dev/null
+++ b/src/views/contact-us/contact-us.jsx
@@ -0,0 +1,60 @@
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const intlShape = require('react-intl').intlShape;
+const React = require('react');
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+const HelpForm = require('../../components/helpform/helpform.jsx');
+
+const InformationPage = require('../../components/informationpage/informationpage.jsx');
+
+const ContactUs = injectIntl(props => (
+    <InformationPage title={props.intl.formatMessage({id: 'contactUs.title'})}>
+        <div className="inner info-inner">
+            <section id="contact-us">
+                <span className="nav-spacer" />
+                <p><FormattedMessage
+                    id="contactUs.intro"
+                    values={{faqLink: (
+                        <a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
+                    )}}
+                /></p>
+                <p><FormattedMessage
+                    id="contactUs.forumsInfo"
+                    values={{forumsLink: (
+                        <a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a>
+                    )}}
+                /></p>
+                <p><FormattedMessage
+                    id="contactUs.forumsAsk"
+                    values={{forumsLink: (
+                        <a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a>
+                    )}}
+                /></p>
+                <ul>
+                    <li><a href="/discuss/4/"><FormattedMessage id="contactUs.questionsForum" /></a></li>
+                    <li><a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsForum" /></a></li>
+                    <li><a href="/discuss/3/"><FormattedMessage id="contactUs.bugsForum" /></a></li>
+                </ul>
+                <p><FormattedMessage id="contactUs.formIntro" /></p>
+                <HelpForm title={props.intl.formatMessage({id: 'contactUs.contactScratch'})} />
+            </section>
+            <span className="nav-spacer" />
+        </div>
+        <nav>
+            <ol>
+                <li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li>
+                <li><a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li>
+                <li><a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a></li>
+            </ol>
+        </nav>
+    </InformationPage>
+));
+
+ContactUs.propTypes = {
+    intl: intlShape
+};
+
+render(<Page><ContactUs /></Page>, document.getElementById('app'));
diff --git a/src/views/contact-us/l10n.json b/src/views/contact-us/l10n.json
new file mode 100644
index 00000000000..00a9c37b673
--- /dev/null
+++ b/src/views/contact-us/l10n.json
@@ -0,0 +1,16 @@
+{
+    "contactUs.title":"Contact Us",
+    "contactUs.intro":"You can find answers to most questions about Scratch on our {faqLink} page.",
+    "contactUs.faqLinkText":"Frequently Asked Questions",
+    "contactUs.forumsInfo":"You can also look through the Scratch {forumsLink}.",
+    "contactUs.forumsLinkText":"Discussion forums",
+    "contactUs.forumsAsk":"If you can't find an answer, post a new topic on the {forumsLink} (see links below). There are many experienced Scratchers who can help with the topics below and more:",
+    "contactUs.questionsForum":"Questions About Scratch",
+    "contactUs.scriptsForum":"Help with Scripts",
+	"contactUs.bugsForum":"Bugs and Glitches",
+    "contactUs.formIntro":"If you still need to contact us, please fill out the form below with as much detail as you can. If you have any screenshots, attachments or links that help to explain your problem, please include them. We get a lot of mail, so we may not be able to respond to your message.",
+    "contactUs.feedbackForm":"Feedback Form",
+    "contactUs.findHelp":"Where to find help:",
+    "contactUs.knowledgeBase":"Knowledge Base",
+    "contactUs.contactScratch":"Contact the Scratch Team"
+}

From 3dc5155c381e14ed100381988f691d167bb531db Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Tue, 3 Mar 2020 10:10:20 -0500
Subject: [PATCH 2/5] Revised wording

---
 src/views/contact-us/contact-us.jsx | 34 ++++++++++++++++-------------
 src/views/contact-us/l10n.json      | 15 +++++++------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
index 0f55db87c1b..5024050a177 100644
--- a/src/views/contact-us/contact-us.jsx
+++ b/src/views/contact-us/contact-us.jsx
@@ -21,22 +21,26 @@ const ContactUs = injectIntl(props => (
                         <a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
                     )}}
                 /></p>
-                <p><FormattedMessage
-                    id="contactUs.forumsInfo"
-                    values={{forumsLink: (
-                        <a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a>
-                    )}}
-                /></p>
-                <p><FormattedMessage
-                    id="contactUs.forumsAsk"
-                    values={{forumsLink: (
-                        <a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a>
-                    )}}
-                /></p>
+                <p><FormattedMessage id="contactUs.forumsInfo" /></p>
                 <ul>
-                    <li><a href="/discuss/4/"><FormattedMessage id="contactUs.questionsForum" /></a></li>
-                    <li><a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsForum" /></a></li>
-                    <li><a href="/discuss/3/"><FormattedMessage id="contactUs.bugsForum" /></a></li>
+                    <li><FormattedMessage
+                        id="contactUs.questionsForum"
+                        values={{questionsLink: (
+                            <a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a>
+                        )}}
+                    /></li>
+                    <li><FormattedMessage
+                        id="contactUs.scriptsForum"
+                        values={{scriptsLink: (
+                            <a href="/discuss/4/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
+                        )}}
+                    /></li>
+                    <li><FormattedMessage
+                        id="contactUs.bugsForum"
+                        values={{bugsLink: (
+                            <a href="/discuss/4/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
+                        )}}
+                    /></li>
                 </ul>
                 <p><FormattedMessage id="contactUs.formIntro" /></p>
                 <HelpForm title={props.intl.formatMessage({id: 'contactUs.contactScratch'})} />
diff --git a/src/views/contact-us/l10n.json b/src/views/contact-us/l10n.json
index 00a9c37b673..8b54932ea67 100644
--- a/src/views/contact-us/l10n.json
+++ b/src/views/contact-us/l10n.json
@@ -2,14 +2,15 @@
     "contactUs.title":"Contact Us",
     "contactUs.intro":"You can find answers to most questions about Scratch on our {faqLink} page.",
     "contactUs.faqLinkText":"Frequently Asked Questions",
-    "contactUs.forumsInfo":"You can also look through the Scratch {forumsLink}.",
-    "contactUs.forumsLinkText":"Discussion forums",
-    "contactUs.forumsAsk":"If you can't find an answer, post a new topic on the {forumsLink} (see links below). There are many experienced Scratchers who can help with the topics below and more:",
-    "contactUs.questionsForum":"Questions About Scratch",
-    "contactUs.scriptsForum":"Help with Scripts",
-	"contactUs.bugsForum":"Bugs and Glitches",
+    "contactUs.forumsInfo":"If you cannot find an answer in the FAQ, there are many experienced Scratchers in the Discussion Forums who are happy to help.",
+    "contactUs.forumsLinkText":"Discussion Forums",
+    "contactUs.questionsForum":"You can ask general questions about how to do stuff in the {questionsLink} forum.",
+    "contactUs.questionsLinkText":"Questions About Scratch",
+    "contactUs.scriptsForum":"If you need help with a specific project, try posting in the {scriptsLink} forum.",
+    "contactUs.scriptsLinkText":"Help with Scripts",
+    "contactUs.bugsForum":"If you want to report a bug in Scratch, check the {bugsLink} forum. It's the best place to report bugs and see if others are experiencing similar difficulties.",
+    "contactUs.bugsLinkText":"Bugs and Glitches",
     "contactUs.formIntro":"If you still need to contact us, please fill out the form below with as much detail as you can. If you have any screenshots, attachments or links that help to explain your problem, please include them. We get a lot of mail, so we may not be able to respond to your message.",
-    "contactUs.feedbackForm":"Feedback Form",
     "contactUs.findHelp":"Where to find help:",
     "contactUs.knowledgeBase":"Knowledge Base",
     "contactUs.contactScratch":"Contact the Scratch Team"

From f0bcd9f574d628a9daeebc101736ab6468374332 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Tue, 3 Mar 2020 11:17:07 -0500
Subject: [PATCH 3/5] Remove the nav section and make the form full width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Decided that there is no need for the Nav sidebar since we don’t want the link to the Discussions right now. It could come back if we add the knowledge base.
---
 src/views/contact-us/contact-us.jsx | 10 +---------
 src/views/contact-us/l10n.json      |  2 --
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
index 5024050a177..39283c6d408 100644
--- a/src/views/contact-us/contact-us.jsx
+++ b/src/views/contact-us/contact-us.jsx
@@ -43,17 +43,9 @@ const ContactUs = injectIntl(props => (
                     /></li>
                 </ul>
                 <p><FormattedMessage id="contactUs.formIntro" /></p>
-                <HelpForm title={props.intl.formatMessage({id: 'contactUs.contactScratch'})} />
             </section>
-            <span className="nav-spacer" />
         </div>
-        <nav>
-            <ol>
-                <li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li>
-                <li><a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li>
-                <li><a href="/discuss/"><FormattedMessage id="contactUs.forumsLinkText" /></a></li>
-            </ol>
-        </nav>
+        <HelpForm title={props.intl.formatMessage({id: 'contactUs.contactScratch'})} />
     </InformationPage>
 ));
 
diff --git a/src/views/contact-us/l10n.json b/src/views/contact-us/l10n.json
index 8b54932ea67..735955a3c31 100644
--- a/src/views/contact-us/l10n.json
+++ b/src/views/contact-us/l10n.json
@@ -11,7 +11,5 @@
     "contactUs.bugsForum":"If you want to report a bug in Scratch, check the {bugsLink} forum. It's the best place to report bugs and see if others are experiencing similar difficulties.",
     "contactUs.bugsLinkText":"Bugs and Glitches",
     "contactUs.formIntro":"If you still need to contact us, please fill out the form below with as much detail as you can. If you have any screenshots, attachments or links that help to explain your problem, please include them. We get a lot of mail, so we may not be able to respond to your message.",
-    "contactUs.findHelp":"Where to find help:",
-    "contactUs.knowledgeBase":"Knowledge Base",
     "contactUs.contactScratch":"Contact the Scratch Team"
 }

From ee09ba59a481567c60b34c72058af1576c0b6d00 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Thu, 5 Mar 2020 08:45:33 -0500
Subject: [PATCH 4/5] Add handling for parameters passed in the query from
 scratchr2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scratchr2 has links to contact us from the report (profile|studio) dialogs. Looking at the scratchr2 source, there’s also one for confirmations, so this change handles the additional details in the same way - in the subject and description. In the future we could consider pre-filling specific form fields that we define.
---
 src/components/helpform/helpform.jsx |  8 +++++++-
 src/views/contact-us/contact-us.jsx  | 21 ++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/helpform/helpform.jsx b/src/components/helpform/helpform.jsx
index 3f5deb79e07..1cf44a38fa2 100644
--- a/src/components/helpform/helpform.jsx
+++ b/src/components/helpform/helpform.jsx
@@ -9,6 +9,8 @@ const HelpForm = props => {
     const username = `helpdesk_ticket[custom_field][cf_scratch_name_40167]=${props.user.username || ''}`;
     const agentText = encodeURI(window.navigator.userAgent.replace(';', ' -'));
     const browser = `helpdesk_ticket[custom_field][cf_browser_40167]=${agentText}`;
+    const formSubject = `helpdesk_ticket[subject]=${props.subject}`;
+    const formDescription = `helpdesk_ticket[description]=${props.body}`;
     return (
         <div>
             <script
@@ -27,7 +29,7 @@ const HelpForm = props => {
                 height="505px"
                 id="freshwidget-embedded-form"
                 scrolling="no"
-                src={`${prefix}&${title}&${username}&${browser}`}
+                src={`${prefix}&${title}&${username}&${browser}&${formSubject}&${formDescription}`}
                 title={<FormattedMessage id="contactUs.questionsForum" />}
                 width="100%"
             />
@@ -37,6 +39,8 @@ const HelpForm = props => {
 
 
 HelpForm.propTypes = {
+    body: PropTypes.string,
+    subject: PropTypes.string,
     title: PropTypes.string.isRequired,
     user: PropTypes.shape({
         classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -46,6 +50,8 @@ HelpForm.propTypes = {
 };
 
 HelpForm.defaultProps = {
+    body: '',
+    subject: '',
     title: '',
     user: {username: ''}
 };
diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
index 39283c6d408..13ee9272d82 100644
--- a/src/views/contact-us/contact-us.jsx
+++ b/src/views/contact-us/contact-us.jsx
@@ -10,6 +10,21 @@ const HelpForm = require('../../components/helpform/helpform.jsx');
 
 const InformationPage = require('../../components/informationpage/informationpage.jsx');
 
+let subject = '';
+let body = '';
+const url = (window.location && window.location.search) || '';
+// assumes that scratchr2 will only ever send one parameter
+const params = url.split('?')[1];
+if (typeof (params) !== 'undefined' && params.indexOf('studio') !== -1) {
+    subject = `Inappropriate content reported in studio ${params.split('=')[1]}`;
+    body = `https://scratch.mit.edu/studios/${params.split('=')[1]}`;
+} else if (typeof (params) !== 'undefined' && params.indexOf('profile') !== -1) {
+    subject = `Inappropriate content reported in profile ${params.split('=')[1]}`;
+    body = `https://scratch.mit.edu/users/${params.split('=')[1]}`;
+} else if (typeof (params) !== 'undefined' && params.indexOf('confirmation') !== -1) {
+    subject = 'Problem with email confirmation';
+}
+
 const ContactUs = injectIntl(props => (
     <InformationPage title={props.intl.formatMessage({id: 'contactUs.title'})}>
         <div className="inner info-inner">
@@ -45,7 +60,11 @@ const ContactUs = injectIntl(props => (
                 <p><FormattedMessage id="contactUs.formIntro" /></p>
             </section>
         </div>
-        <HelpForm title={props.intl.formatMessage({id: 'contactUs.contactScratch'})} />
+        <HelpForm
+            body={body}
+            subject={subject}
+            title={props.intl.formatMessage({id: 'contactUs.contactScratch'})}
+        />
     </InformationPage>
 ));
 

From e8197e4ffc2109ccc7a627ba2201bdad13b8e326 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Thu, 5 Mar 2020 15:31:06 -0500
Subject: [PATCH 5/5] Address review comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* With Carl decided to put the sidebar back even with just one item. It’s still one we want to emphasize.
* made sure the freshdesk js file would not block loading the form (it doesn’t appear to be needed for the form, it’s probably mainly for the pop-up version)
* moved the query processing into a constructor (more idomatic react)
* expanded the form so it should not need to scroll - also noted that in incognito mode a captcha is shown, so created enough space for that to be visible.
---
 src/components/helpform/helpform.jsx |   4 +-
 src/views/contact-us/contact-us.jsx  | 130 +++++++++++++++------------
 src/views/contact-us/l10n.json       |   1 +
 3 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/src/components/helpform/helpform.jsx b/src/components/helpform/helpform.jsx
index 1cf44a38fa2..f98201cbf51 100644
--- a/src/components/helpform/helpform.jsx
+++ b/src/components/helpform/helpform.jsx
@@ -14,6 +14,8 @@ const HelpForm = props => {
     return (
         <div>
             <script
+                async
+                defer
                 src="https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js"
                 type="text/javascript"
             />
@@ -26,7 +28,7 @@ const HelpForm = props => {
             <iframe
                 className="freshwidget-embedded-form"
                 frameBorder="0"
-                height="505px"
+                height="744px"
                 id="freshwidget-embedded-form"
                 scrolling="no"
                 src={`${prefix}&${title}&${username}&${browser}&${formSubject}&${formDescription}`}
diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
index 13ee9272d82..6447d4ddc1d 100644
--- a/src/views/contact-us/contact-us.jsx
+++ b/src/views/contact-us/contact-us.jsx
@@ -10,66 +10,82 @@ const HelpForm = require('../../components/helpform/helpform.jsx');
 
 const InformationPage = require('../../components/informationpage/informationpage.jsx');
 
-let subject = '';
-let body = '';
-const url = (window.location && window.location.search) || '';
-// assumes that scratchr2 will only ever send one parameter
-const params = url.split('?')[1];
-if (typeof (params) !== 'undefined' && params.indexOf('studio') !== -1) {
-    subject = `Inappropriate content reported in studio ${params.split('=')[1]}`;
-    body = `https://scratch.mit.edu/studios/${params.split('=')[1]}`;
-} else if (typeof (params) !== 'undefined' && params.indexOf('profile') !== -1) {
-    subject = `Inappropriate content reported in profile ${params.split('=')[1]}`;
-    body = `https://scratch.mit.edu/users/${params.split('=')[1]}`;
-} else if (typeof (params) !== 'undefined' && params.indexOf('confirmation') !== -1) {
-    subject = 'Problem with email confirmation';
+class ContactUs extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            subject: '',
+            body: ''
+        };
+        const query = window.location.search;
+        // assumes that scratchr2 will only ever send one parameter
+        // The subject is not localized because sending in English is easier for Scratch Team
+        if (query.indexOf('studio=') !== -1) {
+            this.state.subject = `Inappropriate content reported in studio ${query.split('=')[1]}`;
+            this.state.body = `https://scratch.mit.edu/studios/${query.split('=')[1]}`;
+        } else if (query.indexOf('profile=') !== -1) {
+            this.state.subject = `Inappropriate content reported in profile ${query.split('=')[1]}`;
+            this.state.body = `https://scratch.mit.edu/users/${query.split('=')[1]}`;
+        } else if (query.indexOf('confirmation=') !== -1) {
+            this.state.subject = 'Problem with email confirmation';
+        }
+    }
+    render () {
+        return (
+            <InformationPage title={this.props.intl.formatMessage({id: 'contactUs.title'})}>
+                <div className="inner info-inner">
+                    <section id="contact-us">
+                        <span className="nav-spacer" />
+                        <p><FormattedMessage
+                            id="contactUs.intro"
+                            values={{faqLink: (
+                                <a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
+                            )}}
+                        /></p>
+                        <p><FormattedMessage id="contactUs.forumsInfo" /></p>
+                        <ul>
+                            <li><FormattedMessage
+                                id="contactUs.questionsForum"
+                                values={{questionsLink: (
+                                    <a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a>
+                                )}}
+                            /></li>
+                            <li><FormattedMessage
+                                id="contactUs.scriptsForum"
+                                values={{scriptsLink: (
+                                    <a href="/discuss/4/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
+                                )}}
+                            /></li>
+                            <li><FormattedMessage
+                                id="contactUs.bugsForum"
+                                values={{bugsLink: (
+                                    <a href="/discuss/4/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
+                                )}}
+                            /></li>
+                        </ul>
+                        <p><FormattedMessage id="contactUs.formIntro" /></p>
+                    </section>
+                </div>
+                <nav>
+                    <ol>
+                        <li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li>
+                        <li><a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li>
+                    </ol>
+                </nav>
+                <HelpForm
+                    body={this.state.body}
+                    subject={this.state.subject}
+                    title={this.props.intl.formatMessage({id: 'contactUs.contactScratch'})}
+                />
+            </InformationPage>
+        );
+    }
 }
 
-const ContactUs = injectIntl(props => (
-    <InformationPage title={props.intl.formatMessage({id: 'contactUs.title'})}>
-        <div className="inner info-inner">
-            <section id="contact-us">
-                <span className="nav-spacer" />
-                <p><FormattedMessage
-                    id="contactUs.intro"
-                    values={{faqLink: (
-                        <a href="/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
-                    )}}
-                /></p>
-                <p><FormattedMessage id="contactUs.forumsInfo" /></p>
-                <ul>
-                    <li><FormattedMessage
-                        id="contactUs.questionsForum"
-                        values={{questionsLink: (
-                            <a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a>
-                        )}}
-                    /></li>
-                    <li><FormattedMessage
-                        id="contactUs.scriptsForum"
-                        values={{scriptsLink: (
-                            <a href="/discuss/4/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
-                        )}}
-                    /></li>
-                    <li><FormattedMessage
-                        id="contactUs.bugsForum"
-                        values={{bugsLink: (
-                            <a href="/discuss/4/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
-                        )}}
-                    /></li>
-                </ul>
-                <p><FormattedMessage id="contactUs.formIntro" /></p>
-            </section>
-        </div>
-        <HelpForm
-            body={body}
-            subject={subject}
-            title={props.intl.formatMessage({id: 'contactUs.contactScratch'})}
-        />
-    </InformationPage>
-));
-
 ContactUs.propTypes = {
     intl: intlShape
 };
 
-render(<Page><ContactUs /></Page>, document.getElementById('app'));
+const WrappedContactUs = injectIntl(ContactUs);
+
+render(<Page><WrappedContactUs /></Page>, document.getElementById('app'));
diff --git a/src/views/contact-us/l10n.json b/src/views/contact-us/l10n.json
index 735955a3c31..85054b2df85 100644
--- a/src/views/contact-us/l10n.json
+++ b/src/views/contact-us/l10n.json
@@ -11,5 +11,6 @@
     "contactUs.bugsForum":"If you want to report a bug in Scratch, check the {bugsLink} forum. It's the best place to report bugs and see if others are experiencing similar difficulties.",
     "contactUs.bugsLinkText":"Bugs and Glitches",
     "contactUs.formIntro":"If you still need to contact us, please fill out the form below with as much detail as you can. If you have any screenshots, attachments or links that help to explain your problem, please include them. We get a lot of mail, so we may not be able to respond to your message.",
+    "contactUs.findHelp":"Where to find help:",
     "contactUs.contactScratch":"Contact the Scratch Team"
 }