Add load sample product hook & modal component

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/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;