add: slot for tasklist completion component slotfill (#36487)

* add: slot for tasklist completion component slotfill

* added fillprops and changed to experimental slotfill name

plugins/woocommerce-admin/client/two-column-tasks/task-list-completion-slot/index.ts

@@ -0,0 +1,2 @@
+export * from './task-list-completion-slot';
+export * from './utils';

plugins/woocommerce-admin/client/two-column-tasks/task-list-completion-slot/task-list-completion-slot.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useSlot } from '@woocommerce/experimental';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import {
+	EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME,
+	WooTaskListCompletion,
+	WooTaskListCompletionFillProps,
+} from './utils';
+
+export const TaskListCompletionSlot = ( {
+	className,
+	fillProps,
+}: {
+	className?: string;
+	fillProps: WooTaskListCompletionFillProps;
+} ) => {
+	const slot = useSlot( EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME );
+	const hasFills = Boolean( slot?.fills?.length );
+	if ( ! hasFills ) {
+		return null;
+	}
+	return (
+		<div
+			className={ classNames(
+				'woocommerce-tasklist-completion-slot',
+				className
+			) }
+		>
+			<WooTaskListCompletion.Slot fillProps={ fillProps } />
+		</div>
+	);
+};

plugins/woocommerce-admin/client/two-column-tasks/task-list-completion-slot/utils.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { Slot, Fill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { createOrderedChildren, sortFillsByOrder } from '../../utils';
+
+type WooTaskListCompletionProps = {
+	children: React.ReactNode;
+	order?: number;
+};
+
+export const EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME =
+	'woocommerce_experimental_task_list_completion';
+/**
+ * Create a Fill for extensions to add items to the WooCommerce Admin Task List completion component slot.
+ *
+ * @slotFill WooTaskListCompletion
+ * @scope woocommerce-admin
+ * @example
+ * const MyTasklistCompletionItem = () => (
+ * <WooTaskListCompletion>My Task List completion item</WooTaskListCompletion>
+ * );
+ *
+ * registerPlugin( 'my-extension', {
+ * render: MyTasklistCompletionItem,
+ * scope: 'woocommerce-admin',
+ * } );
+ * @param {Object} param0
+ * @param {Array}  param0.children - Node children.
+ * @param {Array}  param0.order    - Node order.
+ */
+export const WooTaskListCompletion = ( {
+	children,
+	order = 1,
+}: WooTaskListCompletionProps ) => {
+	return (
+		<Fill name={ EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME }>
+			{ ( fillProps: Fill.Props ) => {
+				return createOrderedChildren( children, order, fillProps );
+			} }
+		</Fill>
+	);
+};
+
+export type WooTaskListCompletionFillProps = {
+	/** Call this function to hide this Task List completion component completely, without any replacement component */
+	hideTasks: () => void;
+	/** Call this function to show the completed Task List items instead of this TaskList completion component */
+	keepTasks: () => void;
+	/** To show the CES component or not */
+	customerEffortScore: boolean;
+};
+
+WooTaskListCompletion.Slot = ( {
+	fillProps,
+}: {
+	fillProps: Slot.Props & WooTaskListCompletionFillProps;
+} ) => (
+	<Slot
+		name={ EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME }
+		fillProps={ fillProps }
+	>
+		{ sortFillsByOrder }
+	</Slot>
+);

plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx

@@ -22,7 +22,7 @@ import {
 	WCDataSelector,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { List } from '@woocommerce/experimental';
+import { List, useSlot } from '@woocommerce/experimental';
 import classnames from 'classnames';
 
 /**
@@ -36,6 +36,10 @@ import { ProgressHeader } from '~/task-lists/progress-header';
 import { TaskListItemTwoColumn } from './task-list-item-two-column';
 import { TaskListCompletedHeader } from './completed-header';
 import { LayoutContext } from '~/layout';
+import {
+	TaskListCompletionSlot,
+	EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME,
+} from './task-list-completion-slot';
 
 export type TaskListProps = TaskListType & {
 	eventName?: string;
@@ -99,6 +103,10 @@ export const TaskList: React.FC< TaskListProps > = ( {
 		recordTaskListView();
 	}, [] );
 
+	const taskListCompletionSlot = useSlot(
+		EXPERIMENTAL_WC_TASK_LIST_COMPLETION_SLOT_NAME
+	);
+
 	useEffect( () => {
 		const { task: prevTask } = prevQueryRef.current;
 		const { task } = query;
@@ -229,7 +237,22 @@ export const TaskList: React.FC< TaskListProps > = ( {
 		return <div className="woocommerce-task-dashboard__container"></div>;
 	}
 
+	const hasTaskListCompletionSlotFills = Boolean(
+		taskListCompletionSlot?.fills?.length
+	);
+
 	if ( isComplete && keepCompletedTaskList !== 'yes' ) {
+		if ( hasTaskListCompletionSlotFills ) {
+			return (
+				<TaskListCompletionSlot
+					fillProps={ {
+						hideTasks,
+						keepTasks,
+						customerEffortScore: cesHeader,
+					} }
+				/>
+			);
+		}
 		return (
 			<>
 				{ cesHeader ? (

plugins/woocommerce/changelog/add-tasklist-completion-slotfill

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added slot for tasklist completion slotfill