Jetpack Connect: abstract an HoC that handles connection redirects for JP sites.

[AnnaMag]

Changes proposed in this Pull Request

• move the Jetpack connection functionality to an HoC avoid code duplication.

This is a preparation for the WP.com/JP Jetpack Search purchase integration
to handle non-Jetpack sites and move away from the jetpack/connect route. Purchasing a product for the Jetpack sites includes connection checks, shared with the Jetpack Connect Flow.

The change is substantial, so for ease of review, this PR avoids major re-writes e.g. introducing Redux. Any further improvements can be handled separately.

Testing instructions

Connection Flow should change for none of the Jetpack statuses.

• For any Jetpack plan, start the connection flow, e.g. /jetpack/connect/premium and verify that form copy, footer, input box, redirects are correct and functional, and that the flow leads to checkout. In order to verify that the plugin was correctly setup, to be tested with a Jetpack site that is unconnected, plugin deleted, or inactive.
• the flow starting at /jetpack/connect without plan specified should end at the canonical plans page.

[matticbot]

Test live: https://calypso.live/?branch=add/refactor-jp-connection

[matticbot]

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

Sections (~171 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect       +286 B  (+0.0%)     +171 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.

[gibrown]

Tested this a bit and everything I was (kinda randomly) testing seemed to work fine. Should we get a code review from someone in Jetpack on this refactor though?

[AnnaMag]

unrelated test failures after most recent rebase.

[mattgawarecki]

I ran through the connect flow several times. All the copy looks as I would expect, and I didn't notice anything broken. Going through flows for a specific plan ended up at checkout, and without a plan ended up at the Plans page.

I thoroughly reviewed the code as well, and other than one possible stray semi-colon in a render function, I think it's good to go. 👍