Refactor Jetpack connection flows (https://github.com/woocommerce/woocommerce-admin/pull/4655)

* Resolve Jetpack connection URL on benefits screen

* Resolve Jetpack connection URL in connection stats

* Fix up error handling for Jetpack connection flows

* Remove autoConnect option from Connect component

plugins/woocommerce-admin/client/dashboard/components/connect/index.js

@@ -24,21 +24,11 @@ class Connect extends Component {
 		props.setIsPending( true );
 	}
 
-	componentDidMount() {
-		const { autoConnect, jetpackConnectUrl } = this.props;
-
-		if ( autoConnect && jetpackConnectUrl ) {
-			this.connectJetpack();
-		}
-	}
-
 	componentDidUpdate( prevProps ) {
 		const {
-			autoConnect,
 			createNotice,
 			error,
 			isRequesting,
-			jetpackConnectUrl,
 			onError,
 			setIsPending,
 		} = this.props;
@@ -53,37 +43,26 @@ class Connect extends Component {
 			}
 			createNotice( 'error', error );
 		}
-
-		if ( autoConnect && jetpackConnectUrl ) {
-			this.connectJetpack();
-		}
 	}
 
 	async connectJetpack() {
 		const { jetpackConnectUrl, onConnect } = this.props;
 
-		this.setState( {
-			isConnecting: true,
-		}, () => {
-			if ( onConnect ) {
-				onConnect();
+		this.setState(
+			{
+				isConnecting: true,
+			},
+			() => {
+				if ( onConnect ) {
+					onConnect();
+				}
+				window.location = jetpackConnectUrl;
 			}
-			window.location = jetpackConnectUrl;
-		} );
+		);
 	}
 
 	render() {
-		const {
-			autoConnect,
-			hasErrors,
-			isRequesting,
-			onSkip,
-			skipText,
-		} = this.props;
-
-		if ( autoConnect ) {
-			return null;
-		}
+		const { hasErrors, isRequesting, onSkip, skipText } = this.props;
 
 		return (
 			<Fragment>
@@ -115,10 +94,6 @@ class Connect extends Component {
 }
 
 Connect.propTypes = {
-	/**
-	 * If connection should happen automatically, or requires user confirmation.
-	 */
-	autoConnect: PropTypes.bool,
 	/**
 	 * Method to create a displayed notice.
 	 */
@@ -166,7 +141,6 @@ Connect.propTypes = {
 };
 
 Connect.defaultProps = {
-	autoConnect: false,
 	setIsPending: () => {},
 };
 

plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js

@@ -6,7 +6,11 @@ import { compose } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withDispatch, withSelect } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+	__experimentalResolveSelect,
+} from '@wordpress/data';
 
 /**
  * WooCommerce dependencies
@@ -18,19 +22,20 @@ import { PLUGINS_STORE_NAME, useUserPreferences } from '@woocommerce/data';
 /**
  * Internal dependencies
  */
-import Connect from 'dashboard/components/connect';
 import { recordEvent } from 'lib/tracks';
 import { createNoticesFromResponse } from 'lib/notices';
 
 function InstallJetpackCta( {
+	getJetpackConnectUrl,
+	getPluginsError,
 	isJetpackInstalled,
 	isJetpackActivated,
 	isJetpackConnected,
 	installAndActivatePlugins,
+	isConnecting,
 	isInstalling,
 } ) {
 	const { updateUserPreferences, ...userPrefs } = useUserPreferences();
-	const [ isConnecting, setIsConnecting ] = useState( false );
 	const [ isDismissed, setIsDismissed ] = useState(
 		( userPrefs.homepage_stats || {} ).installJetpackDismissed
 	);
@@ -39,14 +44,29 @@ function InstallJetpackCta( {
 		recordEvent( 'statsoverview_install_jetpack' );
 
 		installAndActivatePlugins( [ 'jetpack' ] )
-			.then( () => {
-				setIsConnecting( ! isJetpackConnected );
-			} )
+			.then( connect )
 			.catch( ( error ) => {
 				createNoticesFromResponse( error );
 			} );
 	}
 
+	function connect() {
+		if ( isJetpackConnected ) {
+			return;
+		}
+
+		getJetpackConnectUrl( {
+			redirect_url: getAdminLink( 'admin.php?page=wc-admin' ),
+		} ).then( ( url ) => {
+			const error = getPluginsError( 'getJetpackConnectUrl' );
+			if ( error ) {
+				createNoticesFromResponse( error );
+				return;
+			}
+			window.location = url;
+		} );
+	}
+
 	function dismiss() {
 		if ( isInstalling || isConnecting ) {
 			return;
@@ -62,16 +82,6 @@ function InstallJetpackCta( {
 		recordEvent( 'statsoverview_dismiss_install_jetpack' );
 	}
 
-	function getConnector() {
-		return (
-			<Connect
-				autoConnect
-				onError={ () => setIsConnecting( false ) }
-				redirectUrl={ getAdminLink( 'admin.php?page=wc-admin' ) }
-			/>
-		);
-	}
-
 	const doNotShow =
 		isDismissed ||
 		( isJetpackInstalled && isJetpackActivated && isJetpackConnected );
@@ -121,8 +131,6 @@ function InstallJetpackCta( {
 					{ __( 'No thanks', 'woocommerce-admin' ) }
 				</Button>
 			</footer>
-
-			{ isConnecting && getConnector() }
 		</article>
 	);
 }
@@ -139,11 +147,17 @@ export default compose(
 		const {
 			isJetpackConnected,
 			isPluginsRequesting,
-			getInstalledPlugins,
 			getActivePlugins,
+			getInstalledPlugins,
+			getPluginsError,
 		} = select( PLUGINS_STORE_NAME );
 
 		return {
+			getJetpackConnectUrl: __experimentalResolveSelect(
+				PLUGINS_STORE_NAME
+			).getJetpackConnectUrl,
+			getPluginsError,
+			isConnecting: isPluginsRequesting( 'getJetpackConnectUrl' ),
 			isInstalling:
 				isPluginsRequesting( 'installPlugins' ) ||
 				isPluginsRequesting( 'activatePlugins' ),

plugins/woocommerce-admin/client/profile-wizard/steps/benefits/index.js

@@ -5,7 +5,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+	__experimentalResolveSelect,
+} from '@wordpress/data';
 import { filter } from 'lodash';
 
 /**
@@ -23,7 +27,6 @@ import {
 /**
  * Internal dependencies
  */
-import Connect from 'dashboard/components/connect';
 import { createNoticesFromResponse } from 'lib/notices';
 import Logo from './logo';
 import ManagementIcon from './images/management';
@@ -85,12 +88,11 @@ class Benefits extends Component {
 		goToNextStep();
 	}
 
-	async startPluginInstall() {
+	startPluginInstall() {
 		const {
 			createNotice,
 			goToNextStep,
 			installAndActivatePlugins,
-			isJetpackConnected,
 			updateProfileItems,
 			updateOptions,
 		} = this.props;
@@ -101,30 +103,56 @@ class Benefits extends Component {
 			plugins,
 		} );
 
-		await Promise.all( [
+		Promise.all( [
 			installAndActivatePlugins( this.pluginsToInstall ),
 			updateProfileItems( { plugins } ),
 			updateOptions( {
 				woocommerce_setup_jetpack_opted_in: true,
 			} ),
-		] ).catch( ( pluginError, profileError ) => {
-			if ( pluginError ) {
-				createNoticesFromResponse( pluginError );
-			}
-			if ( profileError ) {
-				createNotice(
-					'error',
-					__(
-						'There was a problem updating your preferences.',
-						'woocommerce-admin'
-					)
-				);
-			}
-		} );
+		] )
+			.then( () => this.connectJetpack() )
+			.catch( ( pluginError, profileError ) => {
+				if ( pluginError ) {
+					createNoticesFromResponse( pluginError );
+				}
+				if ( profileError ) {
+					createNotice(
+						'error',
+						__(
+							'There was a problem updating your preferences.',
+							'woocommerce-admin'
+						)
+					);
+				}
+				goToNextStep();
+			} );
+	}
 
+	connectJetpack() {
+		const {
+			getJetpackConnectUrl,
+			getPluginsError,
+			goToNextStep,
+			isJetpackConnected,
+		} = this.props;
 		if ( isJetpackConnected ) {
 			goToNextStep();
+			return;
 		}
+
+		getJetpackConnectUrl( {
+			redirect_url: getAdminLink(
+				'admin.php?page=wc-admin&reset_profiler=0'
+			),
+		} ).then( ( url ) => {
+			const error = getPluginsError( 'getJetpackConnectUrl' );
+			if ( error ) {
+				createNoticesFromResponse( error );
+				goToNextStep();
+				return;
+			}
+			window.location = url;
+		} );
 	}
 
 	renderBenefit( benefit ) {
@@ -204,8 +232,6 @@ class Benefits extends Component {
 	render() {
 		const {
 			activePlugins,
-			goToNextStep,
-			isJetpackConnected,
 			isInstallingActivating,
 			isRequesting,
 		} = this.props;
@@ -249,24 +275,6 @@ class Benefits extends Component {
 					>
 						{ __( 'No thanks', 'woocommerce-admin' ) }
 					</Button>
-
-					{ /* Make sure we're finished requesting since this will auto redirect us. */ }
-					{ ! isJetpackConnected &&
-						! isRequesting &&
-						! pluginsRemaining.length && (
-							<Connect
-								autoConnect
-								onConnect={ () => {
-									recordEvent(
-										'storeprofiler_jetpack_connect_redirect'
-									);
-								} }
-								onError={ () => goToNextStep() }
-								redirectUrl={ getAdminLink(
-									'admin.php?page=wc-admin&reset_profiler=0'
-								) }
-							/>
-						) }
 				</div>
 
 				<p className="woocommerce-profile-wizard__benefits-install-notice">
@@ -299,12 +307,17 @@ export default compose(
 
 		const {
 			getActivePlugins,
+			getPluginsError,
 			isJetpackConnected,
 			isPluginsRequesting,
 		} = select( PLUGINS_STORE_NAME );
 
 		return {
 			activePlugins: getActivePlugins(),
+			getJetpackConnectUrl: __experimentalResolveSelect(
+				PLUGINS_STORE_NAME
+			).getJetpackConnectUrl,
+			getPluginsError,
 			isProfileItemsError: Boolean(
 				getOnboardingError( 'updateProfileItems' )
 			),