Merge pull request #1085 from Automattic/update/unpaid-help-contact

Help: Handle chat ineligible users with the support forums
Automattic · Dec 3, 2015 · 87a2855 · 87a2855
2 parents 855fc89 + dfa333f
commit 87a2855
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 20 deletions.
diff --git 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 (
 			<div className="help-contact-form">
-				{ showHowCanWeHelpField ? (
+				{ formDescription && ( <p>{ formDescription }</p> ) }
+
+				{ showHowCanWeHelpField && (
 					<div>
 						<FormLabel>{ this.translate( 'How can we help?' ) }</FormLabel>
 						{ this.renderFormSelection( 'howCanWeHelp', howCanWeHelpOptions ) }
 					</div>
-				) : null }
+				) }
 
-				{ showHowYouFeelField ? (
+				{ showHowYouFeelField && (
 					<div>
 						<FormLabel>{ this.translate( 'Mind sharing how you feel?' ) }</FormLabel>
 						{ this.renderFormSelection( 'howYouFeel', howYouFeelOptions ) }
 					</div>
-				) : null }
+				) }
 
-				{ showSiteField ? (
+				{ showSiteField && (
 					<div>
 						<FormLabel>{ this.translate( 'Which site do you need help with?' ) }</FormLabel>
 						<SelectSite
@@ -178,14 +182,14 @@ module.exports = React.createClass( {
 							value={ this.state.site.ID }
 							onChange={ this.setSite } />
 					</div>
-				) : null }
+				) }
 
-				{ showSubjectField ? (
+				{ showSubjectField && (
 					<div className="help-contact-form__subject">
 						<FormLabel>{ this.translate( 'Subject' ) }</FormLabel>
 						<FormTextInput valueLink={ this.linkState( 'subject' ) } />
 					</div>
-				) : null }
+				) }
 
 				<FormLabel>{ this.translate( 'What are you trying to do?' ) }</FormLabel>
 				<FormTextarea valueLink={ this.linkState( 'message' ) } placeholder={ this.translate( 'Please be descriptive' ) }></FormTextarea>

diff --git 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: <a href={ data.topic_URL } />
+							}
+						}
+					)
+				}
 			} );
 		} );
 	},
@@ -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: <strong />
+				}
+			}
+		);
+
+		return (
+			<HelpContactForm
+				onSubmit={ this.submitSupportForumsTopic }
+				formDescription={ formDescription }
+				buttonLabel={ isSubmitting ? this.translate( 'Asking in the forums' ) : this.translate( 'Ask in the forums' ) }
+				showSubjectField={ true }
+				disabled={ isSubmitting }/>
+		);
+	},
+
 	/**
 	 * 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 <HelpContactConfirmation title={ this.translate( "We're on it!" ) } message={ confirmationMessage }/>;
+		if ( confirmation ) {
+			return <HelpContactConfirmation { ...confirmation } />;
 		}
 
 		if ( ! ( olark.isOlarkReady && sitesInitialized ) ) {
@@ -249,11 +310,15 @@ module.exports = React.createClass( {
 			return <OlarkChatbox />;
 		}
 
-		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
@@ -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
  */