Refactor credentials from error handling

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/components/access-method-picker.tsx

@@ -18,7 +18,7 @@ export const AccessMethodPicker: FC< Props > = ( { control } ) => {
 			<div className="site-migration-credentials__radio">
 				<Controller
 					control={ control }
-					name="howToAccessSite"
+					name="migrationType"
 					defaultValue="credentials"
 					render={ ( { field: { value, ...props } } ) => (
 						<FormRadio
@@ -36,7 +36,7 @@ export const AccessMethodPicker: FC< Props > = ( { control } ) => {
 			<div className="site-migration-credentials__radio">
 				<Controller
 					control={ control }
-					name="howToAccessSite"
+					name="migrationType"
 					defaultValue="backup"
 					render={ ( { field: { value, onBlur, ...props } } ) => (
 						<FormRadio

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

@@ -10,7 +10,7 @@ import { ErrorMessage } from './error-message';
 
 interface Props {
 	control: Control< CredentialsFormData >;
-	errors: any;
+	errors?: any;
 	importSiteQueryParam?: string | undefined | null;
 }
 
@@ -35,18 +35,18 @@ export const SiteAddressField: React.FC< Props > = ( {
 
 	return (
 		<div className="site-migration-credentials__form-field">
-			<FormLabel htmlFor="site-address">{ translate( 'Site address' ) }</FormLabel>
+			<FormLabel htmlFor="from_url">{ translate( 'Site address' ) }</FormLabel>
 			<Controller
 				control={ control }
-				name="siteAddress"
+				name="from_url"
 				rules={ {
 					required: translate( 'Please enter your WordPress site address.' ),
 					validate: validateSiteAddress,
 				} }
 				render={ ( { field } ) => (
 					<FormTextInput
-						id="site-address"
-						isError={ !! errors.siteAddress }
+						id="from_url"
+						isError={ !! errors?.from_url }
 						placeholder={ placeholder }
 						readOnly={ !! importSiteQueryParam }
 						disabled={ !! importSiteQueryParam }
@@ -55,7 +55,7 @@ export const SiteAddressField: React.FC< Props > = ( {
 					/>
 				) }
 			/>
-			<ErrorMessage error={ errors.siteAddress } />
+			<ErrorMessage error={ errors?.from_url } />
 		</div>
 	);
 };

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

@@ -0,0 +1,81 @@
+import { useTranslate } from 'i18n-calypso';
+import { useCallback, useMemo } from 'react';
+import { FieldErrors } from 'react-hook-form';
+import { ApiError, CredentialsFormData } from '../types';
+
+// This function is used to map the error message to the correct field in the form.
+// Backend is returning the errors related to backup files using 'from_url' key
+// but we need to use 'backupFileLocation' to identify the field in the form.
+const getFieldName = ( key: string, migrationType: string ) => {
+	return 'backup' === migrationType && key === 'from_url' ? 'backupFileLocation' : key;
+};
+
+// ** This hook is used to map the error messages to the form fields errors.
+export const useFormErrorMapping = (
+	error?: ApiError | null,
+	variables?: CredentialsFormData | null
+): FieldErrors< CredentialsFormData > | undefined => {
+	const translate = useTranslate();
+
+	const fieldMapping: Record< string, { type: string; message: string } | null > = useMemo(
+		() => ( {
+			from_url: { type: 'manual', message: translate( 'Enter a valid URL.' ) },
+			username: { type: 'manual', message: translate( 'Enter a valid username.' ) },
+			password: { type: 'manual', message: translate( 'Enter a valid password.' ) },
+			backupFileLocation: { type: 'manual', message: translate( 'Enter a valid URL.' ) },
+		} ),
+		[ translate ]
+	);
+
+	const getTranslatedMessage = useCallback(
+		( key: string ) => {
+			return (
+				fieldMapping[ key ] ?? {
+					type: 'manual',
+					message: translate( 'Invalid input, please check again' ),
+				}
+			);
+		},
+		[ fieldMapping, translate ]
+	);
+
+	const handleServerError = useCallback(
+		( error: ApiError, { migrationType }: CredentialsFormData ) => {
+			const { code, message, data } = error;
+
+			if ( code === 'rest_missing_callback_param' || ! code ) {
+				return {
+					root: {
+						type: 'manual',
+						message: translate( 'An error occurred while saving credentials.' ),
+					},
+				};
+			}
+
+			if ( code !== 'rest_invalid_param' || ! data?.params ) {
+				return { root: { type: 'manual', message } };
+			}
+
+			const invalidFields = Object.keys( data.params );
+
+			return invalidFields.reduce(
+				( errors, key ) => {
+					const fieldName = getFieldName( key, migrationType );
+					const message = getTranslatedMessage( key );
+
+					errors[ fieldName ] = message;
+					return errors;
+				},
+				{} as Record< string, { type: string; message: string } >
+			);
+		},
+		[ getTranslatedMessage, translate ]
+	);
+
+	return useMemo( () => {
+		if ( error && variables ) {
+			return handleServerError( error, variables ) as FieldErrors< CredentialsFormData >;
+		}
+		return undefined;
+	}, [ error, handleServerError, variables ] );
+};

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

@@ -128,21 +128,28 @@ describe( 'SiteMigrationCredentials', () => {
 		expect( wpcomRequest ).not.toHaveBeenCalled();
 	} );
 
-	it( 'shows errors on the required fields when the user does not fill the fields', async () => {
+	it( 'shows errors on the required fields when the user does not fill the fields when user select credentials option', async () => {
 		render();
 		await userEvent.click( continueButton() );
+		await userEvent.click( credentialsOption() );
+		expect( getByText( messages.urlError ) ).toBeVisible();
+		expect( getByText( messages.usernameError ) ).toBeVisible();
+		expect( getByText( messages.passwordError ) ).toBeVisible();
+	} );
 
-		expect( getByText( messages.urlError ) ).toBeInTheDocument();
-		expect( getByText( messages.usernameError ) ).toBeInTheDocument();
-		expect( getByText( messages.passwordError ) ).toBeInTheDocument();
+	it( 'shows errors on the required fields when the user does not fill the fields when user select backup option', async () => {
+		render();
+		await userEvent.click( backupOption() );
+		await userEvent.click( continueButton() );
+		expect( getByText( /Please enter a valid URL/ ) ).toBeVisible();
 	} );
 
 	it( 'shows error when user set invalid site address', async () => {
 		render();
 		await userEvent.type( siteAddressInput(), 'invalid-site-address' );
 		await userEvent.click( continueButton() );
 
-		expect( getByText( messages.noTLDError ) ).toBeInTheDocument();
+		expect( getByText( messages.noTLDError ) ).toBeVisible();
 	} );
 
 	it( 'fills the site address and disable it when the user already informed the site address on previous step', async () => {
@@ -218,6 +225,18 @@ describe( 'SiteMigrationCredentials', () => {
 		expect( submit ).not.toHaveBeenCalled();
 	} );
 
+	it( 'shows an generic error when server doesn`t return error', async () => {
+		const submit = jest.fn();
+		render( { navigation: { submit } } );
+
+		( wpcomRequest as jest.Mock ).mockRejectedValue( {} );
+
+		await fillAllFields();
+		await userEvent.click( continueButton() );
+
+		expect( getByText( /An error occurred while saving credentials./ ) ).toBeVisible();
+	} );
+
 	it( 'shows a notice when URL contains error=ticket-creation', async () => {
 		const submit = jest.fn();
 		const initialEntry = '/site-migration-credentials?error=ticket-creation';

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

@@ -1,4 +1,12 @@
 export interface CredentialsFormData {
+	from_url: string;
+	username: string;
+	password: string;
+	backupFileLocation: string;
+	migrationType: 'credentials' | 'backup';
+	notes: string;
+}
+export interface ApiFormData {
 	siteAddress: string;
 	username: string;
 	password: string;
@@ -7,14 +15,10 @@ export interface CredentialsFormData {
 	howToAccessSite: 'credentials' | 'backup';
 }
 
-export interface MigrationError {
-	body: {
-		code: string;
-		message: string;
-		data: {
-			status: number;
-			params?: Record< string, string >;
-		};
+export interface ApiError {
+	code: string;
+	message: string;
+	data: {
+		params?: Record< string, string >;
 	};
-	status: number;
 }

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

@@ -1,124 +1,66 @@
-import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { MigrationError, CredentialsFormData } from './types';
+import { useFormErrorMapping } from './hooks/use-form-error-mapping';
+import { CredentialsFormData } from './types';
 import { useSiteMigrationCredentialsMutation } from './use-site-migration-credentials-mutation';
 
-const mapApiError = ( error: any ) => {
-	return {
-		body: {
-			code: error.code,
-			message: error.message,
-			data: error.data,
-		},
-		status: error.status,
-	};
-};
-
 export const useCredentialsForm = ( onSubmit: () => void ) => {
-	const translate = useTranslate();
 	const importSiteQueryParam = useQuery().get( 'from' ) || '';
+	const {
+		isPending,
+		mutate: requestAutomatedMigration,
+		error,
+		isSuccess,
+		variables,
+	} = useSiteMigrationCredentialsMutation();
 
-	const fieldMapping = {
-		from_url: {
-			fieldName: 'siteAddress',
-			errorMessage: translate( 'Enter a valid URL.' ),
-		},
-		username: {
-			fieldName: 'username',
-			errorMessage: translate( 'Enter a valid username.' ),
-		},
-		password: {
-			fieldName: 'password',
-			errorMessage: translate( 'Enter a valid password.' ),
-		},
-		migration_type: {
-			fieldName: 'howToAccessSite',
-			errorMessage: null,
-		},
-		notes: {
-			fieldName: 'notes',
-			errorMessage: null,
-		},
-	};
-
-	const setGlobalError = ( message?: string | null | undefined ) => {
-		// eslint-disable-next-line @typescript-eslint/no-use-before-define
-		setError( 'root', {
-			type: 'manual',
-			message: message ?? translate( 'An error occurred while saving credentials.' ),
-		} );
-	};
-
-	const handleMigrationError = ( err: MigrationError ) => {
-		let hasUnmappedFieldError = false;
-
-		if ( err.body?.code === 'rest_invalid_param' && err.body?.data?.params ) {
-			Object.entries( err.body.data.params ).forEach( ( [ key ] ) => {
-				const field = fieldMapping[ key as keyof typeof fieldMapping ];
-				const keyName =
-					// eslint-disable-next-line @typescript-eslint/no-use-before-define
-					'backup' === accessMethod && field?.fieldName === 'siteAddress'
-						? 'backupFileLocation'
-						: field?.fieldName;
-
-				if ( keyName ) {
-					const message = field?.errorMessage ?? translate( 'Invalid input, please check again' );
-					// eslint-disable-next-line @typescript-eslint/no-use-before-define
-					setError( keyName as keyof CredentialsFormData, { type: 'manual', message } );
-				} else if ( ! hasUnmappedFieldError ) {
-					hasUnmappedFieldError = true;
-					setGlobalError();
-				}
-			} );
-		} else {
-			setGlobalError( err.body?.message );
-		}
-	};
-
-	const { isPending, requestAutomatedMigration } = useSiteMigrationCredentialsMutation( {
-		onSuccess: () => {
-			recordTracksEvent( 'calypso_site_migration_automated_request_success' );
-			onSubmit();
-		},
-		onError: ( error: any ) => {
-			handleMigrationError( mapApiError( error ) );
-			recordTracksEvent( 'calypso_site_migration_automated_request_error' );
-		},
-	} );
+	const serverSideError = useFormErrorMapping( error, variables );
 
 	const {
 		formState: { errors },
 		control,
 		handleSubmit,
 		watch,
-		setError,
 		clearErrors,
 	} = useForm< CredentialsFormData >( {
 		mode: 'onSubmit',
 		reValidateMode: 'onSubmit',
 		disabled: isPending,
 		defaultValues: {
-			siteAddress: importSiteQueryParam,
+			from_url: importSiteQueryParam,
 			username: '',
 			password: '',
 			backupFileLocation: '',
 			notes: '',
-			howToAccessSite: 'credentials',
+			migrationType: 'credentials',
 		},
+		errors: serverSideError,
 	} );
 
+	const accessMethod = watch( 'migrationType' );
+
+	useEffect( () => {
+		if ( isSuccess ) {
+			recordTracksEvent( 'calypso_site_migration_automated_request_success' );
+			onSubmit();
+		}
+	}, [ isSuccess, onSubmit ] );
+
+	useEffect( () => {
+		if ( error ) {
+			recordTracksEvent( 'calypso_site_migration_automated_request_error' );
+		}
+	}, [ error ] );
+
 	useEffect( () => {
 		const { unsubscribe } = watch( () => {
 			clearErrors( 'root' );
 		} );
 		return () => unsubscribe();
 	}, [ watch, clearErrors ] );
 
-	const accessMethod = watch( 'howToAccessSite' );
-
 	const submitHandler = ( data: CredentialsFormData ) => {
 		requestAutomatedMigration( data );
 	};
@@ -131,7 +73,6 @@ export const useCredentialsForm = ( onSubmit: () => void ) => {
 		accessMethod,
 		isPending,
 		submitHandler,
-		setError,
 		importSiteQueryParam,
 	};
 };