Redirect customers back to the payment task after enabling an offline…

… gateway (woocommerce#8389)

* Redirect customers back to the payment task page after enabling an offline payment

* Add changelog

* Make hasPlugins property boolean

* Remove unnecessary type checking

* Fix the comparison logic

changelogs/update-8242-tweak-flow-after-setting-up-offline-payments

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Tweak
+
+Redirect customers back to the payment task after enabling an offline payment gateway #8389

client/tasks/fills/PaymentGatewaySuggestions/index.js

@@ -12,6 +12,7 @@ import { recordEvent } from '@woocommerce/tracks';
 import { useMemo, useCallback, useEffect } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { getNewPath } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -69,7 +70,9 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 			const enrichedSuggestion = {
 				installed: !! mappedPaymentGateways[ id ],
 				postInstallScripts: installedGateway.post_install_scripts,
-				hasPlugins: suggestion.plugins && suggestion.plugins.length,
+				hasPlugins: !! (
+					suggestion.plugins && suggestion.plugins.length
+				),
 				enabled: installedGateway.enabled || false,
 				needsSetup: installedGateway.needs_setup,
 				settingsUrl: installedGateway.settings_url,
@@ -121,7 +124,19 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 		updatePaymentGateway( id, {
 			enabled: true,
 		} ).then( () => {
-			onComplete();
+			onComplete(
+				// use the paymentGateways variable.
+				// gateway variable doesn't have hasPlugins property.
+				! paymentGateways.get( id )?.hasPlugins
+					? {
+							redirectPath: getNewPath(
+								{ task: 'payments' },
+								{},
+								'/'
+							),
+					  }
+					: {}
+			);
 		} );
 	};
 

client/tasks/task.tsx

@@ -26,11 +26,18 @@ export const Task: React.FC< TaskProps > = ( { query, task } ) => {
 		optimisticallyCompleteTask,
 	} = useDispatch( ONBOARDING_STORE_NAME );
 
-	const onComplete = useCallback( () => {
-		optimisticallyCompleteTask( id );
-		getHistory().push( getNewPath( {}, '/', {} ) );
-		invalidateResolutionForStoreSelector( 'getTaskLists' );
-	}, [ id ] );
+	const onComplete = useCallback(
+		( options ) => {
+			optimisticallyCompleteTask( id );
+			getHistory().push(
+				options && options.redirectPath
+					? options.redirectPath
+					: getNewPath( {}, '/', {} )
+			);
+			invalidateResolutionForStoreSelector( 'getTaskLists' );
+		},
+		[ id ]
+	);
 
 	return (
 		<>