diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx index bea7210e2f963..823555fa65b22 100644 --- 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 ( - 1 } - siteList={ sites } - siteFilter={ this.siteFilter } - disabled={ isSubmitting }/> - ); - }, - - getChatForm: function() { - return ( - 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: - } - } - ); - - 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, 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 ; @@ -310,15 +249,45 @@ module.exports = React.createClass( { return ; } - 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: + } + } ) + } + ); - if ( olark.isUserEligible || olark.details.isConversing ) { - return this.getKayakoTicketForm(); - } + // Hide the olark widget in the bottom right corner. + olarkActions.hideBox(); - return this.getPublicForumsForm(); + return ; }, render: function() {