mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05:00
Merge pull request #3871 from chrisgarrity/contact-us/handle-ios
Enable Help widget
This commit is contained in:
commit
7231569dae
1 changed files with 58 additions and 86 deletions
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue