Add new Contact Us information page

src/components/helpform/helpform.jsx

@@ -0,0 +1,65 @@
+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}`;
+    const formSubject = `helpdesk_ticket[subject]=${props.subject}`;
+    const formDescription = `helpdesk_ticket[description]=${props.body}`;
+    return (
+        <div>
+            <script
+                async
+                defer
+                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="744px"
+                id="freshwidget-embedded-form"
+                scrolling="no"
+                src={`${prefix}&${title}&${username}&${browser}&${formSubject}&${formDescription}`}
+                title={<FormattedMessage id="contactUs.questionsForum" />}
+                width="100%"
+            />
+        </div>
+    );
+};
+
+
+HelpForm.propTypes = {
+    body: PropTypes.string,
+    subject: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    user: PropTypes.shape({
+        classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        thumbnailUrl: PropTypes.string,
+        username: PropTypes.string
+    })
+};
+
+HelpForm.defaultProps = {
+    body: '',
+    subject: '',
+    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

@@ -0,0 +1,91 @@
+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');
+
+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>
+        );
+    }
+}
+
+ContactUs.propTypes = {
+    intl: intlShape
+};
+
+const WrappedContactUs = injectIntl(ContactUs);
+
+render(<Page><WrappedContactUs /></Page>, document.getElementById('app'));

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":"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.findHelp":"Where to find help:",
+    "contactUs.contactScratch":"Contact the Scratch Team"
+}