Connect Jetpack from shipping label modal

[c-shultz]

As part of the work to streamline new user onboarding, merchants should be able to connect Jetpack from the shipping modal on the order details screen:

For users with no known Jetpack account, they would get:

For users with a known Jetpack account, they can select it:

The big picture goal for this functionality is that merchants can install/activate WCS and Jetpack on a button press from WC core (the WC core design/flow is still being worked on though). After WCS and Jetpack are installed, the shipping modal gets launched and allows them to connect Jetpack before they print a label.

Here's a prototype for that flow: https://www.figma.com/proto/okUIuzENoQNGMX1e4ppC8x/Orders%E2%9A%94%EF%B8%8EWCShip?node-id=401%3A59158&viewport=312%2C972%2C0.0625&scaling=contain

[c-shultz]

There's going to be at least a couple hurdles to cross here:

• Getting the modal to appear before there is a connection. Currently WCS wants to be connected and have valid settings data before it will open the modal.
• Connecting to Jetpack within the modal: The in-place Jetpack connection may not be trivial. There's a PoC of that here: https://github.com/Automattic/client-example/pull/10 Can we adapt it for our purposes? I believe the filter used there was added to Jetpack recently, so this may require a new version of Jetpack to function

[harriswong]

TODO:

• Build the UI with no jetpack account using Wordpress components
• Build the UI with jetpack account using Wordpress components
• Remove WCS jetpack check https://github.com/Automattic/woocommerce-services/blob/develop/woocommerce-services.php#L457-L464
• Add WCS jetpack check under settings
• Explore "connect in place" jetpack so users can log in without leaving the page. Add automattic/jetpack-connection PHP package dependency. Update build script if we do this.
• How do we know if the user has a jetpack account or not? Should this be checked on React or pass in from PHP?
• "Changing to another jetpack account", creating new jetpack account", are there existing functionalities in WCS that we can leverage, or do we need to build new ones? Explore this.

[elizaan36]

As part of this investigation, and if all of the above is possible :), can we also look at how to tweak the styles and copy in the iframe?

[harriswong]

The client-example from https://github.com/Automattic/client-example can be seen working like this:

It found me and ask if i want to connect

If we click "switch account", it will pop up a new window:

[harriswong]

Before going further, look into whether or not users logged into WordPress.com will see the "approve" flow even if they’ve never connected Jetpack.

[harriswong]

In order to use WCS, the user need to install Jetpack and have it connected to WordPress.com.

By using jetpack-connection, we can have this automated except when the user is not already logged into wordpress.com. In this situation, a Jetpack branded window will popup asking the user to login. We want to prevent this popup. Currently there isn't an easy way to change this behaviour.

Blocked until we find a solution.

[c-shultz]

Thanks for updating here, @harriswong. I'll move this back to the backlog