Address review comments

* 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

@@ -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}`}

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'));

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