From fc09183ccb78ab62bb5a69e5e514b70ec0e91413 Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Tue, 1 Dec 2015 11:05:29 -0500 Subject: [PATCH 1/2] Use a single HelpContactForm component where the props are conditionalized rather than duplicating its use in multiple functions. --- client/me/help/help-contact/index.jsx | 82 +++++++++++++-------------- 1 file changed, 39 insertions(+), 43 deletions(-) diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx index bea7210e2f9637..ef14d4b308d9cb 100644 --- a/client/me/help/help-contact/index.jsx +++ b/client/me/help/help-contact/index.jsx @@ -227,46 +227,39 @@ module.exports = React.createClass( { } }, - getKayakoTicketForm: function() { - const { isSubmitting, olark } = this.state; + getKayakoFormProperties: function() { + const { isSubmitting } = this.state; - if ( olark.details.isConversing ) { - // Hide the olark widget in the bottom right corner. - olarkActions.hideBox(); + return { + 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 } - - return ( - 1 } - siteList={ sites } - siteFilter={ this.siteFilter } - disabled={ isSubmitting }/> - ); }, - getChatForm: function() { - return ( - 1 } - siteList={ sites } - siteFilter={ this.siteFilter }/> - ); + getChatFormProperties: function() { + return { + 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() { + getPublicForumsFormProperties: function() { const { isSubmitting } = this.state; const formDescription = this.translate( 'Post a new question in our {{strong}}public forums{{/strong}}, ' + @@ -281,14 +274,13 @@ module.exports = React.createClass( { } ); - return ( - - ); + return { + onSubmit: this.submitSupportForumsTopic, + formDescription: formDescription, + buttonLabel: isSubmitting ? this.translate( 'Asking in the forums' ) : this.translate( 'Ask in the forums' ), + showSubjectField: true, + disabled: isSubmitting + }; }, /** @@ -296,6 +288,7 @@ module.exports = React.createClass( { * @return {object} A JSX object that should be rendered */ getView: function() { + var contactFormProps; const { olark, confirmation, sitesInitialized } = this.state; if ( confirmation ) { @@ -311,14 +304,17 @@ module.exports = React.createClass( { } if ( olark.isUserEligible && olark.isOperatorAvailable ) { - return this.getChatForm(); + contactFormProps = this.getChatFormProperties(); + } else if ( olark.isUserEligible || olark.details.isConversing ) { + contactFormProps = this.getKayakoFormProperties(); + } else { + contactFormProps = this.getPublicForumsFormProperties(); } - 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() { From 73cd30c4d2dbe2681da058c199a393219acb3913 Mon Sep 17 00:00:00 2001 From: Omar Jackman Date: Wed, 2 Dec 2015 20:32:43 -0500 Subject: [PATCH 2/2] Eliminate the different function calls for generating contact form properties so that we can avoid duplication. We'll now use a single object to hold the properties for the different variations of the help contact form. --- client/me/help/help-contact/index.jsx | 103 ++++++++++---------------- 1 file changed, 38 insertions(+), 65 deletions(-) diff --git a/client/me/help/help-contact/index.jsx b/client/me/help/help-contact/index.jsx index ef14d4b308d9cb..823555fa65b226 100644 --- a/client/me/help/help-contact/index.jsx +++ b/client/me/help/help-contact/index.jsx @@ -227,69 +227,15 @@ module.exports = React.createClass( { } }, - getKayakoFormProperties: function() { - const { isSubmitting } = this.state; - - return { - 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 - } - }, - - getChatFormProperties: function() { - return { - 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; - }, - - getPublicForumsFormProperties: 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 { - 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() { - var contactFormProps; - 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 ; @@ -303,13 +249,40 @@ module.exports = React.createClass( { return ; } - if ( olark.isUserEligible && olark.isOperatorAvailable ) { - contactFormProps = this.getChatFormProperties(); - } else if ( olark.isUserEligible || olark.details.isConversing ) { - contactFormProps = this.getKayakoFormProperties(); - } else { - contactFormProps = this.getPublicForumsFormProperties(); - } + 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: + } + } ) + } + ); // Hide the olark widget in the bottom right corner. olarkActions.hideBox();