Create pending sticker when loading the "how to migrate" step

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

@@ -3,16 +3,15 @@ import { useTranslate } from 'i18n-calypso';
 import { FC, useMemo } 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';
 import { useAnalyzeUrlQuery } from 'calypso/data/site-profiler/use-analyze-url-query';
 import { useHostingProviderQuery } from 'calypso/data/site-profiler/use-hosting-provider-query';
 import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
-import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 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 usePendingMigrationStatus from './use-pending-migration-status';
 import type { StepProps } from '../../types';
 
 import './style.scss';
@@ -26,7 +25,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 +62,14 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
 		urlData
 	);
 
+	const { setPendingMigration } = 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 +78,7 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
 						key={ i }
 						title={ option.label }
 						text={ option.description }
-						onClick={ () => handleClick( option.value ) }
+						onClick={ () => setPendingMigration( option.value ) }
 					/>
 				) ) }
 			</div>

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

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useUpdateMigrationStatus } from 'calypso/data/site-migration/use-update-migration-status';
+import { RenderStepOptions, mockStepProps, renderStep } from '../../test/helpers';
+import SiteMigrationHowToMigrate from '../index';
+import type { StepProps } from '../../../types';
+
+const siteId = 1;
+
+jest.mock( 'calypso/data/site-migration/use-update-migration-status', () => ( {
+	useUpdateMigrationStatus: jest.fn(),
+} ) );
+
+jest.mock( 'calypso/lib/presales-chat', () => ( {
+	usePresalesChat: jest.fn(),
+} ) );
+
+jest.mock( 'calypso/data/site-profiler/use-analyze-url-query', () => ( {
+	useAnalyzeUrlQuery: () => ( { data: {} } ),
+} ) );
+
+jest.mock( 'calypso/data/site-profiler/use-hosting-provider-query', () => ( {
+	useHostingProviderQuery: () => ( { data: {} } ),
+} ) );
+
+jest.mock( 'calypso/site-profiler/hooks/use-hosting-provider-name', () => jest.fn() );
+
+jest.mock( 'calypso/landing/stepper/hooks/use-site', () => ( {
+	useSite: jest.fn( () => ( {
+		ID: siteId,
+	} ) ),
+} ) );
+
+const render = ( props?: Partial< StepProps >, renderOptions?: RenderStepOptions ) => {
+	const combinedProps = { ...mockStepProps( props ) };
+	return renderStep( <SiteMigrationHowToMigrate { ...combinedProps } />, renderOptions );
+};
+
+describe( 'SiteMigrationHowToMigrate', () => {
+	const mockSubmit = jest.fn();
+	let mockUpdateMigrationStatus;
+
+	beforeEach( () => {
+		mockUpdateMigrationStatus = jest.fn();
+		( useUpdateMigrationStatus as jest.Mock ).mockReturnValue( {
+			updateMigrationStatus: mockUpdateMigrationStatus,
+		} );
+	} );
+
+	it( 'should register pending migration status when the component is loaded', () => {
+		render( { navigation: { submit: mockSubmit } } );
+
+		expect( mockUpdateMigrationStatus ).toHaveBeenCalledWith( siteId, 'migration-pending' );
+	} );
+
+	it( 'should call updateMigrationStatus with correct value for DIFM option', () => {
+		const { getByText } = render( { navigation: { submit: mockSubmit } } );
+
+		const optionButton = getByText( 'Do it for me' );
+		fireEvent.click( optionButton );
+
+		// Check the last call value
+		const lastCallValue =
+			mockUpdateMigrationStatus.mock.calls[ mockUpdateMigrationStatus.mock.calls.length - 1 ][ 1 ];
+		expect( lastCallValue ).toBe( 'migration-pending-difm' );
+	} );
+
+	it( 'should call updateMigrationStatus with correct value for DIY option', () => {
+		const { getByText } = render( { navigation: { submit: mockSubmit } } );
+
+		const optionButton = getByText( "I'll do it myself" );
+		fireEvent.click( optionButton );
+
+		// Check the last call value
+		const lastCallValue =
+			mockUpdateMigrationStatus.mock.calls[ mockUpdateMigrationStatus.mock.calls.length - 1 ][ 1 ];
+		expect( lastCallValue ).toBe( 'migration-pending-diy' );
+	} );
+
+	it( 'should call submit with correct value when DIFM option is clicked', () => {
+		const { getByText } = render( { navigation: { submit: mockSubmit } } );
+
+		const optionButton = getByText( 'Do it for me' );
+		fireEvent.click( optionButton );
+
+		expect( mockSubmit ).toHaveBeenCalledWith( { destination: 'upgrade', how: 'difm' } );
+	} );
+
+	it( 'should call submit with correct value for DIY option', () => {
+		const { getByText } = render( { navigation: { submit: mockSubmit } } );
+
+		const optionButton = getByText( "I'll do it myself" );
+		fireEvent.click( optionButton );
+
+		expect( mockSubmit ).toHaveBeenCalledWith( { destination: 'upgrade', how: 'myself' } );
+	} );
+} );

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/use-pending-migration-status.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useUpdateMigrationStatus } from 'calypso/data/site-migration/use-update-migration-status';
+import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants';
+import { useSite } from 'calypso/landing/stepper/hooks/use-site';
+import type { NavigationControls } from '../../types';
+
+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 setPendingMigration = ( 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 { setPendingMigration };
+};
+
+export default usePendingMigrationStatus;