From 289dad1d5d31df68229e828ad43a532d800bde34 Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Wed, 7 Oct 2015 19:32:28 -0400 Subject: [PATCH 1/4] Create the unpaid contact form. Allow unpaid users to create support tickets on the support forums --- client/me/help/help-contact-form/index.jsx | 8 ++- client/me/help/help-contact/index.jsx | 66 ++++++++++++++++--- .../wpcom-undocumented/lib/undocumented.js | 7 ++ 3 files changed, 72 insertions(+), 9 deletions(-) diff --git a/client/me/help/help-contact-form/index.jsx b/client/me/help/help-contact-form/index.jsx index 431a8b2bed2d4..6eecaf08c710a 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, @@ -150,10 +152,14 @@ 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 (
+ { formDescription ? ( +

{ formDescription }

+ ) : null } + { showHowCanWeHelpField ? (
{ this.translate( 'How can we help?' ) } diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx index 8c4a45f6661f2..6f9b1911728ca 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,34 @@ 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 +256,35 @@ 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 +295,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 */ From 2ca38c023489d1db72f25e59e1f9e3bbeac0c122 Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Tue, 1 Dec 2015 11:40:24 -0500 Subject: [PATCH 2/4] Use the UTF-8 ellipsis character instead of three periods. --- client/me/help/help-contact-form/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/me/help/help-contact-form/index.jsx b/client/me/help/help-contact-form/index.jsx index 6eecaf08c710a..8775efe4a5297 100644 --- a/client/me/help/help-contact-form/index.jsx +++ b/client/me/help/help-contact-form/index.jsx @@ -139,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" ) }, From 5aa1f4604f404294e2a2d1dafd5bd76479f1ef6e Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Tue, 1 Dec 2015 11:41:47 -0500 Subject: [PATCH 3/4] Tidy up the output of the conditional elements on the HelpContactForm --- client/me/help/help-contact-form/index.jsx | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/client/me/help/help-contact-form/index.jsx b/client/me/help/help-contact-form/index.jsx index 8775efe4a5297..a21d5e2c4a343 100644 --- a/client/me/help/help-contact-form/index.jsx +++ b/client/me/help/help-contact-form/index.jsx @@ -156,25 +156,23 @@ module.exports = React.createClass( { return (
- { formDescription ? ( -

{ formDescription }

- ) : null } + { formDescription && (

{ formDescription }

) } - { showHowCanWeHelpField ? ( + { 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?' ) } From dfa333fd5597887a3c2d8b289b53ac7f1b68600d Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Tue, 1 Dec 2015 11:49:13 -0500 Subject: [PATCH 4/4] Split translated strings into multiple lines --- client/me/help/help-contact/index.jsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx index 6f9b1911728ca..bea7210e2f963 100644 --- a/client/me/help/help-contact/index.jsx +++ b/client/me/help/help-contact/index.jsx @@ -124,8 +124,10 @@ module.exports = React.createClass( { this.setState( { isSubmitting: false, 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." ) + 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.' ) } } ); } ); @@ -149,7 +151,15 @@ module.exports = React.createClass( { isSubmitting: false, confirmation: { title: this.translate( 'Got it!' ), - message: this.translate( 'Your message has been submitted to our {{a}}community forums{{/a}}', { components: { a: } } ) + message: this.translate( + 'Your message has been submitted to our ' + + '{{a}}community forums{{/a}}', + { + components: { + a: + } + } + ) } } ); } ); @@ -258,7 +268,12 @@ module.exports = React.createClass( { 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.', + 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: