Create the SITE_MIGRATION_FALLBACK_CREDENTIALS step

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/hooks/use-credentials-form.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { UrlData } from 'calypso/blocks/import/types';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
+import { useSiteIdParam } from 'calypso/landing/stepper/hooks/use-site-id-param';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import wp from 'calypso/lib/wp';
@@ -21,6 +22,23 @@ export const analyzeUrl = async ( domain: string ): Promise< UrlData | undefined
 	}
 };
 
+export const getApplicationPasswordsInfo = async (
+	siteId: number,
+	from: string
+): Promise< ApplicationPasswordsInfo | undefined > => {
+	try {
+		return await wp.req.get( {
+			path:
+				`/sites/${ siteId }/automated-migration/application-passwords/authorization-url?source=${ encodeURIComponent(
+					from
+				) }` + encodeURIComponent( from ),
+			apiNamespace: 'wpcom/v2',
+		} );
+	} catch ( error ) {
+		return undefined;
+	}
+};
+
 const isNotWordPress = ( siteInfo?: UrlData ) => {
 	return !! siteInfo?.platform && siteInfo?.platform !== 'wordpress';
 };
@@ -29,6 +47,17 @@ const isWPCOM = ( siteInfo?: UrlData ) => {
 	return !! siteInfo?.platform_data?.is_wpcom;
 };
 
