Update async help center to use help center loader

client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx

@@ -1,20 +1,13 @@
-import { HelpCenter } from '@automattic/data-stores';
-import { useDispatch } from '@wordpress/data';
-import { useCallback } from 'react';
-import AsyncLoad from 'calypso/components/async-load';
-
-const HELP_CENTER_STORE = HelpCenter.register();
+import HelpCenterLoader from 'calypso/components/help-center-loader';
+// import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 
 const AsyncHelpCenter = () => {
-	const { setShowHelpCenter } = useDispatch( HELP_CENTER_STORE );
-
-	const handleClose = useCallback( () => {
-		setShowHelpCenter( false );
-	}, [ setShowHelpCenter ] );
+	// TODO: The useSite uses the `useLocation`, but we are not adding it inside the router because HelpCenter also has its own router.
+	// const site = useSite();
+	const site = null;
 
-	return (
-		<AsyncLoad require="@automattic/help-center" placeholder={ null } handleClose={ handleClose } />
-	);
+	// TODO: Should we set the currentRoute prop or allow the HelpCenter get the default value from `window.___location`? It would probably cause issues not updating this value. Notice that the hook `useCurrentRoute` also depends on the router because it uses the `useLocation`.
+	return <HelpCenterLoader site={ site } sectionName="stepper" loadHelpCenter />;
 };
 
 export default AsyncHelpCenter;