A4A: hide bank info migration step when already active (#96752)

client/a8c-for-agencies/sections/migrations/primary/self-migration-tool/index.tsx

@@ -9,6 +9,7 @@ import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
 import { A4A_MIGRATIONS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { TaskSteps } from 'calypso/a8c-for-agencies/components/task-steps';
+import useGetTipaltiPayee from 'calypso/a8c-for-agencies/sections/referrals/hooks/use-get-tipalti-payee';
 import { getMigrationInfo } from './migration-info';
 
 import './style.scss';
@@ -17,15 +18,21 @@ const SelfMigrationTool = ( { type }: { type: 'pressable' | 'wpcom' } ) => {
 	const translate = useTranslate();
 
 	const stepInfo = getMigrationInfo( type, translate );
+	const { data: tipaltiData } = useGetTipaltiPayee();
 
 	const { pageTitle, heading, pageHeading, pageSubheading, steps, sessionStorageKey } = stepInfo;
 
-	const stepsWithCompletion = steps.map( ( step ) => {
-		return {
+	const stepsWithCompletion = steps.reduce( ( acc, step ) => {
+		// Remove the step to add the bank info if already added
+		if ( tipaltiData.IsPayable && step.stepId === 'add-bank-info' ) {
+			return acc;
+		}
+		acc.push( {
 			...step,
 			isCompleted: false,
-		};
-	} );
+		} as never );
+		return acc;
+	}, [] );
 
 	return (
 		<Layout className="self-migration-tool" title={ pageTitle } wide>