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

Jump to bottom

WooCommerce setup improvements #51932

Merged
merged 4 commits into from
Apr 16, 2021
Merged

WooCommerce setup improvements #51932

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5a91262
Fix where timeout occurs between engine intervals
ilyasfoo Apr 14, 2021
e3327a8
Increase plugin install timeout to 60 seconds
ilyasfoo Apr 14, 2021
0e44e7d
Add track for contacting support
ilyasfoo Apr 14, 2021
c371e33
Fix function reference onclick
ilyasfoo Apr 15, 2021
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
32 changes: 28 additions & 4 deletions client/my-sites/woocommerce/dashboard/required-plugins-install-view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ const TIME_TO_TRANSFER_ACTIVE = 5;
const TIME_TO_TRANSFER_UPLOADING = 5;
const TIME_TO_TRANSFER_BACKFILLING = 25;
const TIME_TO_TRANSFER_COMPLETE = 6;
const TIME_TO_PLUGIN_INSTALLATION = 30;
const TIME_TO_PLUGIN_ACTIVATION = 30;
const TIME_TO_PLUGIN_INSTALLATION = 60;
const TIME_TO_PLUGIN_ACTIVATION = 60;

const transferStatusesToTimes = {};

Expand Down Expand Up @@ -214,6 +214,17 @@ class RequiredPluginsInstallView extends Component {
this.timeoutTimer = window.setTimeout( this.timeoutElapsed, durationInSeconds * 1000 );
};

/**
* Sends a track for user contacting support.
*
* @param {string} reason Reason on why user would contact. Values can be 'failure' or 'timeout'.
*/
trackContactSupport = ( reason ) => {
recordTrack( 'calypso_woocommerce_setup_contact_support', {
reason,
} );
};

doInitialization = () => {
const { fixMode, site, sitePlugins, wporgPlugins } = this.props;
const { workingOn } = this.state;
Expand Down Expand Up @@ -348,6 +359,7 @@ class RequiredPluginsInstallView extends Component {
// Otherwise, if we are working on something presently, see if it has appeared in state yet
const pluginFound = find( sitePlugins, { slug: this.state.workingOn } );
if ( pluginFound ) {
this.destroyTimeoutTimer();
this.setState( {
workingOn: '',
progress: this.state.progress + this.getPluginInstallationTime(),
Expand Down Expand Up @@ -535,7 +547,13 @@ class RequiredPluginsInstallView extends Component {
title={ translate( "We can't update your store" ) }
subtitle={ subtitle }
>
<Button primary href={ CALYPSO_CONTACT } target="_blank" rel="noopener noreferrer">
<Button
onClick={ this.trackContactSupport( 'failure' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

This calls trackContactSupport() immediately when the contact support message is rendered.

What you want is something like...

onClick={ () => { this.trackContactSupport( 'failure' ) } }

or

onClick={ this.trackContactSupport.bind( this, 'failure' ) }

They both create a new function every time the message is rendered. I'd go with the anonymous arrow function, since I think it is more readable and familiar to newer JS devs.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah, rookie mistake! Thanks for catching this

primary
href={ CALYPSO_CONTACT }
target="_blank"
rel="noopener noreferrer"
>
{ this.props.translate( 'Get in touch' ) }
</Button>
</SetupHeader>
Expand All @@ -562,7 +580,13 @@ class RequiredPluginsInstallView extends Component {
title={ translate( 'We were unable to set up your store.' ) }
subtitle={ subtitle }
>
<Button primary href={ CALYPSO_CONTACT } target="_blank" rel="noopener noreferrer">
<Button
onClick={ this.trackContactSupport( 'timeout' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

Same comment as above.

primary
href={ CALYPSO_CONTACT }
target="_blank"
rel="noopener noreferrer"
>
{ translate( 'Get in touch' ) }
</Button>
</SetupHeader>
Expand Down