Update task list documentation and example

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

@@ -12,11 +12,12 @@ pnpm install
 
 Build the example extension by running the pnpm script and passing the example name.
 
+
 ```bash
-WC_EXT=<example> pnpm example --filter=woocommerce/client/admin
+WC_EXT=<example> pnpm --filter=woocommerce/client/admin example
 ```
 
-Include the output plugin in your `.wp-env.json` and `.wp-env.override.json` and restart the WordPress instance. WooCommerce Analytics reports will now reflect the changes made by the example extension.
+You should see a new directory in `./woocommerce/plugins/{example} path.` Include the output plugin in your `.wp-env.json` or `.wp-env.override.json` and restart the WordPress instance. WooCommerce will now reflect the changes made by the example extension.
 
 You can make changes to Javascript and PHP files in the example and see changes reflected upon refresh.
 
@@ -27,3 +28,4 @@ You can make changes to Javascript and PHP files in the example and see changes
 - `dashboard-section` - Adding a custom "section" to the new dashboard area.
 - `table-column` - An example of how to add column(s) to any report.
 - `sql-modification` - An example of how to modify SQL statements.
+- `payment-gateway-suggestions` - An example of how to add a new payment gateway suggestion

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

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Custom task example.
+ *
+ * @package WooCommerce\Admin
+ */
+
+use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
+
+/**
+ * Custom task class.
+ */
+class MyTask extends Task {
+	/**
+	 * Get the task ID.
+	 *
+	 * @return string
+	 */
+	public function get_id() {
+		return 'my-task';
+	}
+
+	/**
+	 * Title.
+	 *
+	 * @return string
+	 */
+	public function get_title() {
+		return __( 'My task', 'woocommerce' );
+	}
+
+	/**
+	 * Content.
+	 *
+	 * @return string
+	 */
+	public function get_content() {
+		return __( 'Add your task description here for display in the task list.', 'woocommerce' );
+	}
+
+	/**
+	 * Time.
+	 *
+	 * @return string
+	 */
+	public function get_time() {
+		return __( '2 minutes', 'woocommerce' );
+	}
+}

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

@@ -1,13 +1,17 @@
+/* eslint-disable @wordpress/i18n-text-domain */
 /**
  * External dependencies
  */
-
+import { createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Card, CardBody } from '@wordpress/components';
 import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
 import { registerPlugin } from '@wordpress/plugins';
 import { useDispatch } from '@wordpress/data';
-import { WooOnboardingTask } from '@woocommerce/onboarding';
+import {
+	WooOnboardingTask,
+	WooOnboardingTaskListItem,
+} from '@woocommerce/onboarding';
 
 const Task = ( { onComplete, task } ) => {
 	const { actionTask } = useDispatch( ONBOARDING_STORE_NAME );
@@ -46,10 +50,32 @@ const Task = ( { onComplete, task } ) => {
 registerPlugin( 'add-task-content', {
 	render: () => (
 		<WooOnboardingTask id="my-task">
-			{ ( { onComplete, query, task } ) => (
-				<Task onComplete={ onComplete } task={ task } />
-			) }
+			{ ( {
+				onComplete,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				query,
+				task,
+			} ) => <Task onComplete={ onComplete } task={ task } /> }
 		</WooOnboardingTask>
 	),
 	scope: 'woocommerce-tasks',
 } );
+
+registerPlugin( 'my-task-list-item-plugin', {
+	scope: 'woocommerce-tasks',
+	render: () => (
+		<WooOnboardingTaskListItem id="my-task">
+			{ ( { defaultTaskItem: DefaultTaskItem } ) => (
+				// Add a custom wrapper around the default task item.
+				<div
+					className="woocommerce-custom-tasklist-item"
+					style={ {
+						border: '1px solid red',
+					} }
+				>
+					<DefaultTaskItem />
+				</div>
+			) }
+		</WooOnboardingTaskListItem>
+	),
+} );

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

@@ -5,29 +5,18 @@
  * @package WooCommerce\Admin
  */
 
-use Automattic\WooCommerce\Internal\Admin\Onboarding;
-use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
-use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists;
-
 /**
  * Register the task.
  */
 function add_task_my_task() {
-	TaskLists::add_task(
+	require_once __DIR__ . '/class-mytask.php';
+	$task_lists = \Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists::instance();
+
+	// Add the task to the extended list.
+	$task_lists::add_task(
 		'extended',
-		array(
-			'id'             => 'my-task',
-			'title'          => __( 'My task', 'woocommerce-admin' ),
-			'content'        => __(
-				'Add your task description here for display in the task list.',
-				'woocommerce-admin'
-			),
-			'action_label'   => __( 'Do action', 'woocommerce-admin' ),
-			'is_complete'    => Task::is_task_actioned( 'my-task' ),
-			'can_view'       => 'US' === WC()->countries->get_base_country(),
-			'time'           => __( '2 minutes', 'woocommerce-admin' ),
-			'is_dismissable' => true,
-			'is_snoozeable'  => true,
+		new MyTask(
+			$task_lists::get_list( 'extended' ),
 		)
 	);
 }