Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Daniel Rey López 2020-06-04 10:36:57 +01:00 committed by GitHub
parent 7f8149563b
commit 479817cdad
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
plugins/woocommerce-admin/client/task-list/tasks/payments/index.js
View File

@ -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',