Add WooCommerce onboarding connection track events and stop auto authorization for the new onboarding flow

[justinshreve]

This PR adds some WooCommerce Onboarding connection track events to the WooCommerce onboarding connection flow (see #34414 and p6riRB-4rG-p2 forbackground). Note that these events are only fired in this context, and not during normal Jetpack onboarding.

It also adds a few additional missing styles to the connection page, and stops auth authorization from happening for the new WooCommerce flow.

See p1560449057014200-slack-wc-onboarding for background on the events.

Branched from #34380.

Testing instructions

• npm run test-client to make sure all tests pass.

--

If you have WooCommerce / WooCommerce Admin Installed:

• Enable the onboarding flow in WooCommerce Admin and to tell it to point at local Calypso.
  • Start WooCommerce in development (not plugin) mode
  • Define the following constant in your wp-config.php or a plugin file: define( 'WOOCOMMERCE_CALYPSO_LOCAL', true );.
  • Make a POST request to /wp-json/wc-admin/v1/onboarding/profile on your local site, setting skipped and completed to false.
• Visit /wp-admin/admin.php?page=wc-admin on your local site, and the onboarding wizard should be displayed.
• Click Get Started, and then Activate & Continue.

If you don't want to install WooCommerce / WooCommerce Admin:

• Disconnect Jetpack from your site

• Click “Setup Jetpack”.

• On the connection/authorization screen ( https://wordpress.com/jetpack/connect/authorize?client_id= ….. ) copy and paste the whole URL.

• Replace https://wordpress.com with http://calypso.localhost:3000 and replace the from parameter in the URL (it may be something like connection-banner or landing-page-bottom) with from=woocommerce-setup-wizard . See Pastebin 213d5 or ping me if you have issues.

• Paste localStorage.setItem( 'debug', 'calypso:analytics*' ); in your console.

• Test login and signup to see that events are firing.

You may run into an issue testing logged out, if your store email matches a WPCOM account. D30046-code will help with this.

[matticbot]

Test live: https://calypso.live/?branch=add/woocommerce-connect-tracks

[matticbot]

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

App Entrypoints (~49 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main       +146 B  (+0.0%)      +49 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~544 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect      +1146 B  (+0.2%)     +260 B  (+0.2%)
accept-invite         +456 B  (+0.3%)     +155 B  (+0.4%)
login                 +442 B  (+0.3%)     +129 B  (+0.4%)

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

Async-loaded Components (~272 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-signup-steps-user       +456 B  (+0.5%)     +155 B  (+0.7%)
async-load-design-blocks           +442 B  (+0.0%)     +117 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[timmyc]

I tested out the flow with a jurassic.ninja site and can verify the tracks events were being fired 👍