Merge pull request #32815 from woocommerce/add/32412-load-sample-products

Add load sample products for experimental product task

plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss

@@ -0,0 +1,51 @@
+.woocommerce-products-load-sample-product-modal-overlay {
+	top: 0;
+	background: rgba(255, 255, 255, 0.8);
+
+	@media (min-width: 783px ) {
+		& {
+			left: 35px;
+		}
+	}
+
+
+	@include break-large {
+		& {
+			left: 160px;
+		}
+	}
+
+}
+
+.woocommerce-products-load-sample-product-modal {
+	background: transparent;
+	box-shadow: none;
+
+	.components-modal__header {
+		display: none;
+	}
+
+	.components-modal__content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: 0;
+	}
+
+	.woocommerce-load-sample-product-modal__title {
+		color: $gray-900;
+		font-weight: 400;
+		font-size: 24px;
+		line-height: 32px;
+		margin-top: 32px;
+	}
+
+	.woocommerce-load-sample-product-modal__description {
+		color: $gray-700;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 24px;
+		margin-top: 12px;
+	}
+}

plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal } from '@wordpress/components';
+import { Spinner } from '@wordpress/components/build/ui';
+import { Text } from '@woocommerce/experimental';
+
+/**
+ * Internal dependencies
+ */
+import './load-sample-product-modal.scss';
+
+const LoadSampleProductModal: React.FC = () => {
+	return (
+		<Modal
+			className="woocommerce-products-load-sample-product-modal"
+			overlayClassName="woocommerce-products-load-sample-product-modal-overlay"
+			title=""
+			onRequestClose={ () => {} }
+		>
+			<Spinner color="#007cba" size={ 48 } />
+			<Text className="woocommerce-load-sample-product-modal__title">
+				{ __( 'Loading sample products' ) }
+			</Text>
+			<Text className="woocommerce-load-sample-product-modal__description">
+				{ __( 'We are loading 9 sample products into your store' ) }
+			</Text>
+		</Modal>
+	);
+};
+
+export default LoadSampleProductModal;

plugins/woocommerce-admin/client/tasks/fills/components/test/load-sample-product-modal.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import LoadSampleProductModal from '../load-sample-product-modal';
+
+describe( 'LoadSampleProductModal', () => {
+	it( 'should render LoadSampleProductModal', () => {
+		const { queryByText } = render( <LoadSampleProductModal /> );
+		expect( queryByText( 'Loading sample products' ) ).toBeInTheDocument();
+	} );
+} );

plugins/woocommerce-admin/client/tasks/fills/components/use-load-sample-products.ts

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import { WC_ADMIN_NAMESPACE } from '@woocommerce/data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+type UseLoadSampleProductsProps = {
+	redirectUrlAfterSuccess: string;
+};
+
+const useLoadSampleProducts = ( {
+	redirectUrlAfterSuccess,
+}: UseLoadSampleProductsProps ) => {
+	const [ isRequesting, setIsRequesting ] = useState< boolean >( false );
+	const { createNotice } = useDispatch( 'core/notices' );
+
+	const loadSampleProduct = async () => {
+		setIsRequesting( true );
+		try {
+			await apiFetch( {
+				path: `${ WC_ADMIN_NAMESPACE }/onboarding/tasks/import_sample_products`,
+				method: 'POST',
+			} );
+
+			if ( redirectUrlAfterSuccess ) {
+				window.location.href = redirectUrlAfterSuccess;
+				return;
+			}
+		} catch ( error: unknown ) {
+			const message =
+				error instanceof Error && error.message
+					? error.message
+					: __(
+							'There was an error importing the sample products',
+							'woocommerce'
+					  );
+
+			createNotice( 'error', message );
+		}
+		setIsRequesting( false );
+	};
+
+	return {
+		loadSampleProduct,
+		isLoadingSampleProducts: isRequesting,
+	};
+};
+
+export default useLoadSampleProducts;

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx

@@ -7,7 +7,8 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { find } from 'lodash';
+import { getAdminLink } from '@woocommerce/settings';
+
 /**
  * Internal dependencies
  */