+const getFormDefaultValues = ( fromUrl: string ): CredentialsFormData => {
+	return {
+		from_url: fromUrl,
+		username: '',
+		password: '',
+		backupFileLocation: '',
+		notes: '',
+		migrationType: 'credentials',
+	};
+};
+
 export const useCredentialsForm = (
 	onSubmit: ( siteInfo?: UrlData, applicationPasswordsInfo?: ApplicationPasswordsInfo ) => void
 ) => {
@@ -37,6 +66,7 @@ export const useCredentialsForm = (
 	const importSiteQueryParam = useQuery().get( 'from' ) || '';
 	const [ siteInfo, setSiteInfo ] = useState< UrlData | undefined >( undefined );
 	const [ isBusy, setIsBusy ] = useState( false );
+	const siteId = parseInt( useSiteIdParam() ?? '' );
 
 	const {
 		mutateAsync: requestAutomatedMigration,
@@ -57,14 +87,7 @@ export const useCredentialsForm = (
 		mode: 'onSubmit',
 		reValidateMode: 'onSubmit',
 		disabled: isBusy,
-		defaultValues: {
-			from_url: importSiteQueryParam,
-			username: '',
-			password: '',
-			backupFileLocation: '',
-			notes: '',
-			migrationType: 'credentials',
-		},
+		defaultValues: getFormDefaultValues( importSiteQueryParam ),
 		errors: serverSideError,
 	} );
 
@@ -97,14 +120,12 @@ export const useCredentialsForm = (
 	);
 
 	const submitWithApplicationPassword = useCallback(
-		( siteInfoResult: UrlData ) => {
+		async ( siteId: number, from: string, siteInfoResult: UrlData ) => {
 			if ( isWPCOM( siteInfoResult ) || isNotWordPress( siteInfoResult ) ) {
 				onSubmit( siteInfoResult );
 			} else {
-				const applicationPasswordsInfo = {
-					isAvailable: true,
-				};
-				onSubmit( siteInfoResult, applicationPasswordsInfo );
+				const applicationPasswordsInfoResult = await getApplicationPasswordsInfo( siteId, from );
+				onSubmit( siteInfoResult, applicationPasswordsInfoResult );
 			}
 		},
 		[ onSubmit ]
@@ -117,7 +138,7 @@ export const useCredentialsForm = (
 		setSiteInfo( siteInfoResult );
 
 		if ( isApplicationPasswordEnabled && accessMethod === 'credentials' && siteInfoResult ) {
-			await submitWithApplicationPassword( siteInfoResult );
+			await submitWithApplicationPassword( siteId, data.from_url, siteInfoResult );
 		} else {
 			await requestAutomatedMigrationAndSubmit( data, siteInfoResult );
 		}

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/index.tsx

@@ -19,10 +19,14 @@ const getAction = ( siteInfo?: UrlData, applicationPasswordsInfo?: ApplicationPa
 		return 'submit';
 	}
 
-	if ( applicationPasswordsInfo?.isAvailable ) {
+	if ( applicationPasswordsInfo?.application_passwords_enabled ) {
 		return 'application-passwords-approval';
 	}
 
+	if ( applicationPasswordsInfo?.application_passwords_enabled === false ) {
+		return 'credentials-required';
+	}
+
 	if ( siteInfo?.platform_data?.is_wpcom ) {
 		return 'already-wpcom';
 	}
@@ -45,7 +49,12 @@ const SiteMigrationCredentials: Step = function ( { navigation } ) {
 		applicationPasswordsInfo?: ApplicationPasswordsInfo
 	) => {
 		const action = getAction( siteInfo, applicationPasswordsInfo );
-		return navigation.submit?.( { action, from: siteInfo?.url, platform: siteInfo?.platform } );
+		return navigation.submit?.( {
+			action,
+			from: siteInfo?.url,
+			platform: siteInfo?.platform,
+			authorizationUrl: applicationPasswordsInfo?.authorization_url,
+		} );
 	};
 
 	const handleSkip = () => {

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

@@ -639,17 +639,37 @@ describe( 'SiteMigrationCredentials', () => {
 		} );
 	} );
 
-	it( 'submits application-passwords-approval action when using password application', async () => {
+	it( 'submits credentials-required action when using password application and application_passwords_enabled is disabled', async () => {
 		const submit = jest.fn();
 		render( { navigation: { submit } } );
 		await fillAddressField();
-		( wp.req.get as jest.Mock ).mockResolvedValue( baseSiteInfo );
+		( wp.req.get as jest.Mock ).mockResolvedValueOnce( baseSiteInfo );
+		( wp.req.get as jest.Mock ).mockResolvedValueOnce( { application_passwords_enabled: false } );
+		await userEvent.click( continueButton() );
+
+		expect( submit ).toHaveBeenCalledWith( {
+			action: 'credentials-required',
+			from: 'https://site-url.wordpress.com',
+			platform: 'wordpress',
+		} );
+	} );
+
+	it( 'submits application-passwords-approval action when using password application and application_passwords_enabled is enabled', async () => {
+		const submit = jest.fn();
+		render( { navigation: { submit } } );
+		await fillAddressField();
+		( wp.req.get as jest.Mock ).mockResolvedValueOnce( baseSiteInfo );
+		( wp.req.get as jest.Mock ).mockResolvedValueOnce( {
+			application_passwords_enabled: true,
+			authorization_url: 'https://site-url.wordpress.com/wp-admin/authorize-application.php',
+		} );
 		await userEvent.click( continueButton() );
 
 		expect( submit ).toHaveBeenCalledWith( {
 			action: 'application-passwords-approval',
 			from: 'https://site-url.wordpress.com',
 			platform: 'wordpress',
+			authorizationUrl: 'https://site-url.wordpress.com/wp-admin/authorize-application.php',
 		} );
 	} );
 

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/types.ts

@@ -45,5 +45,6 @@ export interface MigrationError {
 }
 
 export interface ApplicationPasswordsInfo {
-	isAvailable: boolean;
+	application_passwords_enabled: boolean;
+	authorization_url: string;
 }

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-fallback-credentials/components/credentials-form.tsx

@@ -0,0 +1,85 @@
+import { NextButton } from '@automattic/onboarding';
+import { useTranslate } from 'i18n-calypso';
+import { FC } from 'react';
+import Notice from 'calypso/components/notice';
+import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
+import { ErrorMessage } from '../../site-migration-credentials/components/error-message';
+import { PasswordField } from '../../site-migration-credentials/components/password-field';
+import { SpecialInstructions } from '../../site-migration-credentials/components/special-instructions';
+import { UsernameField } from '../../site-migration-credentials/components/username-field';
+import { useFallbackCredentialsForm } from '../hooks/use-credentials-form';
+
+interface CredentialsFormProps {
+	onSubmit: ( from?: string ) => void;
+	onSkip: () => void;
+}
+
+export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip } ) => {
+	const translate = useTranslate();
+	const { control, errors, isBusy, submitHandler, canBypassVerification } =
+		useFallbackCredentialsForm( onSubmit );
+
+	const queryError = useQuery().get( 'error' ) || null;
+
+	let errorMessage;
+	if ( errors.root && errors.root.type !== 'manual' && errors.root.message ) {
+		errorMessage = errors.root.message;
+	} else if ( queryError === 'ticket-creation' ) {
+		errorMessage = translate(
+			'We ran into a problem submitting your details. Please try again shortly.'
+		);
+	}
+
+	const getContinueButtonText = () => {
+		if ( isBusy && ! canBypassVerification ) {
+			return translate( 'Verifying credentials' );
+		}
+		if ( canBypassVerification ) {
+			return translate( 'Continue anyway' );
+		}
+
+		return translate( 'Continue' );
+	};
+
+	return (
+		<form className="site-migration-credentials__form" onSubmit={ submitHandler }>
+			{ errorMessage && (
+				<Notice
+					className="site-migration-credentials__error-notice"
+					status="is-warning"
+					showDismiss={ false }
+				>
+					{ errorMessage }
+				</Notice>
+			) }
+			<div className="site-migration-credentials__content">
+				<div className="site-migration-credentials">
+					<UsernameField control={ control } errors={ errors } />
+					<PasswordField control={ control } errors={ errors } />
+				</div>
+
+				<SpecialInstructions control={ control } errors={ errors } />
+
+				<ErrorMessage
+					error={ errors.root && errors.root.type === 'manual' ? errors.root : undefined }
+				/>
+
+				<div className="site-migration-credentials__submit">
+					<NextButton disabled={ isBusy } type="submit">
+						{ getContinueButtonText() }
+					</NextButton>
+				</div>
+			</div>
+
+			<div className="site-migration-credentials__skip">
+				<button
+					className="button navigation-link step-container__navigation-link has-underline is-borderless"
+					onClick={ onSkip }
+					type="button"
+				>
+					{ translate( 'I need help, please contact me' ) }
+				</button>
+			</div>
+		</form>
+	);
+};

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-fallback-credentials/hooks/use-credentials-form.ts

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
+import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import { CredentialsFormData } from '../../site-migration-credentials/types';
+import { useFormErrorMapping } from './use-form-error-mapping';
+import { useRequestAutomatedMigration } from './use-request-automated-migration';
+
+export const useFallbackCredentialsForm = ( onSubmit: ( from?: string ) => void ) => {
+	const siteSlug = useSiteSlugParam();
+	const importSiteQueryParam = useQuery().get( 'from' ) || '';
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const {
+		mutateAsync: requestAutomatedMigration,
+		error,
+		variables,
+		reset,
+	} = useRequestAutomatedMigration( siteSlug );
+
+	const serverSideError = useFormErrorMapping( error, variables );
+
+	const {
+		formState: { errors, isSubmitting },
+		control,
+		handleSubmit,
+		watch,
+		clearErrors,
+	} = useForm< CredentialsFormData >( {
+		mode: 'onSubmit',
+		reValidateMode: 'onSubmit',
+		disabled: isBusy,
+		defaultValues: {
+			from_url: importSiteQueryParam,
+			username: '',
+			password: '',
+			notes: '',
+		},
+		errors: serverSideError,
+	} );
+
+	useEffect( () => {
+		setIsBusy( isSubmitting );
+	}, [ isSubmitting ] );
+
+	const isLoginFailed =
+		error?.code === 'automated_migration_tools_login_and_get_cookies_test_failed';
+
+	const submitHandler = handleSubmit( async ( data: CredentialsFormData ) => {
+		clearErrors();
+
+		try {
+			const payload = {
+				...data,
+				bypassVerification: isLoginFailed,
+			};
+			await requestAutomatedMigration( payload );
+			recordTracksEvent( 'calypso_site_migration_automated_request_success' );
+			onSubmit( importSiteQueryParam );
+		} catch ( error ) {
+			recordTracksEvent( 'calypso_site_migration_automated_request_error' );
+		}
+	} );
+
+	useEffect( () => {
+		const { unsubscribe } = watch( () => {
+			clearErrors( 'root' );
+			reset();
+		} );
+		return () => unsubscribe();
+	}, [ watch, clearErrors, reset ] );
+
+	return {
+		errors,
+		control,
+		handleSubmit,
+		submitHandler,
+		isBusy,
+		canBypassVerification: isLoginFailed,
+	};
+};