Onboarding: Add task list extensibility and example plugin (https://github.com/woocommerce/woocommerce-admin/pull/3060)

* Add task list filter

* Add task example plugin

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

@@ -5,6 +5,7 @@
  */
 
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 import { get } from 'lodash';
 
 /**
@@ -45,7 +46,7 @@ export function getTasks( { profileItems, options, query } ) {
 		false
 	);
 
-	return [
+	const tasks = [
 		{
 			key: 'connect',
 			title: __( 'Connect your store to WooCommerce.com', 'woocommerce-admin' ),
@@ -115,4 +116,6 @@ export function getTasks( { profileItems, options, query } ) {
 			visible: true,
 		},
 	];
+
+	return applyFilters( 'woocommerce_onboarding_task_list', tasks, query );
 }

plugins/woocommerce-admin/docs/examples/extensions/README.md

@@ -23,5 +23,6 @@ You can make changes to Javascript and PHP files in the example and see changes
 ## Example Extensions
 
 - `add-report` - Create a "Hello World" report page.
+- `add-task` - Create a custom task for the onboarding task list.
 - `dashboard-section` - Adding a custom "section" to the new dashboard area.
 - `table-column` - An example of how to add column(s) to any report.

plugins/woocommerce-admin/docs/examples/extensions/add-task/js/index.js

@@ -0,0 +1,87 @@
+/** @format */
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Card } from '@woocommerce/components';
+import { getHistory, getNewPath } from '@woocommerce/navigation';
+
+/* global addTaskData */
+const markTaskComplete = () => {
+	apiFetch( {
+		path: '/wc-admin/v1/options',
+		method: 'POST',
+		data: { woocommerce_admin_add_task_example_complete: true },
+	} )
+		.then( () => {
+			// Set the local `isComplete` to `true` so that task appears complete on the list.
+			addTaskData.isComplete = true;
+			// Redirect back to the root WooCommerce Admin page.
+			getHistory().push( getNewPath( {}, '/', {} ) );
+		} )
+		.catch( error => {
+			// Something went wrong with our update.
+			console.log( error );
+		} );
+};
+
+const markTaskIncomplete = () => {
+	apiFetch( {
+		path: '/wc-admin/v1/options',
+		method: 'POST',
+		data: { woocommerce_admin_add_task_example_complete: false },
+	} )
+		.then( () => {
+			addTaskData.isComplete = false;
+			getHistory().push( getNewPath( {}, '/', {} ) );
+		} )
+		.catch( error => {
+			console.log( error );
+		} );
+};
+
+const Task = () => {
+	return (
+		<Card className="is-narrow">
+			{ __( 'Example task card content.', 'plugin-domain' ) }
+			<br />
+			<br />
+			<div>
+				{ addTaskData.isComplete ? (
+					<button onClick={ markTaskIncomplete }>
+						{ __( 'Mark task incomplete', 'plugin-domain' ) }
+					</button>
+				) : (
+					<button onClick={ markTaskComplete }>
+						{ __( 'Mark task complete', 'plugin-domain' ) }
+					</button>
+				) }
+			</div>
+		</Card>
+	);
+};
+
+/**
+ * Use the 'woocommerce_onboarding_task_list' filter to add a task page.
+ */
+addFilter( 'woocommerce_onboarding_task_list', 'plugin-domain', tasks => {
+	return [
+		...tasks,
+		{
+			key: 'example',
+			title: __( 'Example', 'plugin-domain' ),
+			content: __( 'This is an example task.', 'plugin-domain' ),
+			icon: 'info',
+			container: <Task />,
+			completed: addTaskData.isComplete,
+			visible: true,
+		},
+	];
+} );

plugins/woocommerce-admin/docs/examples/extensions/add-task/woocommerce-admin-add-task-example.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Plugin Name: WooCommerce Admin Add Task Example
+ *
+ * @package WC_Admin
+ */
+
+use Automattic\WooCommerce\Admin\Features\Onboarding;
+
+/**
+ * Register the JS.
+ */
+function add_task_register_script() {
+
+	if (
+		! class_exists( 'Automattic\WooCommerce\Admin\Loader' ) ||
+		! \Automattic\WooCommerce\Admin\Loader::is_admin_page() ||
+		! Onboarding::should_show_tasks()
+	) {
+		return;
+	}
+
+	wp_register_script(
+		'add-task',
+		plugins_url( '/dist/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+			'wp-element',
+			'wp-i18n',
+			'wc-components',
+		),
+		filemtime( dirname( __FILE__ ) . '/dist/index.js' ),
+		true
+	);
+
+	$client_data = array(
+		'isComplete' => get_option( 'woocommerce_admin_add_task_example_complete', false ),
+	);
+	wp_localize_script( 'add-task', 'addTaskData', $client_data );
+	wp_enqueue_script( 'add-task' );
+}
+add_action( 'admin_enqueue_scripts', 'add_task_register_script' );

plugins/woocommerce-admin/src/Features/Onboarding.php

@@ -50,7 +50,7 @@ class Onboarding {
 	 */
 	public function __construct() {
 		// Include WC Admin Onboarding classes.
-		if ( $this->should_show_tasks() ) {
+		if ( self::should_show_tasks() ) {
 			OnboardingTasks::get_instance();
 		}
 
@@ -82,7 +82,7 @@ class Onboarding {
 	 *
 	 * @return bool
 	 */
-	public function should_show_profiler() {
+	public static function should_show_profiler() {
 		$onboarding_data = get_option( 'wc_onboarding_profile', array() );
 
 		$is_completed = isset( $onboarding_data['completed'] ) && true === $onboarding_data['completed'];
@@ -97,7 +97,7 @@ class Onboarding {
 	 *
 	 * @return bool
 	 */
-	public function should_show_tasks() {
+	public static function should_show_tasks() {
 		return 'no' === get_option( 'woocommerce_task_list_hidden', 'no' );
 	}
 
@@ -330,14 +330,14 @@ class Onboarding {
 		);
 
 		// Only fetch if the onboarding wizard is incomplete.
-		if ( $this->should_show_profiler() ) {
+		if ( self::should_show_profiler() ) {
 			$settings['onboarding']['productTypes'] = self::get_allowed_product_types();
 			$settings['onboarding']['themes']       = self::get_themes();
 			$settings['onboarding']['activeTheme']  = get_option( 'stylesheet' );
 		}
 
 		// Only fetch if the onboarding wizard OR the task list is incomplete.
-		if ( $this->should_show_profiler() || $this->should_show_tasks() ) {
+		if ( self::should_show_profiler() || self::should_show_tasks() ) {
 			$settings['onboarding']['activePlugins'] = self::get_active_plugins();
 		}
 
@@ -353,7 +353,7 @@ class Onboarding {
 	public function preload_options( $options ) {
 		$options[] = 'woocommerce_task_list_hidden';
 
-		if ( ! $this->should_show_tasks() && ! $this->should_show_profiler() ) {
+		if ( ! self::should_show_tasks() && ! self::should_show_profiler() ) {
 			return $options;
 		}
 
@@ -423,7 +423,7 @@ class Onboarding {
 	 * @return bool
 	 */
 	public function is_loading( $is_loading ) {
-		$show_profiler = $this->should_show_profiler();
+		$show_profiler = self::should_show_profiler();
 		$is_dashboard  = ! isset( $_GET['path'] ); // WPCS: csrf ok.
 
 		if ( ! $show_profiler || ! $is_dashboard ) {