diff --git a/plugins/woocommerce-admin/changelogs/update-8242-tweak-flow-after-setting-up-offline-payments b/plugins/woocommerce-admin/changelogs/update-8242-tweak-flow-after-setting-up-offline-payments new file mode 100644 index 00000000000..74b8c532b62 --- /dev/null +++ b/plugins/woocommerce-admin/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 diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 55ba77a1d74..3768665e9aa 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/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' }, + {}, + '/' + ), + } + : {} + ); } ); }; diff --git a/plugins/woocommerce-admin/client/tasks/task.tsx b/plugins/woocommerce-admin/client/tasks/task.tsx index c0374c97b98..5d57bd6b20f 100644 --- a/plugins/woocommerce-admin/client/tasks/task.tsx +++ b/plugins/woocommerce-admin/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 ( <>