WooCommerce setup improvements

[ilyasfoo]

Changes proposed in this Pull Request

This PR does the following:

• Fix unintended timeout occurring between engine intervals by destroying the timeout after finding the plugin present.
• Increasing the plugin installation and activation time limit to 60 seconds.
• Add a new track calypso_woocommerce_setup_contact_support to better understand user behaviour after experiencing setup timeout or failure.

Testing instructions

1. Run calypso in your development environment.
2. Manually induce stalling:
   • Open up client/my-sites/woocommerce/dashboard/required-plugins-install-view.jsx
   • Search for this.props.installAndActivatePlugin( site.ID, plugin );.
   • Comment out the line and wait for calypso to rebuild.
3. Create a new business site.
4. Install Hello Dolly plugin to turn it into Atomic site.
5. Navigate to /woocommerce-installation/{your new site}.
6. Click on Set up my store!.
7. Wait for approximately 1 minute, and observe "contact support" screen appearing.
8. Open up developer console, type in localStorage.setItem( 'debug', 'calypso:analytics*' ) to debug tracks.
9. Click on "Get in touch"
10. Observe the track calypso_woocommerce_setup_contact_support is recorded in console containing reason: 'timeout'.

Related to #50833

[matticbot]

Test live: https://calypso.live/?branch=fix/woocommerce-setup-improvements

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~49 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
woocommerce-installation       +230 B  (+0.2%)      +49 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mattsherman]

Changes requested to only log the Tracks event when the "Get in touch" button is actually clicked!

[mattsherman]

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.

[ilyasfoo]

Ah, rookie mistake! Thanks for catching this

[mattsherman]

Same comment as above.

[ilyasfoo]

@mattsherman Thanks for reviewing and catching my mistake, I've addressed in c371e33

[mattsherman]

Nice work!