mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 15:17:53 -05:00
Add pop up Help widget
Initial version of contact us with the pop up Freshdesk help widget. * adding feature flag `?CONTACT_US_POPUP=true` to the URL allows to switch between current contact-us with form, and new contact-us with popup widget. * new copy for the contact us page (selected based on feature flag) * handles scratchr2 redirects by pre-opening the popup on the contact us form and handles multiple parameters
This commit is contained in:
Chris Garrity
parent
93d7946af7
commit
7d9e6ea8b7
6 changed files with 242 additions and 44 deletions
119
src/components/helpwidget/helpwidget.jsx
Normal file
119
src/components/helpwidget/helpwidget.jsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const intlShape = require('react-intl').intlShape;
|
||||
const bindAll = require('lodash.bindall');
|
||||
const connect = require('react-redux').connect;
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const Button = require('../forms/button.jsx');
|
||||
/**
|
||||
* Footer link that opens Freshdesk help widger
|
||||
*/
|
||||
class HelpWidget extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'handleOpenWidget',
|
||||
'openPopup'
|
||||
]);
|
||||
}
|
||||
componentDidMount () {
|
||||
// don't add the script to the page more than once
|
||||
if (document.getElementById('helpwidgetscript') === null) {
|
||||
const script = document.createElement('script');
|
||||
script.id = 'helpwidgetscript';
|
||||
script.src = 'https://widget.freshworks.com/widgets/4000000089.js';
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
script.onload = () => this.scriptLoaded();
|
||||
|
||||
document.body.appendChild(script);
|
||||
window.fwSettings = {
|
||||
widget_id: 4000000089,
|
||||
locale: this.props.intl.locale
|
||||
};
|
||||
}
|
||||
}
|
||||
scriptLoaded () {
|
||||
// freshdesk widget embed code
|
||||
/* eslint-disable */
|
||||
!(function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}())
|
||||
/* eslint-enable */
|
||||
// don't show the Freshdesk button
|
||||
window.FreshworksWidget('hide', 'launcher');
|
||||
window.FreshworksWidget('setLabels', {
|
||||
fr: {
|
||||
banner: 'Bienvenue a Support',
|
||||
contact_form: {
|
||||
title: this.props.intl.formatMessage({id: 'contactUs.contactScratch'})
|
||||
}
|
||||
}
|
||||
});
|
||||
if (this.props.subject !== '') {
|
||||
// open the popup already on the form if passed Inappropriate content params
|
||||
this.openPopup(true);
|
||||
}
|
||||
}
|
||||
handleOpenWidget (e) {
|
||||
e.preventDefault();
|
||||
this.openPopup();
|
||||
}
|
||||
openPopup (formOpen) {
|
||||
if (typeof window.FreshworksWidget === 'function') {
|
||||
window.FreshworksWidget('prefill', 'ticketForm', {
|
||||
subject: this.props.subject,
|
||||
description: this.props.body,
|
||||
custom_fields: {
|
||||
cf_scratch_name: this.props.user.username
|
||||
}
|
||||
});
|
||||
if (formOpen) {
|
||||
window.FreshworksWidget('open', 'ticketForm');
|
||||
} else {
|
||||
window.FreshworksWidget('open');
|
||||
}
|
||||
}
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={this.handleOpenWidget}
|
||||
>
|
||||
{this.props.button ? (
|
||||
<Button className="gethelp-button">
|
||||
<FormattedMessage id="general.getHelp" />
|
||||
</Button>
|
||||
) : (<FormattedMessage id="general.getHelp" />)
|
||||
}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
HelpWidget.propTypes = {
|
||||
body: PropTypes.string,
|
||||
button: PropTypes.bool,
|
||||
intl: intlShape,
|
||||
subject: PropTypes.string,
|
||||
user: PropTypes.shape({
|
||||
classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
thumbnailUrl: PropTypes.string,
|
||||
username: PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
HelpWidget.defaultProps = {
|
||||
body: '',
|
||||
button: false,
|
||||
subject: '',
|
||||
user: {username: ''}
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: state.session.session.user
|
||||
});
|
||||
|
||||
const ConnectedHelpWidget = connect(mapStateToProps)(HelpWidget);
|
||||
module.exports = injectIntl(ConnectedHelpWidget);
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
"general.community": "Community",
|
||||
"general.confirmEmail": "Confirm Email",
|
||||
"general.contactUs": "Contact Us",
|
||||
"general.getHelp": "Get Help",
|
||||
"general.contact": "Contact",
|
||||
"general.done": "Done",
|
||||
"general.downloadPDF": "Download PDF",
|
||||
|
|
|
|||
|
|
@ -8,5 +8,6 @@ const flagInUrl = flag => {
|
|||
};
|
||||
|
||||
module.exports = {
|
||||
CHROME_APP_RELEASED: true
|
||||
CHROME_APP_RELEASED: true,
|
||||
CONTACT_US_POPUP: isStaging() && flagInUrl('CONTACT_US_POPUP')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@ const Page = require('../../components/page/www/page.jsx');
|
|||
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 InformationPage = require('../../components/informationpage/informationpage.jsx');
|
||||
require('./contact-us.scss');
|
||||
|
||||
class ContactUs extends React.Component {
|
||||
constructor (props) {
|
||||
|
|
@ -18,65 +21,123 @@ class ContactUs extends React.Component {
|
|||
body: ''
|
||||
};
|
||||
const query = window.location.search;
|
||||
// assumes that scratchr2 will only ever send one parameter
|
||||
let scratchId = '';
|
||||
// The subject is not localized because sending in English is easier for Scratch Team
|
||||
if (query.indexOf('studio=') !== -1) {
|
||||
this.state.subject = `Inappropriate content reported in studio ${query.split('=')[1]}`;
|
||||
this.state.body = `https://scratch.mit.edu/studios/${query.split('=')[1]}`;
|
||||
scratchId = query.match(/studio=([0-9]+)/)[1];
|
||||
this.state.subject = `Inappropriate content reported in studio ${scratchId}`;
|
||||
this.state.body = `https://scratch.mit.edu/studios/${scratchId}`;
|
||||
} else if (query.indexOf('profile=') !== -1) {
|
||||
this.state.subject = `Inappropriate content reported in profile ${query.split('=')[1]}`;
|
||||
this.state.body = `https://scratch.mit.edu/users/${query.split('=')[1]}`;
|
||||
scratchId = query.match(/profile=([a-zA-Z0-9-_]+)/)[1];
|
||||
this.state.subject = `Inappropriate content reported in profile ${scratchId}`;
|
||||
this.state.body = `https://scratch.mit.edu/users/${scratchId}`;
|
||||
} else if (query.indexOf('confirmation=') !== -1) {
|
||||
this.state.subject = 'Problem with email confirmation';
|
||||
}
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<InformationPage title={this.props.intl.formatMessage({id: 'contactUs.title'})}>
|
||||
<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>
|
||||
<InformationPage
|
||||
title={CONTACT_US_POPUP ?
|
||||
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>
|
||||
)}}
|
||||
/></li>
|
||||
<li><FormattedMessage
|
||||
id="contactUs.scriptsForum"
|
||||
values={{scriptsLink: (
|
||||
<a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></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">
|
||||
<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>
|
||||
)}}
|
||||
/></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>
|
||||
/></p>
|
||||
<h3>
|
||||
<FormattedMessage id="contactUs.askCommunity" />
|
||||
</h3>
|
||||
<p><FormattedMessage id="contactUs.forumsIntro" /></p>
|
||||
<p><FormattedMessage id="contactUs.forumsHelp" /></p>
|
||||
<ul>
|
||||
<li><a href="/discuss/4/"><FormattedMessage id="contactUs.questionsLinkText" /></a></li>
|
||||
<li><a href="/discuss/7/"><FormattedMessage id="contactUs.scriptsLinkText" /></a></li>
|
||||
<li><a href="/discuss/3/"><FormattedMessage id="contactUs.bugsLinkText" /></a></li>
|
||||
</ul>
|
||||
<h3>
|
||||
<FormattedMessage id="contactUs.needSupport" />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="contactUs.supportInfo"
|
||||
values={{helpLink: (
|
||||
<HelpWidget
|
||||
body={this.state.body}
|
||||
subject={this.state.subject}
|
||||
/>
|
||||
)}}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
<HelpWidget
|
||||
button
|
||||
body={this.state.body}
|
||||
subject={this.state.subject}
|
||||
/>
|
||||
</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>
|
||||
<HelpForm
|
||||
body={this.state.body}
|
||||
subject={this.state.subject}
|
||||
title={this.props.intl.formatMessage({id: 'contactUs.contactScratch'})}
|
||||
/>
|
||||
{!CONTACT_US_POPUP && (
|
||||
<HelpForm
|
||||
body={this.state.body}
|
||||
subject={this.state.subject}
|
||||
title={this.props.intl.formatMessage({id: 'contactUs.contactScratch'})}
|
||||
/>
|
||||
)}
|
||||
</InformationPage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
8
src/views/contact-us/contact-us.scss
Normal file
8
src/views/contact-us/contact-us.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
#contact-us.helpwidget {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.contact-us {
|
||||
.gethelp-button {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,5 +12,13 @@
|
|||
"contactUs.bugsLinkText":"Bugs and Glitches",
|
||||
"contactUs.formIntro":"If you still need to contact us, please fill out the form below with as much detail as you can. If you have any screenshots, attachments or links that help to explain your problem, please include them. We get a lot of mail, so we may not be able to respond to your message.",
|
||||
"contactUs.findHelp":"Where to find help:",
|
||||
"contactUs.contactScratch":"Contact the Scratch Team"
|
||||
"contactUs.contactScratch":"Contact the Scratch Team",
|
||||
"contactUs.qTitle":"Questions",
|
||||
"contactUs.seeFaq":"See the FAQ",
|
||||
"contactUs.faqInfo":"You can find a list of answers to many questions about Scratch on our {faqLink} page.",
|
||||
"contactUs.askCommunity":"Ask the Community",
|
||||
"contactUs.forumsIntro":"You can also look through and post questions in the Scratch Discussion forums.",
|
||||
"contactUs.forumsHelp":"There are many friendly and experienced Scratch community members who can help with the following topics and more:",
|
||||
"contactUs.needSupport":"Need Support?",
|
||||
"contactUs.supportInfo":"Click {helpLink} to type in a question about anything related to Scratch or to contact us. The Scratch Team receives lots of messages each day and is not able to answer each one individually, so we encourage you to read our online support articles and participate in the Discussion forums."
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue