Fixing redudant notices when installing plugins via payment task list (https://github.com/woocommerce/woocommerce-admin/pull/7026)

plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js

@@ -12,7 +12,7 @@ import {
 } from '@woocommerce/data';
 import { Plugins, Stepper, WooRemotePayment } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { useSlot } from '@woocommerce/experimental';
 
@@ -92,8 +92,8 @@ export const PaymentMethod = ( {
 		.map( ( pluginSlug ) => pluginNames[ pluginSlug ] )
 		.join( ' ' + __( 'and', 'woocommerce-admin' ) + ' ' );
 
-	const installStep =
-		plugins && plugins.length
+	const installStep = useMemo( () => {
+		return plugins && plugins.length
 			? {
 					key: 'install',
 					label: sprintf(
@@ -122,6 +122,7 @@ export const PaymentMethod = ( {
 					isComplete: ! pluginsToInstall.length,
 			  }
 			: null;
+	}, [ pluginsToInstall.length ] );
 
 	const connectStep = {
 		key: 'connect',
@@ -140,18 +141,22 @@ export const PaymentMethod = ( {
 		) : null,
 	};
 
-	const DefaultStepper = ( props ) => (
-		<Stepper
-			isVertical
-			isPending={
-				! installStep.isComplete ||
-				isOptionsRequesting ||
-				isFetchingPaymentGateway
-			}
-			currentStep={ installStep.isComplete ? 'connect' : 'install' }
-			steps={ [ installStep, connectStep ] }
-			{ ...props }
-		/>
+	const stepperPending =
+		! installStep.isComplete ||
+		isOptionsRequesting ||
+		isFetchingPaymentGateway;
+
+	const DefaultStepper = useCallback(
+		( props ) => (
+			<Stepper
+				isVertical
+				isPending={ stepperPending }
+				currentStep={ installStep.isComplete ? 'connect' : 'install' }
+				steps={ [ installStep, connectStep ] }
+				{ ...props }
+			/>
+		),
+		[ stepperPending, installStep ]
 	);
 
 	return (

plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/index.js

@@ -6,7 +6,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { getHistory, getNewPath } from '@woocommerce/navigation';
 import { OPTIONS_STORE_NAME, ONBOARDING_STORE_NAME } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -90,34 +90,39 @@ export const RemotePayments = ( { query } ) => {
 		[ methods ]
 	);
 
-	const markConfigured = async ( methodKey, queryParams = {} ) => {
-		const method = methods.find( ( option ) => option.key === methodKey );
+	const markConfigured = useCallback(
+		async ( methodKey, queryParams = {} ) => {
+			const method = methods.find(
+				( option ) => option.key === methodKey
+			);
 
-		if ( ! method ) {
-			throw `Method ${ methodKey } not found in available methods list`;
-		}
+			if ( ! method ) {
+				throw `Method ${ methodKey } not found in available methods list`;
+			}
 
-		setEnabledMethods( {
-			...enabledMethods,
-			[ methodKey ]: true,
-		} );
+			setEnabledMethods( {
+				...enabledMethods,
+				[ methodKey ]: true,
+			} );
 
-		enableMethod( method.optionName );
+			enableMethod( method.optionName );
 
-		recordEvent( 'tasklist_payment_connect_method', {
-			payment_method: methodKey,
-		} );
+			recordEvent( 'tasklist_payment_connect_method', {
+				payment_method: methodKey,
+			} );
 
-		getHistory().push(
-			getNewPath( { ...queryParams, task: 'payments' }, '/', {} )
-		);
-	};
+			getHistory().push(
+				getNewPath( { ...queryParams, task: 'payments' }, '/', {} )
+			);
+		},
+		[ enabledMethods, methods ]
+	);
 
-	const recordConnectStartEvent = ( methodName ) => {
+	const recordConnectStartEvent = useCallback( ( methodName ) => {
 		recordEvent( 'tasklist_payment_connect_start', {
 			payment_method: methodName,
 		} );
-	};
+	}, [] );
 
 	const currentMethod = useMemo( () => {
 		if ( ! query.method || isResolving || ! methods.length ) {

plugins/woocommerce-admin/readme.txt

@@ -74,7 +74,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 == Changelog ==
 
 == Unreleased ==
-
+- Fix: Preventing redundant notices when installing plugins via payments task list. #7026
 - Fix: Autocompleter for custom Search in CompareFilter #6911
 - Dev: Converting <SettingsForm /> component to TypeScript. #6981
 - Enhancement: Adding Slotfills for remote payments and SettingsForm component. #6932