#3817309 Add a new Woo-branded flow for connecting a Jetpack site

See paJDYF-Ei-p2 for more context and design of the actual flow.

The intention with this flow is to provide an exclusively Woo-branded flow for connecting a site to Jetpack. It will be used in combination with the jetpack-connection package bundled in the WooCommerce Payments, so when the user starts going through the flow he may have never read the word “Jetpack”. I’ve named the flow “Woo DNA”, because Woo + Jetpack DNA. I’m not very creative.

I’ve divided this PR into separate commits as best I could, so that’s the most sensible way tor review it.

In 4164b47, the “flow configuration” is added. Right now, WooCommerce Payments is the only Woo extension that will use it, but more plugins can use the Woo flow if they are added to that list.

To test:

Checkout this branch of wp-calypso and run it locally (yarn && yarn start, add 127.0.0.1 calypso.localhost to your /etc/hosts).

Add these constants to your local WordPress site:

define( 'WOOCOMMERCE_CALYPSO_ENVIRONMENT', 'development' );
define( 'JETPACK__SANDBOX_DOMAIN', 'yourtestblog.wordpress.com' );

yourtestblog.wordpress.com needs to be a WordPress.com site that has its DNS pointing to your wp.com sandbox. See here how I did it: pMz3w-bfP-p2

You’ll need to add yourtestblog.wordpress.com <YOUR_SANDBOX_IP to /etc/hosts. Alternatively, you can use my test blog so you don’t need to make a Systems Request. Ping me to give you my blog domain and IP address. This is not needed.

Follow the instructions in Automattic/woocommerce-payments#638 to start a Jetpack connection from WooCommerce Payments.

Hopefully, you’ll be redirected to calypso.localhost:3000/..., and the flow (behaviour, color scheme, text) will match exactly the designs on paJDYF-Ei-p2 . Ping me if you can’t get it up and running.

Note that all these PRs need to be merged first, as they have tweaks and refactors needed for this one to work: #41799 #41800 #41801 #41802 #41803 #41804 #41805

i18n

Here are all the new strings to translate. The Woocommerce logo one is the alt attribute of the Woo logo that’s in the header.