mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-16 16:19:48 -05:00
Merge pull request #3800 from chrisgarrity/freshdesk-widget
Freshdesk widget
This commit is contained in:
chrisgarrity
GitHub
commit
5cd282ed56
7 changed files with 244 additions and 48 deletions
|
|
@ -7,8 +7,6 @@ const HelpForm = props => {
|
|||
const prefix = 'https://mitscratch.freshdesk.com/widgets/feedback_widget/new?&widgetType=embedded&widgetView=yes&screenshot=No&searchArea=No';
|
||||
const title = `formTitle=${props.title}`;
|
||||
const username = `helpdesk_ticket[custom_field][cf_scratch_name_40167]=${props.user.username || ''}`;
|
||||
const agentText = encodeURIComponent(window.navigator.userAgent);
|
||||
const browser = `helpdesk_ticket[custom_field][cf_browser_40167]=${agentText}`;
|
||||
const formSubject = `helpdesk_ticket[subject]=${props.subject}`;
|
||||
const formDescription = `helpdesk_ticket[description]=${props.body}`;
|
||||
return (
|
||||
|
|
@ -28,10 +26,10 @@ const HelpForm = props => {
|
|||
<iframe
|
||||
className="freshwidget-embedded-form"
|
||||
frameBorder="0"
|
||||
height="744px"
|
||||
height="594px"
|
||||
id="freshwidget-embedded-form"
|
||||
scrolling="no"
|
||||
src={`${prefix}&${title}&${username}&${browser}&${formSubject}&${formDescription}`}
|
||||
src={`${prefix}&${title}&${username}&${formSubject}&${formDescription}`}
|
||||
title={<FormattedMessage id="contactUs.questionsForum" />}
|
||||
width="100%"
|
||||
/>
|
||||
|
|
|
|||
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();
|
||||
|
||||
window.fwSettings = {
|
||||
widget_id: 4000000089,
|
||||
locale: this.props.intl.locale
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
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