Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help: Rethink the way we render the HelpContactForm #1116

Merged
merged 2 commits into from
Dec 4, 2015
Merged

Help: Rethink the way we render the HelpContactForm #1116

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc09183
Use a single HelpContactForm component where the props are conditiona…
omarjackman Dec 1, 2015
73cd30c
Eliminate the different function calls for generating contact form pr…
omarjackman Dec 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 41 additions & 72 deletions client/me/help/help-contact/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } />;
Expand All @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a DOM manipulation for a global element, right? Just checking that we aren't attempting to change the component's state mid-render.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a DOM manipulation for a global element, right? Just checking that we aren't attempting to change the component's state mid-render.

Thats correct.


return this.getPublicForumsForm();
return <HelpContactForm { ...contactFormProps } />;
},

render: function() {
Expand Down