From 479817cdadfabb4e1a19644d5060ce21f05495fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Rey=20L=C3=B3pez?=
 <daniel.rey.lopez@automattic.com>
Date: Thu, 4 Jun 2020 10:36:57 +0100
Subject: [PATCH] Fix the WCPay method not appearing as recommended sometimes
 (https://github.com/woocommerce/woocommerce-admin/pull/4345)

* Fix the WCPay method not appearing as recommended sometimes

* Recalculate the recommendedMethod variable only on componentDidUpdate
---
 .../client/task-list/tasks/payments/index.js  | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js
index d196b58872d..a52e1240f0b 100644
--- a/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js
+++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js
@@ -44,23 +44,25 @@ class Payments extends Component {
 			enabledMethods,
 		};
 
-		this.recommendedMethod = 'stripe';
-		methods.forEach( ( method ) => {
-			if ( method.key === 'wcpay' && method.visible ) {
-				this.recommendedMethod = 'wcpay';
-			}
-		} );
-
 		this.completeTask = this.completeTask.bind( this );
 		this.markConfigured = this.markConfigured.bind( this );
 		this.skipTask = this.skipTask.bind( this );
 	}
 
 	componentDidUpdate( prevProps ) {
+		if ( prevProps === this.props ) {
+			return;
+		}
 		const { createNotice, errors, methods, requesting } = this.props;
 
+		let recommendedMethod = 'stripe';
 		methods.forEach( ( method ) => {
-			const { key, title } = method;
+			const { key, title, visible } = method;
+
+			if ( key === 'wcpay' && visible ) {
+				recommendedMethod = 'wcpay';
+			}
+
 			if (
 				prevProps.requesting[ key ] &&
 				! requesting[ key ] &&
@@ -78,6 +80,12 @@ class Payments extends Component {
 				);
 			}
 		} );
+
+		if ( this.state.recommendedMethod !== recommendedMethod ) {
+			this.setState( {
+				recommendedMethod,
+			} );
+		}
 	}
 
 	completeTask() {
@@ -211,7 +219,7 @@ class Payments extends Component {
 	render() {
 		const currentMethod = this.getCurrentMethod();
 		const { methods, query } = this.props;
-		const { enabledMethods } = this.state;
+		const { enabledMethods, recommendedMethod } = this.state;
 		const configuredMethods = methods.filter(
 			( method ) => method.isConfigured
 		).length;
@@ -255,11 +263,11 @@ class Payments extends Component {
 					);
 
 					const isRecommended =
-						key === this.recommendedMethod && ! isConfigured;
+						key === recommendedMethod && ! isConfigured;
 					const showRecommendedRibbon =
-						isRecommended && this.recommendedMethod !== 'wcpay';
+						isRecommended && key !== 'wcpay';
 					const showRecommendedPill =
-						isRecommended && this.recommendedMethod === 'wcpay';
+						isRecommended && key === 'wcpay';
 
 					return (
 						<Card key={ key } className={ classes }>
@@ -295,12 +303,8 @@ class Payments extends Component {
 							<div className="woocommerce-task-payment__after">
 								{ container && ! isConfigured ? (
 									<Button
-										isPrimary={
-											key === this.recommendedMethod
-										}
-										isDefault={
-											key !== this.recommendedMethod
-										}
+										isPrimary={ key === recommendedMethod }
+										isDefault={ key !== recommendedMethod }
 										onClick={ () => {
 											recordEvent(
 												'tasklist_payment_setup',