Create pending sticker when loading the step

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx

@@ -1,6 +1,6 @@
 import { StepContainer } from '@automattic/onboarding';
 import { useTranslate } from 'i18n-calypso';
-import { FC, useMemo } from 'react';
+import { FC, useMemo, useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { useUpdateMigrationStatus } from 'calypso/data/site-migration/use-update-migration-status';
@@ -13,10 +13,48 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { usePresalesChat } from 'calypso/lib/presales-chat';
 import useHostingProviderName from 'calypso/site-profiler/hooks/use-hosting-provider-name';
 import FlowCard from '../components/flow-card';
-import type { StepProps } from '../../types';
+import type { NavigationControls, StepProps } from '../../types';
 
 import './style.scss';
 
+interface PendingMigrationStatusProps {
+	onSubmit?: Pick< NavigationControls, 'submit' >[ 'submit' ];
+}
+
+const usePendingMigrationStatus = ( { onSubmit }: PendingMigrationStatusProps ) => {
+	const site = useSite();
+	const siteId = site?.ID;
+
+	const canInstallPlugins = site?.plan?.features?.active.find(
+		( feature ) => feature === 'install-plugins'
+	)
+		? true
+		: false;
+
+	const { updateMigrationStatus } = useUpdateMigrationStatus();
+
+	// Register pending migration status when loading the step.
+	useEffect( () => {
+		if ( siteId ) {
+			updateMigrationStatus( siteId, 'migration-pending' );
+		}
+	}, [ siteId, updateMigrationStatus ] );
+
+	const onOptionClick = ( how: string ) => {
+		const destination = canInstallPlugins ? 'migrate' : 'upgrade';
+		if ( siteId ) {
+			const parsedHow = how === HOW_TO_MIGRATE_OPTIONS.DO_IT_MYSELF ? 'diy' : how;
+			updateMigrationStatus( siteId, `migration-pending-${ parsedHow }` );
+		}
+
+		if ( onSubmit ) {
+			return onSubmit( { how, destination } );
+		}
+	};
+
+	return { onOptionClick };
+};
+
 interface Props extends StepProps {
 	headerText?: string;
 	subHeaderText?: string;
@@ -26,7 +64,6 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
 	const { navigation, headerText } = props;
 
 	const translate = useTranslate();
-	const site = useSite();
 	const importSiteQueryParam = useQuery().get( 'from' ) || '';
 	usePresalesChat( 'wpcom' );
 
@@ -64,29 +101,14 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
 		urlData
 	);
 
+	const { onOptionClick } = usePendingMigrationStatus( { onSubmit: navigation.submit } );
+
 	const hostingProviderSlug = hostingProviderData?.hosting_provider?.slug;
 	const shouldDisplayHostIdentificationMessage =
 		hostingProviderSlug &&
 		hostingProviderSlug !== 'unknown' &&
 		hostingProviderSlug !== 'automattic';
 
-	const canInstallPlugins = site?.plan?.features?.active.find(
-		( feature ) => feature === 'install-plugins'
-	)
-		? true
-		: false;
-
-	const { updateMigrationStatus } = useUpdateMigrationStatus();
-
-	const handleClick = ( how: string ) => {
-		const destination = canInstallPlugins ? 'migrate' : 'upgrade';
-		if ( site?.ID ) {
-			const parsedHow = how === HOW_TO_MIGRATE_OPTIONS.DO_IT_MYSELF ? 'diy' : how;
-			updateMigrationStatus( site.ID, `migration-pending-${ parsedHow }` );
-		}
-		return navigation.submit?.( { how, destination } );
-	};
-
 	const stepContent = (
 		<>
 			<div className="how-to-migrate__list">
@@ -95,7 +117,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
 						key={ i }
 						title={ option.label }
 						text={ option.description }
-						onClick={ () => handleClick( option.value ) }
+						onClick={ () => onOptionClick( option.value ) }
 					/>
 				) ) }
 			</div>