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, enabledMethods,
}; };
this.recommendedMethod = 'stripe';
methods.forEach( ( method ) => {
if ( method.key === 'wcpay' && method.visible ) {
this.recommendedMethod = 'wcpay';
}
} );
this.completeTask = this.completeTask.bind( this ); this.completeTask = this.completeTask.bind( this );
this.markConfigured = this.markConfigured.bind( this ); this.markConfigured = this.markConfigured.bind( this );
this.skipTask = this.skipTask.bind( this ); this.skipTask = this.skipTask.bind( this );
} }
componentDidUpdate( prevProps ) { componentDidUpdate( prevProps ) {
if ( prevProps === this.props ) {
return;
}
const { createNotice, errors, methods, requesting } = this.props; const { createNotice, errors, methods, requesting } = this.props;
let recommendedMethod = 'stripe';
methods.forEach( ( method ) => { methods.forEach( ( method ) => {
const { key, title } = method; const { key, title, visible } = method;
if ( key === 'wcpay' && visible ) {
recommendedMethod = 'wcpay';
}
if ( if (
prevProps.requesting[ key ] && prevProps.requesting[ key ] &&
! requesting[ key ] && ! requesting[ key ] &&
@ -78,6 +80,12 @@ class Payments extends Component {
); );
} }
} ); } );
if ( this.state.recommendedMethod !== recommendedMethod ) {
this.setState( {
recommendedMethod,
} );
}
} }
completeTask() { completeTask() {
@ -211,7 +219,7 @@ class Payments extends Component {
render() { render() {
const currentMethod = this.getCurrentMethod(); const currentMethod = this.getCurrentMethod();
const { methods, query } = this.props; const { methods, query } = this.props;
const { enabledMethods } = this.state; const { enabledMethods, recommendedMethod } = this.state;
const configuredMethods = methods.filter( const configuredMethods = methods.filter(
( method ) => method.isConfigured ( method ) => method.isConfigured
).length; ).length;
@ -255,11 +263,11 @@ class Payments extends Component {
); );
const isRecommended = const isRecommended =
key === this.recommendedMethod && ! isConfigured; key === recommendedMethod && ! isConfigured;
const showRecommendedRibbon = const showRecommendedRibbon =
isRecommended && this.recommendedMethod !== 'wcpay'; isRecommended && key !== 'wcpay';
const showRecommendedPill = const showRecommendedPill =
isRecommended && this.recommendedMethod === 'wcpay'; isRecommended && key === 'wcpay';
return ( return (
<Card key={ key } className={ classes }> <Card key={ key } className={ classes }>
@ -295,12 +303,8 @@ class Payments extends Component {
<div className="woocommerce-task-payment__after"> <div className="woocommerce-task-payment__after">
{ container && ! isConfigured ? ( { container && ! isConfigured ? (
<Button <Button
isPrimary={ isPrimary={ key === recommendedMethod }
key === this.recommendedMethod isDefault={ key !== recommendedMethod }
}
isDefault={
key !== this.recommendedMethod
}
onClick={ () => { onClick={ () => {
recordEvent( recordEvent(
'tasklist_payment_setup', 'tasklist_payment_setup',