diff --git a/client/me/help/help-contact-form/index.jsx b/client/me/help/help-contact-form/index.jsx
index 431a8b2bed2d4..a21d5e2c4a343 100644
--- a/client/me/help/help-contact-form/index.jsx
+++ b/client/me/help/help-contact-form/index.jsx
@@ -22,6 +22,7 @@ module.exports = React.createClass( {
mixins: [ React.addons.LinkedStateMixin, React.addons.PureRenderMixin ],
propTypes: {
+ formDescription: React.PropTypes.node,
buttonLabel: React.PropTypes.string.isRequired,
onSubmit: React.PropTypes.func.isRequired,
showHowCanWeHelpField: React.PropTypes.bool,
@@ -35,6 +36,7 @@ module.exports = React.createClass( {
getDefaultProps: function() {
return {
+ formDescription: '',
showHowCanWeHelpField: false,
showHowYouFeelField: false,
showSubjectField: false,
@@ -137,9 +139,9 @@ module.exports = React.createClass( {
*/
render: function() {
var howCanWeHelpOptions = [
- { value: 'gettingStarted', label: this.translate( 'Help getting started' ), subtext: this.translate( 'Can you show me how to...' ) },
- { value: 'somethingBroken', label: this.translate( 'Something is broken' ), subtext: this.translate( 'Can you check this out...' ) },
- { value: 'suggestion', label: this.translate( 'I have a suggestion' ), subtext: this.translate( 'I think it would be cool if...' ) }
+ { value: 'gettingStarted', label: this.translate( 'Help getting started' ), subtext: this.translate( 'Can you show me how to…' ) },
+ { value: 'somethingBroken', label: this.translate( 'Something is broken' ), subtext: this.translate( 'Can you check this out…' ) },
+ { value: 'suggestion', label: this.translate( 'I have a suggestion' ), subtext: this.translate( 'I think it would be cool if…' ) }
],
howYouFeelOptions = [
{ value: 'unspecified', label: this.translate( "I'd rather not" ) },
@@ -150,25 +152,27 @@ module.exports = React.createClass( {
{ value: 'panicked', label: this.translate( 'Panicked' ) }
];
- const { buttonLabel, showHowCanWeHelpField, showHowYouFeelField, showSubjectField, showSiteField, siteList, siteFilter } = this.props;
+ const { formDescription, buttonLabel, showHowCanWeHelpField, showHowYouFeelField, showSubjectField, showSiteField, siteList, siteFilter } = this.props;
return (
- { showHowCanWeHelpField ? (
+ { formDescription && (
{ formDescription }
) }
+
+ { showHowCanWeHelpField && (
{ this.translate( 'How can we help?' ) }
{ this.renderFormSelection( 'howCanWeHelp', howCanWeHelpOptions ) }
- ) : null }
+ ) }
- { showHowYouFeelField ? (
+ { showHowYouFeelField && (
{ this.translate( 'Mind sharing how you feel?' ) }
{ this.renderFormSelection( 'howYouFeel', howYouFeelOptions ) }
- ) : null }
+ ) }
- { showSiteField ? (
+ { showSiteField && (
{ this.translate( 'Which site do you need help with?' ) }
- ) : null }
+ ) }
- { showSubjectField ? (
+ { showSubjectField && (
{ this.translate( 'Subject' ) }
- ) : null }
+ ) }
{ this.translate( 'What are you trying to do?' ) }
diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx
index 8c4a45f6661f2..bea7210e2f963 100644
--- a/client/me/help/help-contact/index.jsx
+++ b/client/me/help/help-contact/index.jsx
@@ -27,7 +27,6 @@ const noticeOptions = {
duration: 10000,
showDismiss: false
};
-
const wpcom = wpcomLib.undocumented();
const sites = siteList();
@@ -68,7 +67,7 @@ module.exports = React.createClass( {
return {
olark: olarkStore.get(),
isSubmitting: false,
- confirmationMessage: null,
+ confirmation: null,
sitesInitialized: sites.initialized
};
},
@@ -124,7 +123,44 @@ module.exports = React.createClass( {
this.setState( {
isSubmitting: false,
- confirmationMessage: this.translate( "We've received your message, and you'll hear back from one of our Happiness Engineers shortly." )
+ confirmation: {
+ title: this.translate( 'We\'re on it!' ),
+ message: this.translate(
+ 'We\'ve received your message, and you\'ll hear back from ' +
+ 'one of our Happiness Engineers shortly.' )
+ }
+ } );
+ } );
+ },
+
+ submitSupportForumsTopic: function( contactForm ) {
+ const { subject, message } = contactForm;
+
+ this.setState( { isSubmitting: true } );
+
+ wpcom.submitSupportForumsTopic( subject, message, ( error, data ) => {
+ if ( error ) {
+ // TODO: bump a stat here
+ notices.error( error.message );
+
+ this.setState( { isSubmitting: false } );
+ return;
+ }
+
+ this.setState( {
+ isSubmitting: false,
+ confirmation: {
+ title: this.translate( 'Got it!' ),
+ message: this.translate(
+ 'Your message has been submitted to our ' +
+ '{{a}}community forums{{/a}}',
+ {
+ components: {
+ a:
+ }
+ }
+ )
+ }
} );
} );
},
@@ -230,15 +266,40 @@ module.exports = React.createClass( {
return site.visible && ! site.jetpack;
},
+ getPublicForumsForm: function() {
+ const { isSubmitting } = this.state;
+ const formDescription = this.translate(
+ 'Post a new question in our {{strong}}public forums{{/strong}}, ' +
+ 'where it may be answered by helpful community members, ' +
+ 'by submitting the form below. ' +
+ '{{strong}}Please do not{{/strong}} provide financial or ' +
+ 'contact information when submitting this form.',
+ {
+ components: {
+ strong:
+ }
+ }
+ );
+
+ return (
+
+ );
+ },
+
/**
* Get the view for the contact page. This could either be the olark chat widget if a chat is in progress or a contact form.
* @return {object} A JSX object that should be rendered
*/
getView: function() {
- const { olark, confirmationMessage, sitesInitialized } = this.state;
+ const { olark, confirmation, sitesInitialized } = this.state;
- if ( confirmationMessage ) {
- return
;
+ if ( confirmation ) {
+ return
;
}
if ( ! ( olark.isOlarkReady && sitesInitialized ) ) {
@@ -249,11 +310,15 @@ module.exports = React.createClass( {
return
;
}
- if ( olark.isOperatorAvailable ) {
+ if ( olark.isUserEligible && olark.isOperatorAvailable ) {
return this.getChatForm();
}
- return this.getKayakoTicketForm();
+ if ( olark.isUserEligible || olark.details.isConversing ) {
+ return this.getKayakoTicketForm();
+ }
+
+ return this.getPublicForumsForm();
},
render: function() {
diff --git a/shared/lib/wpcom-undocumented/lib/undocumented.js b/shared/lib/wpcom-undocumented/lib/undocumented.js
index c204221600d02..26b7509a694d4 100644
--- a/shared/lib/wpcom-undocumented/lib/undocumented.js
+++ b/shared/lib/wpcom-undocumented/lib/undocumented.js
@@ -1763,6 +1763,13 @@ Undocumented.prototype.getOlarkConfiguration = function( fn ) {
}, fn );
};
+Undocumented.prototype.submitSupportForumsTopic = function( subject, message, fn ) {
+ this.wpcom.req.post( {
+ path: '/help/forums/support/topics/new',
+ body: { subject, message }
+ }, fn );
+};
+
/**
* Expose `Undocumented` module
*/