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

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

src/components/informationpage/informationpage.scss

@@ -47,6 +47,11 @@
             ol {
                 list-style: none;
             }
+
+            .nav-header {
+                font-size: 1.1rem;
+                font-weight: bold;
+            }
         }
 
         .info-inner {

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/?$",

src/views/contact-us/contact-us.jsx

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

src/views/contact-us/l10n.json

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