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 */