Merge pull request #1116 from Automattic/update/help-contact-form-props

Help: Rethink the way we render the HelpContactForm
Automattic · Dec 4, 2015 · 38809a0 · 38809a0
2 parents 923e00a + 73cd30c
commit 38809a0
Showing 1 changed file with 41 additions and 72 deletions.
diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx
@@ -227,76 +227,15 @@ module.exports = React.createClass( {
 		}
 	},
 
-	getKayakoTicketForm: function() {
-		const { isSubmitting, olark } = this.state;
-
-		if ( olark.details.isConversing ) {
-			// Hide the olark widget in the bottom right corner.
-			olarkActions.hideBox();
-		}
-
-		return (
-			<HelpContactForm
-				onSubmit={ this.submitKayakoTicket }
-				buttonLabel={ isSubmitting ? this.translate( 'Submitting support ticket' ) : this.translate( 'Submit support ticket' ) }
-				showHowCanWeHelpField={ true }
-				showHowYouFeelField={ true }
-				showSubjectField={ true }
-				showSiteField={ sites.get().length > 1 }
-				siteList={ sites }
-				siteFilter={ this.siteFilter }
-				disabled={ isSubmitting }/>
-		);
-	},
-
-	getChatForm: function() {
-		return (
-			<HelpContactForm
-				onSubmit={ this.startChat }
-				buttonLabel={ this.translate( 'Chat with us' ) }
-				showHowCanWeHelpField={ true }
-				showHowYouFeelField={ true }
-				showSiteField={ sites.get().length > 1 }
-				siteList={ sites }
-				siteFilter={ this.siteFilter }/>
-		);
-	},
-
-	siteFilter: function( site ) {
-		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, confirmation, sitesInitialized } = this.state;
+		const { olark, confirmation, sitesInitialized, isSubmitting } = this.state;
+		const showChatVariation = olark.isUserEligible && olark.isOperatorAvailable;
+		const showKayakoVariation = ! showChatVariation && ( olark.details.isConversing || olark.isUserEligible );
+		const showForumsVariation = ! ( showChatVariation || showKayakoVariation );
 
 		if ( confirmation ) {
 			return <HelpContactConfirmation { ...confirmation } />;
@@ -310,15 +249,45 @@ module.exports = React.createClass( {
 			return <OlarkChatbox />;
 		}
 
-		if ( olark.isUserEligible && olark.isOperatorAvailable ) {
-			return this.getChatForm();
-		}
+		const contactFormProps = Object.assign(
+			{
+				disabled: isSubmitting,
+				showSubjectField: showKayakoVariation || showForumsVariation,
+				showHowCanWeHelpField: showKayakoVariation || showChatVariation,
+				showHowYouFeelField: showKayakoVariation || showChatVariation,
+				showSiteField: ( showKayakoVariation || showChatVariation ) && ( sites.get().length > 1 ),
+				siteList: sites,
+				siteFilter: site => ( site.visible && ! site.jetpack )
+			},
+			showChatVariation && {
+				onSubmit: this.startChat,
+				buttonLabel: this.translate( 'Chat with us' )
+			},
+			showKayakoVariation && {
+				onSubmit: this.submitKayakoTicket,
+				buttonLabel: isSubmitting ? this.translate( 'Submitting support ticket' ) : this.translate( 'Submit support ticket' )
+			},
+			showForumsVariation && {
+				onSubmit: this.submitSupportForumsTopic,
+				buttonLabel: isSubmitting ? this.translate( 'Asking in the forums' ) : this.translate( 'Ask in the forums' ),
+				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 />
+						}
+					} )
+			}
+		);
 
-		if ( olark.isUserEligible || olark.details.isConversing ) {
-			return this.getKayakoTicketForm();
-		}
+		// Hide the olark widget in the bottom right corner.
+		olarkActions.hideBox();
 
-		return this.getPublicForumsForm();
+		return <HelpContactForm { ...contactFormProps } />;
 	},
 
 	render: function() {