Merge pull request #3871 from chrisgarrity/contact-us/handle-ios

Enable Help widget
This commit is contained in:
chrisgarrity 2020-05-12 15:25:25 -04:00 committed by GitHub
commit 7231569dae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -8,7 +8,7 @@ const render = require('../../lib/render.jsx');
const HelpForm = require('../../components/helpform/helpform.jsx'); const HelpForm = require('../../components/helpform/helpform.jsx');
const HelpWidget = require('../../components/helpwidget/helpwidget.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'); const InformationPage = require('../../components/informationpage/informationpage.jsx');
require('./contact-us.scss'); require('./contact-us.scss');
@ -18,7 +18,8 @@ class ContactUs extends React.Component {
super(props); super(props);
this.state = { this.state = {
subject: '', subject: '',
body: '' body: '',
showForm: false
}; };
const query = window.location.search; const query = window.location.search;
let scratchId = ''; let scratchId = '';
@ -34,50 +35,16 @@ class ContactUs extends React.Component {
} else if (query.indexOf('confirmation=') !== -1) { } else if (query.indexOf('confirmation=') !== -1) {
this.state.subject = 'Problem with email confirmation'; 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 () { render () {
return ( return (
<InformationPage <InformationPage
title={CONTACT_US_POPUP ? title={this.props.intl.formatMessage({id: 'contactUs.qTitle'})}
this.props.intl.formatMessage({id: 'contactUs.qTitle'}) :
this.props.intl.formatMessage({id: 'contactUs.title'})}
> >
{!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>
)}}
/></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>
<p><FormattedMessage id="contactUs.formIntro" /></p>
</section>
</div>
)}
{CONTACT_US_POPUP && (
<div className="contact-us inner info-inner"> <div className="contact-us inner info-inner">
<section <section
className="helpwidget" className="helpwidget"
@ -121,6 +88,9 @@ class ContactUs extends React.Component {
<h3> <h3>
<FormattedMessage id="contactUs.needSupport" /> <FormattedMessage id="contactUs.needSupport" />
</h3> </h3>
{this.state.showForm ? (
<p><FormattedMessage id="contactUs.formIntro" /></p>
) : (
<p> <p>
<FormattedMessage <FormattedMessage
id="contactUs.supportInfo" id="contactUs.supportInfo"
@ -132,21 +102,23 @@ class ContactUs extends React.Component {
)}} )}}
/> />
</p> </p>
)}
</section> </section>
{!this.state.showForm && (
<HelpWidget <HelpWidget
button button
body={this.state.body} body={this.state.body}
subject={this.state.subject} subject={this.state.subject}
/> />
</div>
)} )}
</div>
<nav> <nav>
<ol> <ol>
<li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li> <li className="nav-header"><FormattedMessage id="contactUs.findHelp" /></li>
<li><a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li> <li><a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a></li>
</ol> </ol>
</nav> </nav>
{!CONTACT_US_POPUP && ( {this.state.showForm && (
<HelpForm <HelpForm
body={this.state.body} body={this.state.body}
subject={this.state.subject} subject={this.state.subject}