Allow extensions in Add Products task (#44892)

* Add POC for tasklist product types extensibility

* Replace create product with custom onClick when it exists

* Don't include dummy plugin

* Remove dummy file

* Cleanup product type filter for tasklist

* Create unit test for product type filter

* Added changelog

* Move changelog file

* Is Enhancement

* Add changefile(s) from automation for the following project(s): woocommerce

* Delete plugins/woocommerce/changelog/extend-product-task

* Fix lint errors

* Apply suggestions from code review

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* CR responses

---------

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/task-lists/fills/products/constants.tsx

@@ -90,3 +90,6 @@ export const defaultSurfacedProductTypes =
 	onboardingProductTypesToSurfaced.physical;
 
 export const supportedOnboardingProductTypes = [ 'physical', 'downloads' ];
+
+export const SETUP_TASKLIST_PRODUCT_TYPES_FILTER =
+	'experimental_woocommerce_tasklist_product_types';

plugins/woocommerce-admin/client/task-lists/fills/products/test/utils.ts

@@ -1,8 +1,17 @@
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
 import { getProductTypes, getSurfacedProductTypeKeys } from '../utils';
-import { productTypes, onboardingProductTypesToSurfaced } from '../constants';
+import {
+	productTypes,
+	onboardingProductTypesToSurfaced,
+	SETUP_TASKLIST_PRODUCT_TYPES_FILTER,
+} from '../constants';
 
 describe( 'getProductTypes', () => {
 	it( 'should return the product types', () => {
@@ -16,6 +25,30 @@ describe( 'getProductTypes', () => {
 			)
 		).toEqual( [ 'physical', 'variable', 'grouped' ] );
 	} );
+
+	it( 'should return the product types with extras from filter and excluded items', () => {
+		const customProduct = {
+			key: 'custom-product',
+			title: 'Custom product',
+			content: 'A custom product',
+			before: '',
+			after: '',
+		};
+
+		addFilter(
+			SETUP_TASKLIST_PRODUCT_TYPES_FILTER,
+			'wc/admin/tests',
+			( filteredProductTypes ) => {
+				return [ ...filteredProductTypes, customProduct ];
+			}
+		);
+
+		expect(
+			getProductTypes( { exclude: [ 'external', 'digital' ] } ).map(
+				( p ) => p.key
+			)
+		).toEqual( [ 'physical', 'variable', 'grouped', 'custom-product' ] );
+	} );
 } );
 
 describe( 'getSurfacedProductTypeKeys', () => {

plugins/woocommerce-admin/client/task-lists/fills/products/use-product-types-list-items.tsx

@@ -10,6 +10,10 @@ import { recordEvent } from '@woocommerce/tracks';
 import { useCreateProductByType } from './use-create-product-by-type';
 import { ProductType, ProductTypeKey } from './constants';
 
+type ProductTypeWithOnclick = ProductType & {
+	onClick?: () => void;
+};
+
 const useProductTypeListItems = (
 	_productTypes: ProductType[],
 	suggestedProductTypes: ProductTypeKey[] = [],
@@ -23,10 +27,14 @@ const useProductTypeListItems = (
 
 	const productTypes = useMemo(
 		() =>
-			_productTypes.map( ( productType ) => ( {
+			_productTypes.map( ( productType: ProductTypeWithOnclick ) => ( {
 				...productType,
 				onClick: () => {
-					createProductByType( productType.key );
+					if ( typeof productType?.onClick === 'function' ) {
+						productType.onClick();
+					} else {
+						createProductByType( productType.key );
+					}
 					recordEvent( 'tasklist_add_product', {
 						method: 'product_template',
 					} );
@@ -41,7 +49,7 @@ const useProductTypeListItems = (
 					}
 				},
 			} ) ),
-		[ createProductByType ]
+		[ _productTypes, createProductByType, onClick, suggestedProductTypes ]
 	);
 
 	return { productTypes, isRequesting };

plugins/woocommerce-admin/client/task-lists/fills/products/utils.tsx

@@ -2,17 +2,19 @@
  * External dependencies
  */
 import { intersection } from 'lodash';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import {
-	productTypes,
+	productTypes as baseProductTypes,
 	ProductType,
 	ProductTypeKey,
 	onboardingProductTypesToSurfaced,
 	supportedOnboardingProductTypes,
 	defaultSurfacedProductTypes,
+	SETUP_TASKLIST_PRODUCT_TYPES_FILTER,
 } from './constants';
 
 export const getProductTypes = ( {
@@ -20,13 +22,26 @@ export const getProductTypes = ( {
 }: {
 	exclude?: ProductTypeKey[];
 } = {} ): ProductType[] => {
+	/**
+	 * Experimental: Filter for adding custom product types to tasklist.
+	 *
+	 * @filter woocommerce_tasklist_experimental_product_types
+	 * @param {Object} productTypes Array of product types.
+	 */
+	const injectedProductTypes = applyFilters(
+		SETUP_TASKLIST_PRODUCT_TYPES_FILTER,
+		[]
+	) as ProductType[];
+
+	let productTypes = [ ...baseProductTypes, ...injectedProductTypes ];
+
 	if ( exclude && exclude?.length > 0 ) {
-		return productTypes.filter(
+		productTypes = productTypes.filter(
 			( productType ) => ! exclude.includes( productType.key )
 		);
 	}
 
-	return [ ...productTypes ];
+	return productTypes;
 };
 
 /**

plugins/woocommerce/changelog/44892-dakota-product-types-extensibility

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add support for extending product types on onboarding task list