Highlight WooCommerce Payments task (https://github.com/woocommerce/woocommerce-admin/pull/4793)

* Add wcpay setup task and hide normal payment task if the wcpay plugin is installed

* Record an event when selecting the wcpay task

Co-authored-by: Rebecca Scott <me@becdetat.com>

plugins/woocommerce-admin/client/task-list/index.js

@@ -33,7 +33,7 @@ import {
  */
 import './style.scss';
 import CartModal from 'dashboard/components/cart-modal';
-import { getAllTasks } from './tasks';
+import { getAllTasks, recordTaskViewEvent } from './tasks';
 import { recordEvent } from 'lib/tracks';
 import withSelect from 'wc-api/with-select';
 
@@ -118,7 +118,11 @@ class TaskDashboard extends Component {
 			profileItems,
 			query,
 			taskListPayments,
+			activePlugins,
 			installedPlugins,
+			installAndActivatePlugins,
+			createNotice,
+			isJetpackConnected,
 		} = this.props;
 
 		return getAllTasks( {
@@ -126,38 +130,33 @@ class TaskDashboard extends Component {
 			taskListPayments,
 			query,
 			toggleCartModal: this.toggleCartModal.bind( this ),
+			activePlugins,
 			installedPlugins,
+			installAndActivatePlugins,
+			createNotice,
+			isJetpackConnected,
 		} ).filter( ( task ) => task.visible );
 	}
 
-	getPluginsInformation() {
+	recordTaskView() {
 		const {
 			isJetpackConnected,
 			activePlugins,
 			installedPlugins,
+			query,
 		} = this.props;
-		return {
+		const { task: taskName } = query;
-			wcs_installed: installedPlugins.includes( 'woocommerce-services' ),
-			wcs_active: activePlugins.includes( 'woocommerce-services' ),
-			jetpack_installed: installedPlugins.includes( 'jetpack' ),
-			jetpack_active: activePlugins.includes( 'jetpack' ),
-			jetpack_connected: isJetpackConnected,
-		};
-	}
 
-	recordTaskView() {
+		if ( ! taskName ) {
-		const { task } = this.props.query;
-		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-		const pluginsInformation = this.getPluginsInformation();
-
-		if ( ! task ) {
 			return;
 		}
 
-		recordEvent( 'task_view', {
+		recordTaskViewEvent(
-			task_name: task,
+			taskName,
-			...pluginsInformation,
+			isJetpackConnected,
-		} );
+			activePlugins,
+			installedPlugins
+		);
 	}
 
 	recordTaskListView() {
@@ -412,12 +411,17 @@ export default compose(
 			getOption( 'woocommerce_task_list_tracked_completed_tasks' ) || [];
 		const payments = getOption( 'woocommerce_task_list_payments' );
 
+		const activePlugins = getActivePlugins();
 		const installedPlugins = getInstalledPlugins();
+		const { createNotice } = props;
 		const tasks = getAllTasks( {
 			profileItems,
 			options: payments,
 			query: props.query,
+			activePlugins,
 			installedPlugins,
+			createNotice,
+			isJetpackConnected: isJetpackConnected(),
 		} );
 		const completedTaskKeys = tasks
 			.filter( ( task ) => task.completed )
@@ -425,7 +429,6 @@ export default compose(
 		const incompleteTasks = tasks.filter(
 			( task ) => task.visible && ! task.completed
 		);
-		const activePlugins = getActivePlugins();
 
 		return {
 			modalDismissed,
@@ -441,8 +444,13 @@ export default compose(
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
+		const { installAndActivatePlugins } = dispatch( PLUGINS_STORE_NAME );
+		const { createNotice } = dispatch( 'core/notices' );
+
 		return {
 			updateOptions,
+			installAndActivatePlugins,
+			createNotice,
 		};
 	} )
 )( TaskDashboard );

plugins/woocommerce-admin/client/task-list/tasks.js

@@ -10,6 +10,7 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 import { updateQueryString } from '@woocommerce/navigation';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,13 +22,35 @@ import Products from './tasks/products';
 import Shipping from './tasks/shipping';
 import Tax from './tasks/tax';
 import Payments from './tasks/payments';
+import { installActivateAndConnectWcpay } from './tasks/payments/methods';
+import { recordEvent } from 'lib/tracks';
+
+export function recordTaskViewEvent(
+	taskName,
+	isJetpackConnected,
+	activePlugins,
+	installedPlugins
+) {
+	recordEvent( 'task_view', {
+		task_name: taskName,
+		wcs_installed: installedPlugins.includes( 'woocommerce-services' ),
+		wcs_active: activePlugins.includes( 'woocommerce-services' ),
+		jetpack_installed: installedPlugins.includes( 'jetpack' ),
+		jetpack_active: activePlugins.includes( 'jetpack' ),
+		jetpack_connected: isJetpackConnected,
+	} );
+}
 
 export function getAllTasks( {
 	profileItems,
 	taskListPayments,
 	query,
 	toggleCartModal,
+	activePlugins,
 	installedPlugins,
+	installAndActivatePlugins,
+	createNotice,
+	isJetpackConnected,
 } ) {
 	const {
 		hasPhysicalProducts,
@@ -61,6 +84,9 @@ export function getAllTasks( {
 		taskListPayments && taskListPayments.skipped
 	);
 
+	const woocommercePaymentsInstalled =
+		installedPlugins.indexOf( 'woocommerce-payments' ) !== -1;
+
 	const tasks = [
 		{
 			key: 'store_details',
@@ -105,6 +131,34 @@ export function getAllTasks( {
 			visible: true,
 			time: __( '1 minute per product', 'woocommerce-admin' ),
 		},
+		{
+			key: 'woocommerce-payments',
+			title: __( 'Set up WooCommerce Payments', 'woocommerce-admin' ),
+			container: <Fragment />,
+			completed: paymentsCompleted || paymentsSkipped,
+			onClick: async () => {
+				await new Promise( ( resolve, reject ) => {
+					// This task doesn't have a view, so the recordEvent call
+					// in TaskDashboard.recordTaskView() is never called. So
+					// record it here.
+					recordTaskViewEvent(
+						'wcpay',
+						isJetpackConnected,
+						activePlugins,
+						installedPlugins
+					);
+					return installActivateAndConnectWcpay(
+						resolve,
+						reject,
+						createNotice,
+						installAndActivatePlugins
+					);
+				} );
+			},
+			visible:
+				window.wcAdminFeatures.wcpay && woocommercePaymentsInstalled,
+			time: __( '2 minutes', 'woocommerce-admin' ),
+		},
 		{
 			key: 'appearance',
 			title: __( 'Personalize my store', 'woocommerce-admin' ),
@@ -146,7 +200,7 @@ export function getAllTasks( {
 				}
 				updateQueryString( { task: 'payments' } );
 			},
-			visible: true,
+			visible: ! woocommercePaymentsInstalled,
 			time: __( '2 minutes', 'woocommerce-admin' ),
 		},
 	];

plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js

@@ -34,6 +34,39 @@ import PayPal from './paypal';
 import Klarna from './klarna';
 import PayFast from './payfast';
 
+export function installActivateAndConnectWcpay(
+	resolve,
+	reject,
+	createNotice,
+	installAndActivatePlugins
+) {
+	const errorMessage = __(
+		'There was an error connecting to WooCommerce Payments. Please try again or connect later in store settings.',
+		'woocommerce-admin'
+	);
+
+	const connect = () => {
+		apiFetch( {
+			path: WC_ADMIN_NAMESPACE + '/plugins/connect-wcpay',
+			method: 'POST',
+		} )
+			.then( ( response ) => {
+				window.location = response.connectUrl;
+			} )
+			.catch( () => {
+				createNotice( 'error', errorMessage );
+				reject();
+			} );
+	};
+
+	installAndActivatePlugins( [ 'woocommerce-payments' ] )
+		.then( () => connect() )
+		.catch( ( error ) => {
+			createNoticesFromResponse( error );
+			reject();
+		} );
+}
+
 export function getPaymentMethods( {
 	activePlugins,
 	countryCode,
@@ -123,31 +156,12 @@ export function getPaymentMethods( {
 			),
 			before: <WCPayIcon />,
 			onClick: ( resolve, reject ) => {
-				const errorMessage = __(
+				return installActivateAndConnectWcpay(
-					'There was an error connecting to WooCommerce Payments. Please try again or connect later in store settings.',
+					resolve,
-					'woocommerce-admin'
+					reject,
+					createNotice,
+					installAndActivatePlugins
 				);
-
-				const connect = () => {
-					apiFetch( {
-						path: WC_ADMIN_NAMESPACE + '/plugins/connect-wcpay',
-						method: 'POST',
-					} )
-						.then( ( response ) => {
-							window.location = response.connectUrl;
-						} )
-						.catch( () => {
-							createNotice( 'error', errorMessage );
-							reject();
-						} );
-				};
-
-				installAndActivatePlugins( [ 'woocommerce-payments' ] )
-					.then( () => connect() )
-					.catch( ( error ) => {
-						createNoticesFromResponse( error );
-						reject();
-					} );
 			},
 			visible: [ 'US', 'PR' ].includes( countryCode ) && ! hasCbdIndustry,
 			plugins: [ 'woocommerce-payments' ],