@@ -17,14 +18,26 @@ import { importTypes } from './importTypes';
 import './style.scss';
 import useProductTypeListItems from '../experimental-products/use-product-types-list-items';
 import { getProductTypes } from '../experimental-products/utils';
+import LoadSampleProductModal from '../components/load-sample-product-modal';
+import useLoadSampleProducts from '../components/use-load-sample-products';
 
 const Products = () => {
 	const [ showStacks, setStackVisibility ] = useState< boolean >( false );
+
+	const {
+		loadSampleProduct,
+		isLoadingSampleProducts,
+	} = useLoadSampleProducts( {
+		redirectUrlAfterSuccess: getAdminLink(
+			'edit.php?post_type=product&wc_onboarding_active_task=products'
+		),
+	} );
 	const StacksComponent = (
 		<Stacks
 			items={ useProductTypeListItems(
 				getProductTypes( [ 'subscription' ] )
 			) }
+			onClickLoadSampleProduct={ loadSampleProduct }
 		/>
 	);
 	return (
@@ -38,6 +51,7 @@ const Products = () => {
 				</Button>
 				{ showStacks && StacksComponent }
 			</div>
+			{ isLoadingSampleProducts && <LoadSampleProductModal /> }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx

@@ -7,6 +7,7 @@ import { Text } from '@woocommerce/experimental';
 import { registerPlugin } from '@wordpress/plugins';
 import { useMemo, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
+import { getAdminLink } from '@woocommerce/settings';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
@@ -20,6 +21,8 @@ import Stack from './stack';
 import Footer from './footer';
 import CardLayout from './card-layout';
 import { LoadSampleProductType } from './constants';
+import LoadSampleProductModal from '../components/load-sample-product-modal';
+import useLoadSampleProducts from '../components/use-load-sample-products';
 
 // TODO: Use experiment data from the API, not hardcoded.
 const SHOW_STACK_LAYOUT = true;
@@ -54,6 +57,16 @@ export const Products = () => {
 	const surfacedProductTypeKeys = getSurfacedProductTypeKeys(
 		getOnboardingProductType()
 	);
+
+	const {
+		loadSampleProduct,
+		isLoadingSampleProducts,
+	} = useLoadSampleProducts( {
+		redirectUrlAfterSuccess: getAdminLink(
+			'edit.php?post_type=product&wc_onboarding_active_task=products'
+		),
+	} );
+
 	const visibleProductTypes = useMemo( () => {
 		const surfacedProductTypes = productTypes.filter( ( productType ) =>
 			surfacedProductTypeKeys.includes( productType.key )
@@ -69,13 +82,17 @@ export const Products = () => {
 			if ( ! SHOW_STACK_LAYOUT ) {
 				surfacedProductTypes.push( {
 					...LoadSampleProductType,
-					// TODO: Change to load sample product
-					onClick: () => new Promise( () => {} ),
+					onClick: loadSampleProduct,
 				} );
 			}
 		}
 		return surfacedProductTypes;
-	}, [ surfacedProductTypeKeys, isExpanded, productTypes ] );
+	}, [
+		surfacedProductTypeKeys,
+		isExpanded,
+		productTypes,
+		loadSampleProduct,
+	] );
 
 	return (
 		<div className="woocommerce-task-products">
@@ -89,7 +106,10 @@ export const Products = () => {
 
 			<div className="woocommerce-product-content">
 				{ SHOW_STACK_LAYOUT ? (
-					<Stack items={ visibleProductTypes } />
+					<Stack
+						items={ visibleProductTypes }
+						onClickLoadSampleProduct={ loadSampleProduct }
+					/>
 				) : (
 					<CardLayout items={ visibleProductTypes } />
 				) }
@@ -99,6 +119,7 @@ export const Products = () => {
 				/>
 				<Footer />
 			</div>
+			{ isLoadingSampleProducts && <LoadSampleProductModal /> }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx

@@ -17,9 +17,13 @@ type StackProps = {
 	items: ( ProductType & {
 		onClick: () => void;
 	} )[];
+	onClickLoadSampleProduct: () => void;
 };
 
-const Stack: React.FC< StackProps > = ( { items } ) => {
+const Stack: React.FC< StackProps > = ( {
+	items,
+	onClickLoadSampleProduct,
+} ) => {
 	return (
 		<div className="woocommerce-products-stack">
 			<List items={ items } />
@@ -46,7 +50,14 @@ const Stack: React.FC< StackProps > = ( { items } ) => {
 						),
 						LspLink: (
 							// TODO: Update this to the load sample product.
-							<Link href="" type="wc-admin">
+							<Link
+								href=""
+								type="wc-admin"
+								onClick={ () => {
+									onClickLoadSampleProduct();
+									return false;
+								} }
+							>
 								<></>
 							</Link>
 						),

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx

@@ -20,6 +20,13 @@ jest.mock( '~/utils/admin-settings', () => ( {
 	getAdminSetting: jest.fn(),
 } ) );
 
+global.fetch = jest.fn().mockImplementation( () =>
+	Promise.resolve( {
+		json: () => Promise.resolve( {} ),
+		status: 200,
+	} )
+);
+
 describe( 'Products', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -75,4 +82,27 @@ describe( 'Products', () => {
 
 		expect( queryByText( 'View less product types' ) ).toBeInTheDocument();
 	} );
+
+	it( 'should send a request to load sample products when the link is clicked', async () => {
+		const fetchMock = jest.spyOn( global, 'fetch' );
+		const { queryByText, getByRole } = render( <Products /> );
+
+		expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument();
+
+		userEvent.click(
+			getByRole( 'link', { name: 'Load Sample Products' } )
+		);
+
+		await waitFor( () =>
+			expect( fetchMock ).toHaveBeenCalledWith(
+				'/wc-admin/onboarding/tasks/import_sample_products?_locale=user',
+				{
+					body: undefined,
+					credentials: 'include',
+					headers: { Accept: 'application/json, */*;q=0.1' },
+					method: 'POST',
+				}
+			)
+		);
+	} );
 } );

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import Stack from '../stack';
+import { productTypes } from '../constants';
+
+describe( 'Stack', () => {
+	it( 'should render stack with given product type and two links', () => {
+		const { queryByText, queryAllByRole } = render(
+			<Stack
+				onClickLoadSampleProduct={ () => {} }
+				items={ [
+					{
+						...productTypes[ 0 ],
+						onClick: () => {},
+					},
+				] }
+			/>
+		);
+		expect( queryByText( productTypes[ 0 ].title ) ).toBeInTheDocument();
+		expect( queryAllByRole( 'link' ) ).toHaveLength( 2 );
+	} );
+
+	it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => {
+		const onClickLoadSampleProduct = jest.fn();
+		const { getByRole } = render(
+			<Stack
+				onClickLoadSampleProduct={ onClickLoadSampleProduct }
+				items={ [
+					{
+						...productTypes[ 0 ],
+						onClick: () => {},
+					},
+				] }
+			/>
+		);
+
+		userEvent.click(
+			getByRole( 'link', { name: 'Load Sample Products' } )
+		);
+		await waitFor( () => expect( onClickLoadSampleProduct ).toBeCalled() );
+	} );
+} );

plugins/woocommerce-admin/client/typings/index.d.ts

@@ -2,6 +2,10 @@ declare module '@woocommerce/e2e-utils';
 declare module '@woocommerce/e2e-environment';
 declare module '@woocommerce/settings';
 declare module '@woocommerce/tracks';
+declare module '@wordpress/components/build/ui' {
+	// Typescript seems unable to resolve this correctly by default, so we need to re-export it in our type defs.
+	export * from '@wordpress/components/build-types/ui';
+}
 declare module 'gridicons/dist/*' {
 	const value: React.ElementType< {
 		size?: 12 | 18 | 24 | 36 | 48 | 54 | 72;

plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-load-sample-products-notice/index.ts

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { dispatch } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+import { getAdminLink } from '@woocommerce/settings';
+
+domReady( () => {
+	dispatch( 'core/notices' ).createSuccessNotice(
+		__( 'Sample products added' ),
+		{
+			id: 'WOOCOMMERCE_ONBOARDING_LOAD_SAMPLE_PRODUCTS_NOTICE',
+			actions: [
+				{
+					url: getAdminLink( 'admin.php?page=wc-admin' ),
+					label: __(
+						'Continue setting up your store',
+						'woocommerce'
+					),
+				},
+			],
+		}
+	);
+} );

plugins/woocommerce-admin/webpack.config.js

@@ -48,6 +48,7 @@ const wpAdminScripts = [
 	'print-shipping-label-banner',
 	'beta-features-tracking-modal',
 	'payment-method-promotions',
+	'onboarding-load-sample-products-notice',
 ];
 const getEntryPoints = () => {
 	const entryPoints = {
@@ -165,7 +166,14 @@ const webpackConfig = {
 
 		// We reuse this Webpack setup for Storybook, where we need to disable dependency extraction.
 		! process.env.STORYBOOK &&
-			new WooCommerceDependencyExtractionWebpackPlugin(),
+			new WooCommerceDependencyExtractionWebpackPlugin( {
+				requestToExternal( request ) {
+					if ( request === '@wordpress/components/build/ui' ) {
+						// The external wp.components does not include ui components, so we need to skip requesting to external here.
+						return null;
+					}
+				},
+			} ),
 		// Reduces data for moment-timezone.
 		new MomentTimezoneDataPlugin( {
 			// This strips out timezone data before the year 2000 to make a smaller file.

plugins/woocommerce/changelog/add-32412-load-sample-products

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add load sample products for experimental product task

plugins/woocommerce/sample-data/experimental_sample_9_products.csv

@@ -0,0 +1,10 @@
+ID,Type,SKU,Name,Published,"Is featured?","Visibility in catalog","Short description",Description,"Date sale price starts","Date sale price ends","Tax status","Tax class","In stock?",Stock,"Backorders allowed?","Sold individually?","Weight (lbs)","Length (in)","Width (in)","Height (in)","Allow customer reviews?","Purchase note","Sale price","Regular price",Categories,Tags,"Shipping class",Images,"Download limit","Download expiry days",Parent,"Grouped products",Upsells,Cross-sells,"External URL","Button text",Position,"Attribute 1 name","Attribute 1 value(s)","Attribute 1 visible","Attribute 1 global","Attribute 2 name","Attribute 2 value(s)","Attribute 2 visible","Attribute 2 global","Meta: _wpcom_is_markdown","Download 1 name","Download 1 URL","Download 2 name","Download 2 URL"
+44,variable,woo-vneck-tee,"V-Neck T-Shirt",1,1,visible,"This is a variable product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.5,24,1,2,1,,,,"Clothing > Tshirts",,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vneck-tee-2.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vnech-tee-green-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vnech-tee-blue-1.jpg",,,,,,,,,0,Color,"Blue, Green, Red",1,1,Size,"Large, Medium, Small",1,1,1,,,,
+45,variable,woo-hoodie,Hoodie,1,0,visible,"This is a variable product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,1.5,10,8,3,1,,,,"Clothing > Hoodies",,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-2.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-blue-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-green-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-with-logo-2.jpg",,,,,,,,,0,Color,"Blue, Green, Red",1,1,Logo,"Yes, No",1,0,1,,,,
+47,simple,woo-tshirt,T-Shirt,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.8,8,6,1,1,,,18,"Clothing > Tshirts",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/tshirt-2.jpg,,,,,,,,,0,Color,Gray,1,1,,,,,1,,,,
+48,simple,woo-beanie,Beanie,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.2,4,5,.5,1,,18,20,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/beanie-2.jpg,,,,,,,,,0,Color,Red,1,1,,,,,1,,,,
+58,simple,woo-belt,Belt,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,1.2,12,2,1.5,1,,55,65,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/belt-2.jpg,,,,,,,,,0,,,,,,,,,1,,,,
+60,simple,woo-cap,Cap,1,1,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,0.6,8,6.5,4,1,,16,18,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/cap-2.jpg,,,,,,,,,0,Color,Yellow,1,1,,,,,1,,,,
+62,simple,woo-sunglasses,Sunglasses,1,1,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.2,4,1.4,1,1,,,90,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/sunglasses-2.jpg,,,,,,,,,0,,,,,,,,,1,,,,
+70,simple,woo-polo,Polo,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.8,6,5,1,1,,,20,"Clothing > Tshirts",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/polo-2.jpg,,,,,,,,,0,Color,Blue,1,1,,,,,1,,,,
+87,grouped,logo-collection,"Logo Collection",1,0,visible,"This is a grouped product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,,,,,1,,,,Clothing,,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/beanie-with-logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/t-shirt-with-logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-with-logo-2.jpg",,,,"woo-hoodie-with-logo, woo-tshirt, woo-beanie",,,,,0,,,,,,,,,1,,,,

plugins/woocommerce/src/Admin/API/OnboardingTasks.php

@@ -9,7 +9,7 @@ namespace Automattic\WooCommerce\Admin\API;
 
 use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingIndustries;
 use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingProfile;
-use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Init as OnboardingTasksFeature;
+use Automattic\WooCommerce\Admin\Features\Features;
 use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists;
 use Automattic\WooCommerce\Admin\Features\OnboardingTasks\DeprecatedExtendedTask;
 
@@ -340,7 +340,11 @@ class OnboardingTasks extends \WC_REST_Data_Controller {
 	 * @return WP_Error|WP_REST_Response
 	 */
 	public static function import_sample_products() {
+		if ( Features::is_enabled( 'experimental-products-task' ) || Features::is_enabled( 'experimental-import-products-task' ) ) {
+			$sample_csv_file = WC_ABSPATH . 'sample-data/experimental_sample_9_products.csv';
+		} else {
 			$sample_csv_file = WC_ABSPATH . 'sample-data/sample_products.csv';
+		}
 
 		$import = self::import_sample_products_from_csv( $sample_csv_file );
 		return rest_ensure_response( $import );

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php

@@ -19,6 +19,7 @@ class Products extends Task {
 		parent::__construct( $task_list );
 		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_manual_return_notice_script' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_import_return_notice_script' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_load_sample_return_notice_script' ) );
 	}
 
 	/**
@@ -151,6 +152,43 @@ class Products extends Task {
 		);
 	}
 
+	/**
+	 * Adds a return to task list notice when completing the loading sample products action.
+	 *
+	 * @param string $hook Page hook.
+	 */
+	public function possibly_add_load_sample_return_notice_script( $hook ) {
+		global $post;
+		if ( 'edit.php' !== $hook || 'product' !== $post->post_type ) {
+			return;
+		}
+
+		$referer = wp_get_referer();
+		if ( ! $referer || 0 !== strpos( $referer, wc_admin_url() ) ) {
+			return;
+		}
+
+		if ( ! isset( $_GET[ Task::ACTIVE_TASK_TRANSIENT ] ) ) {
+			return;
+		}
+
+		$task_id = sanitize_title_with_dashes( wp_unslash( $_GET[ Task::ACTIVE_TASK_TRANSIENT ] ) );
+		if ( $task_id !== $this->get_id() || ! $this->is_complete() ) {
+			return;
+		}
+
+		$script_assets_filename = WCAdminAssets::get_script_asset_filename( 'wp-admin-scripts', 'onboarding-product-notice' );
+		$script_assets          = require WC_ADMIN_ABSPATH . WC_ADMIN_DIST_JS_FOLDER . 'wp-admin-scripts/' . $script_assets_filename;
+
+		wp_enqueue_script(
+			'onboarding-load-sample-products-notice',
+			WCAdminAssets::get_url( 'wp-admin-scripts/onboarding-load-sample-products-notice', 'js' ),
+			array_merge( array( WC_ADMIN_APP ), $script_assets ['dependencies'] ),
+			WC_VERSION,
+			true
+		);
+	}
+
 	/**
 	 * Check if the store has any published products.
 	 *