From 3c744bed4c393c94c3897f5e2196005bfc439119 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Fri, 8 May 2020 13:02:07 -0400
Subject: [PATCH] Enable Help widget

Enable Helpwidget, but keep showing the form for iOS 10 and lower.
---
 src/views/contact-us/contact-us.jsx | 144 +++++++++++-----------------
 1 file changed, 58 insertions(+), 86 deletions(-)

diff --git a/src/views/contact-us/contact-us.jsx b/src/views/contact-us/contact-us.jsx
index 9ae06031b..03b9e95fd 100644
--- a/src/views/contact-us/contact-us.jsx
+++ b/src/views/contact-us/contact-us.jsx
@@ -8,7 +8,7 @@ const render = require('../../lib/render.jsx');
 
 const HelpForm = require('../../components/helpform/helpform.jsx');
 const HelpWidget = require('../../components/helpwidget/helpwidget.jsx');
-const {CONTACT_US_POPUP} = require('../../lib/feature-flags.js');
+const bowser = require('bowser');
 
 const InformationPage = require('../../components/informationpage/informationpage.jsx');
 require('./contact-us.scss');
@@ -18,7 +18,8 @@ class ContactUs extends React.Component {
         super(props);
         this.state = {
             subject: '',
-            body: ''
+            body: '',
+            showForm: false
         };
         const query = window.location.search;
         let scratchId = '';
@@ -34,93 +35,62 @@ class ContactUs extends React.Component {
         } else if (query.indexOf('confirmation=') !== -1) {
             this.state.subject = 'Problem with email confirmation';
         }
+        // older iPads (iOS 10 or lower) cannot show help widget, show the form instead
+        if (bowser.osname === 'iOS' && parseInt(bowser.osversion, 10) < 11) {
+            this.state.showForm = true;
+        }
     }
     render () {
         return (
             <InformationPage
-                title={CONTACT_US_POPUP ?
-                    this.props.intl.formatMessage({id: 'contactUs.qTitle'}) :
-                    this.props.intl.formatMessage({id: 'contactUs.title'})}
+                title={this.props.intl.formatMessage({id: 'contactUs.qTitle'})}
             >
-                {!CONTACT_US_POPUP && (
-                    <div className="inner info-inner">
-                        <section id="contact-us">
-                            <span className="nav-spacer" />
-                            <p><FormattedMessage
-                                id="contactUs.intro"
-                                values={{faqLink: (
-                                    <a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
+                <div className="contact-us inner info-inner">
+                    <section
+                        className="helpwidget"
+                        id="contact-us"
+                    >
+                        <span className="nav-spacer" />
+                        <h3>
+                            <FormattedMessage id="contactUs.seeFaq" />
+                        </h3>
+                        <p><FormattedMessage
+                            id="contactUs.faqInfo"
+                            values={{faqLink: (
+                                <a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
+                            )}}
+                        /></p>
+                        <h3>
+                            <FormattedMessage id="contactUs.askCommunity" />
+                        </h3>
+                        <p><FormattedMessage id="contactUs.forumsIntro" /></p>
+                        <p><FormattedMessage id="contactUs.forumsHelp" /></p>
+                        <ul>
+                            <li><FormattedMessage
+                                id="contactUs.questionsText"
+                                values={{questionsLink: (
+                                    <a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></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/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
-                                    )}}
-                                /></li>
-                                <li><FormattedMessage
-                                    id="contactUs.bugsForum"
-                                    values={{bugsLink: (
-                                        <a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
-                                    )}}
-                                /></li>
-                            </ul>
+                            /></li>
+                            <li><FormattedMessage
+                                id="contactUs.scriptsText"
+                                values={{scriptsLink: (
+                                    <a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
+                                )}}
+                            /></li>
+                            <li><FormattedMessage
+                                id="contactUs.bugsText"
+                                values={{bugsLink: (
+                                    <a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
+                                )}}
+                            /></li>
+                        </ul>
+                        <h3>
+                            <FormattedMessage id="contactUs.needSupport" />
+                        </h3>
+                        {this.state.showForm ? (
                             <p><FormattedMessage id="contactUs.formIntro" /></p>
-                        </section>
-                    </div>
-                )}
-                {CONTACT_US_POPUP && (
-                    <div className="contact-us inner info-inner">
-                        <section
-                            className="helpwidget"
-                            id="contact-us"
-                        >
-                            <span className="nav-spacer" />
-                            <h3>
-                                <FormattedMessage id="contactUs.seeFaq" />
-                            </h3>
-                            <p><FormattedMessage
-                                id="contactUs.faqInfo"
-                                values={{faqLink: (
-                                    <a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a>
-                                )}}
-                            /></p>
-                            <h3>
-                                <FormattedMessage id="contactUs.askCommunity" />
-                            </h3>
-                            <p><FormattedMessage id="contactUs.forumsIntro" /></p>
-                            <p><FormattedMessage id="contactUs.forumsHelp" /></p>
-                            <ul>
-                                <li><FormattedMessage
-                                    id="contactUs.questionsText"
-                                    values={{questionsLink: (
-                                        <a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a>
-                                    )}}
-                                /></li>
-                                <li><FormattedMessage
-                                    id="contactUs.scriptsText"
-                                    values={{scriptsLink: (
-                                        <a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
-                                    )}}
-                                /></li>
-                                <li><FormattedMessage
-                                    id="contactUs.bugsText"
-                                    values={{bugsLink: (
-                                        <a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
-                                    )}}
-                                /></li>
-                            </ul>
-                            <h3>
-                                <FormattedMessage id="contactUs.needSupport" />
-                            </h3>
+                        ) : (
                             <p>
                                 <FormattedMessage
                                     id="contactUs.supportInfo"
@@ -132,21 +102,23 @@ class ContactUs extends React.Component {
                                     )}}
                                 />
                             </p>
-                        </section>
+                        )}
+                    </section>
+                    {!this.state.showForm && (
                         <HelpWidget
                             button
                             body={this.state.body}
                             subject={this.state.subject}
                         />
-                    </div>
-                )}
+                    )}
+                </div>
                 <nav>
                     <ol>
                         <li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li>
                         <li><a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li>
                     </ol>
                 </nav>
-                {!CONTACT_US_POPUP && (
+                {this.state.showForm && (
                     <HelpForm
                         body={this.state.body}
                         subject={this.state.subject}