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,93 +35,62 @@ 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="contact-us inner info-inner">
<div className="inner info-inner"> <section
<section id="contact-us"> className="helpwidget"
<span className="nav-spacer" /> id="contact-us"
<p><FormattedMessage >
id="contactUs.intro" <span className="nav-spacer" />
values={{faqLink: ( <h3>
<a href="/info/faq"><FormattedMessage id="contactUs.faqLinkText" /></a> <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> /></li>
<p><FormattedMessage id="contactUs.forumsInfo" /></p> <li><FormattedMessage
<ul> id="contactUs.scriptsText"
<li><FormattedMessage values={{scriptsLink: (
id="contactUs.questionsForum" <a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a>
values={{questionsLink: ( )}}
<a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a> /></li>
)}} <li><FormattedMessage
/></li> id="contactUs.bugsText"
<li><FormattedMessage values={{bugsLink: (
id="contactUs.scriptsForum" <a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
values={{scriptsLink: ( )}}
<a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a> /></li>
)}} </ul>
/></li> <h3>
<li><FormattedMessage <FormattedMessage id="contactUs.needSupport" />
id="contactUs.bugsForum" </h3>
values={{bugsLink: ( {this.state.showForm ? (
<a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a>
)}}
/></li>
</ul>
<p><FormattedMessage id="contactUs.formIntro" /></p> <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> <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}