🚸 Enhance manual connection UX and validation

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js

@@ -1,5 +1,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, TextControl } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../../ReusableComponents/Separator';
@@ -19,19 +22,77 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 		setClientSecret,
 	} = useOnboardingStepWelcome();
 
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 	const { connectManual } = useManualConnect();
+	const refClientId = useRef( null );
+	const refClientSecret = useRef( null );
 
-	const handleConnect = async () => {
-		try {
-			const res = await connectManual();
-			if ( ! res.success ) {
-				throw new Error( 'Request failed.' );
+	const handleFormValidation = () => {
+		const fields = [
+			{
+				ref: refClientId,
+				value: clientId,
+				errorMessage: __(
+					'Please enter your Client ID',
+					'woocommerce-paypal-payments'
+				),
+			},
+			{
+				ref: refClientSecret,
+				value: clientSecret,
+				errorMessage: __(
+					'Please enter your Secret Key',
+					'woocommerce-paypal-payments'
+				),
+			},
+		];
+
+		for ( const { ref, value, errorMessage } of fields ) {
+			if ( value ) {
+				continue;
 			}
 
-			setCompleted( true );
-		} catch ( exc ) {
-			console.error( exc );
-			alert( 'Connection failed.' );
+			ref?.current?.focus();
+			createErrorNotice( errorMessage );
+			return false;
+		}
+
+		return true;
+	};
+
+	const handleServerError = ( res ) => {
+		if ( res.message ) {
+			createErrorNotice( res.message );
+		} else {
+			createErrorNotice(
+				__(
+					'Could not connect to PayPal. Please make sure your Client ID and Secret Key are correct.',
+					'woocommerce-paypal-payments'
+				)
+			);
+		}
+	};
+
+	const handleServerSuccess = () => {
+		createSuccessNotice(
+			__( 'Connected to PayPal', 'woocommerce-paypal-payments' )
+		);
+
+		setCompleted( true );
+	};
+
+	const handleConnect = async () => {
+		if ( ! handleFormValidation() ) {
+			return;
+		}
+
+		const res = await connectManual();
+
+		if ( res.success ) {
+			handleServerSuccess();
+		} else {
+			handleServerError( res );
 		}
 	};
 
@@ -75,6 +136,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 			>
 				<DataStoreControl
 					control={ TextControl }
+					ref={ refClientId }
 					label={
 						isSandboxMode
 							? __(
@@ -91,6 +153,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 				/>
 				<DataStoreControl
 					control={ TextControl }
+					ref={ refClientSecret }
 					label={
 						isSandboxMode
 							? __(

modules/ppcp-settings/resources/js/data/onboarding/actions.js

@@ -172,10 +172,10 @@ export const setProducts = ( products ) => {
  * Attempts to establish a connection using client ID and secret via the server-side
  * connection endpoint.
  *
- * @return {boolean} True if the connection was successful, false otherwise.
+ * @return {Object} The server response object
  */
 export function* connectViaIdAndSecret() {
-	let error = null;
+	let result = null;
 
 	try {
 		const path = `${ NAMESPACE }/connect_manual`;
@@ -184,7 +184,7 @@ export function* connectViaIdAndSecret() {
 
 		yield setManualConnectionIsBusy( true );
 
-		const result = yield apiFetch( {
+		result = yield apiFetch( {
 			path,
 			method: 'POST',
 			data: {
@@ -193,16 +193,16 @@ export function* connectViaIdAndSecret() {
 				useSandbox,
 			},
 		} );
-
-		console.log( 'Manual connection result:', result );
 	} catch ( e ) {
-		error = e;
-		console.error( 'Manual connection failed:', e );
+		result = {
+			success: false,
+			error: e,
+		};
 	} finally {
 		yield setManualConnectionIsBusy( false );
 	}
 
-	return error === null;
+	return result;
 }
 
 /**