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