Onboarding: Add toggles to configured payments in task list (https://github.com/woocommerce/woocommerce-admin/pull/3801)
* Add isConfigured property to all payment methods * Remove payment configuration checks from server side * Add isEnabled flags to all payment methods * Add payment method toggle methods * Extract payment methods * Fix update options selectors * Add error handling for payment method updates * Remove configured from saved option * Add event when payment is toggled * Check if payment option exists before checking config * Only fetch PayPal connection URL when plugin is active * Only fetch Stripe connection URL when plugin is active
This commit is contained in:
Joshua T Flowers
GitHub
parent
b8aee0f93b
commit
6c4c8fb7c1
|
|
@ -2,9 +2,8 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Fragment, cloneElement, Component } from '@wordpress/element';
|
||||
import { cloneElement, Component } from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { get, filter } from 'lodash';
|
||||
import { Button, FormToggle } from '@wordpress/components';
|
||||
import { withDispatch } from '@wordpress/data';
|
||||
|
||||
|
|
@ -17,10 +16,6 @@ import {
|
|||
getNewPath,
|
||||
updateQueryString,
|
||||
} from '@woocommerce/navigation';
|
||||
import {
|
||||
WC_ASSET_URL as wcAssetUrl,
|
||||
getSetting,
|
||||
} from '@woocommerce/wc-admin-settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -29,16 +24,21 @@ import { recordEvent } from 'lib/tracks';
|
|||
import { getCountryCode } from 'dashboard/utils';
|
||||
import withSelect from 'wc-api/with-select';
|
||||
import Plugins from '../steps/plugins';
|
||||
import Stripe from './stripe';
|
||||
import Square from './square';
|
||||
import PayPal from './paypal';
|
||||
import { pluginNames } from 'wc-api/onboarding/constants';
|
||||
import Klarna from './klarna';
|
||||
import PayFast from './payfast';
|
||||
import { getPaymentMethods } from './methods';
|
||||
|
||||
class Payments extends Component {
|
||||
constructor() {
|
||||
constructor( props ) {
|
||||
super( ...arguments );
|
||||
const { methods } = props;
|
||||
|
||||
const enabledMethods = {};
|
||||
methods.forEach(
|
||||
( method ) => ( enabledMethods[ method.key ] = method.isEnabled )
|
||||
);
|
||||
this.state = {
|
||||
enabledMethods,
|
||||
};
|
||||
|
||||
this.recommendedMethod = 'stripe';
|
||||
this.completeTask = this.completeTask.bind( this );
|
||||
|
|
@ -46,18 +46,43 @@ class Payments extends Component {
|
|||
this.skipTask = this.skipTask.bind( this );
|
||||
}
|
||||
|
||||
componentDidUpdate( prevProps ) {
|
||||
const { createNotice, errors, methods, requesting } = this.props;
|
||||
|
||||
methods.forEach( ( method ) => {
|
||||
const { key, title } = method;
|
||||
if (
|
||||
prevProps.requesting[ key ] &&
|
||||
! requesting[ key ] &&
|
||||
errors[ key ]
|
||||
) {
|
||||
createNotice(
|
||||
'error',
|
||||
sprintf(
|
||||
__(
|
||||
'There was a problem updating settings for %s',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
title
|
||||
)
|
||||
);
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
completeTask() {
|
||||
const { configured, createNotice, options, updateOptions } = this.props;
|
||||
const { createNotice, methods, updateOptions } = this.props;
|
||||
|
||||
updateOptions( {
|
||||
woocommerce_task_list_payments: {
|
||||
...options.woocommerce_task_list_payments,
|
||||
completed: 1,
|
||||
},
|
||||
} );
|
||||
|
||||
recordEvent( 'tasklist_payment_done', {
|
||||
configured,
|
||||
configured: methods
|
||||
.filter( ( method ) => method.isConfigured )
|
||||
.map( ( method ) => method.key ),
|
||||
} );
|
||||
|
||||
createNotice(
|
||||
|
|
@ -72,199 +97,36 @@ class Payments extends Component {
|
|||
}
|
||||
|
||||
skipTask() {
|
||||
const { options, updateOptions } = this.props;
|
||||
const { methods, updateOptions } = this.props;
|
||||
|
||||
updateOptions( {
|
||||
woocommerce_task_list_payments: {
|
||||
...options.woocommerce_task_list_payments,
|
||||
completed: 1,
|
||||
},
|
||||
} );
|
||||
|
||||
recordEvent( 'tasklist_payment_skip_task', {
|
||||
options: this.getMethodOptions().map( ( method ) => method.key ),
|
||||
options: methods.map( ( method ) => method.key ),
|
||||
} );
|
||||
|
||||
getHistory().push( getNewPath( {}, '/', {} ) );
|
||||
}
|
||||
|
||||
isStripeEnabled() {
|
||||
const { countryCode } = this.props;
|
||||
const stripeCountries = getSetting( 'onboarding', {
|
||||
stripeSupportedCountries: [],
|
||||
} ).stripeSupportedCountries;
|
||||
return stripeCountries.includes( countryCode );
|
||||
}
|
||||
|
||||
markConfigured( method ) {
|
||||
const { options, configured, updateOptions } = this.props;
|
||||
|
||||
getHistory().push( getNewPath( { task: 'payments' }, '/', {} ) );
|
||||
|
||||
if ( configured.includes( method ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
recordEvent( 'tasklist_payment_connect_method', {
|
||||
payment_method: method,
|
||||
} );
|
||||
|
||||
configured.push( method );
|
||||
updateOptions( {
|
||||
woocommerce_task_list_payments: {
|
||||
...options.woocommerce_task_list_payments,
|
||||
configured,
|
||||
},
|
||||
} );
|
||||
}
|
||||
|
||||
getMethodOptions() {
|
||||
const { countryCode, profileItems } = this.props;
|
||||
|
||||
const methods = [
|
||||
{
|
||||
key: 'stripe',
|
||||
title: __(
|
||||
'Credit cards - powered by Stripe',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'Accept debit and credit cards in 135+ currencies, methods such as Alipay, ' +
|
||||
'and one-touch checkout with Apple Pay.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <img src={ wcAssetUrl + 'images/stripe.png' } alt="" />,
|
||||
visible: this.isStripeEnabled(),
|
||||
plugins: [ 'woocommerce-gateway-stripe' ],
|
||||
container: <Stripe markConfigured={ this.markConfigured } />,
|
||||
},
|
||||
{
|
||||
key: 'paypal',
|
||||
title: __( 'PayPal Checkout', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
"Safe and secure payments using credit cards or your customer's PayPal account.",
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <img src={ wcAssetUrl + 'images/paypal.png' } alt="" />,
|
||||
visible: true,
|
||||
plugins: [ 'woocommerce-gateway-paypal-express-checkout' ],
|
||||
container: <PayPal markConfigured={ this.markConfigured } />,
|
||||
},
|
||||
{
|
||||
key: 'klarna_checkout',
|
||||
title: __( 'Klarna Checkout', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/klarna-black.png' }
|
||||
alt=""
|
||||
/>
|
||||
),
|
||||
visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
|
||||
plugins: [ 'klarna-checkout-for-woocommerce' ],
|
||||
container: (
|
||||
<Klarna
|
||||
markConfigured={ this.markConfigured }
|
||||
plugin={ 'checkout' }
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'klarna_payments',
|
||||
title: __( 'Klarna Payments', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/klarna-black.png' }
|
||||
alt=""
|
||||
/>
|
||||
),
|
||||
visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
|
||||
plugins: [ 'klarna-payments-for-woocommerce' ],
|
||||
container: (
|
||||
<Klarna
|
||||
markConfigured={ this.markConfigured }
|
||||
plugin={ 'payments' }
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'square',
|
||||
title: __( 'Square', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
|
||||
'Sell online and in store and track sales and inventory in one place.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/square-black.png' }
|
||||
alt=""
|
||||
/>
|
||||
),
|
||||
visible:
|
||||
[ 'brick-mortar', 'brick-mortar-other' ].includes(
|
||||
profileItems.selling_venues
|
||||
) &&
|
||||
[ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
|
||||
plugins: [ 'woocommerce-square' ],
|
||||
container: <Square markConfigured={ this.markConfigured } />,
|
||||
},
|
||||
{
|
||||
key: 'payfast',
|
||||
title: __( 'PayFast', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
<p>
|
||||
{ __(
|
||||
'Selecting this extension will configure your store to use South African rands as the selected currency.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</p>
|
||||
</Fragment>
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/payfast.png' }
|
||||
alt="PayFast logo"
|
||||
/>
|
||||
),
|
||||
visible: [ 'ZA' ].includes( countryCode ),
|
||||
plugins: [ 'woocommerce-payfast-gateway' ],
|
||||
container: <PayFast markConfigured={ this.markConfigured } />,
|
||||
},
|
||||
];
|
||||
|
||||
return filter( methods, ( method ) => method.visible );
|
||||
}
|
||||
|
||||
getCurrentMethod() {
|
||||
const { query } = this.props;
|
||||
const { methods, query } = this.props;
|
||||
|
||||
if ( ! query.method ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const methods = this.getMethodOptions();
|
||||
|
||||
return methods.find( ( method ) => method.key === query.method );
|
||||
}
|
||||
|
||||
|
|
@ -304,9 +166,34 @@ class Payments extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
toggleMethod( key ) {
|
||||
const { methods, options, updateOptions } = this.props;
|
||||
const { enabledMethods } = this.state;
|
||||
const method = methods.find( ( option ) => option.key === key );
|
||||
|
||||
enabledMethods[ key ] = ! enabledMethods[ key ];
|
||||
this.setState( { enabledMethods } );
|
||||
|
||||
recordEvent( 'tasklist_payment_toggle', {
|
||||
enabled: ! method.isEnabled,
|
||||
payment_method: key,
|
||||
} );
|
||||
|
||||
updateOptions( {
|
||||
[ method.optionName ]: {
|
||||
...options[ method.optionName ],
|
||||
enabled: method.isEnabled ? 'no' : 'yes',
|
||||
},
|
||||
} );
|
||||
}
|
||||
|
||||
render() {
|
||||
const currentMethod = this.getCurrentMethod();
|
||||
const { configured, query } = this.props;
|
||||
const { methods, query } = this.props;
|
||||
const { enabledMethods } = this.state;
|
||||
const configuredMethods = methods.filter(
|
||||
( method ) => method.isConfigured
|
||||
).length;
|
||||
|
||||
if ( currentMethod ) {
|
||||
return (
|
||||
|
|
@ -314,13 +201,12 @@ class Payments extends Component {
|
|||
{ cloneElement( currentMethod.container, {
|
||||
query,
|
||||
installStep: this.getInstallStep(),
|
||||
markConfigured: this.markConfigured,
|
||||
} ) }
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const methods = this.getMethodOptions();
|
||||
|
||||
return (
|
||||
<div className="woocommerce-task-payments">
|
||||
{ methods.map( ( method ) => {
|
||||
|
|
@ -328,6 +214,7 @@ class Payments extends Component {
|
|||
before,
|
||||
container,
|
||||
content,
|
||||
isConfigured,
|
||||
key,
|
||||
title,
|
||||
visible,
|
||||
|
|
@ -344,7 +231,7 @@ class Payments extends Component {
|
|||
>
|
||||
<div className="woocommerce-task-payment__before">
|
||||
{ key === this.recommendedMethod &&
|
||||
! configured.includes( key ) && (
|
||||
! isConfigured && (
|
||||
<div className="woocommerce-task-payment__recommended-ribbon">
|
||||
<span>
|
||||
{ __(
|
||||
|
|
@ -365,7 +252,7 @@ class Payments extends Component {
|
|||
</p>
|
||||
</div>
|
||||
<div className="woocommerce-task-payment__after">
|
||||
{ container ? (
|
||||
{ container && ! isConfigured ? (
|
||||
<Button
|
||||
isPrimary={
|
||||
key === this.recommendedMethod
|
||||
|
|
@ -377,7 +264,7 @@ class Payments extends Component {
|
|||
recordEvent(
|
||||
'tasklist_payment_setup',
|
||||
{
|
||||
options: this.getMethodOptions().map(
|
||||
options: methods.map(
|
||||
( option ) => option.key
|
||||
),
|
||||
selected: key,
|
||||
|
|
@ -391,14 +278,20 @@ class Payments extends Component {
|
|||
{ __( 'Set up', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
) : (
|
||||
<FormToggle />
|
||||
<FormToggle
|
||||
checked={ enabledMethods[ key ] }
|
||||
onChange={ () =>
|
||||
this.toggleMethod( key )
|
||||
}
|
||||
onClick={ ( e ) => e.stopPropagation() }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
} ) }
|
||||
<div className="woocommerce-task-payments__actions">
|
||||
{ configured.length === 0 ? (
|
||||
{ configuredMethods.length === 0 ? (
|
||||
<Button isLink onClick={ this.skipTask }>
|
||||
{ __(
|
||||
'My store doesn’t take payments',
|
||||
|
|
@ -418,30 +311,56 @@ class Payments extends Component {
|
|||
|
||||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { getProfileItems, getActivePlugins, getOptions } = select(
|
||||
'wc-api'
|
||||
);
|
||||
const {
|
||||
getProfileItems,
|
||||
getActivePlugins,
|
||||
getOptions,
|
||||
getUpdateOptionsError,
|
||||
isUpdateOptionsRequesting,
|
||||
} = select( 'wc-api' );
|
||||
|
||||
const activePlugins = getActivePlugins();
|
||||
const profileItems = getProfileItems();
|
||||
const options = getOptions( [
|
||||
'woocommerce_task_list_payments',
|
||||
'woocommerce_default_country',
|
||||
'woocommerce_stripe_settings',
|
||||
'woocommerce_ppec_paypal_settings',
|
||||
'woocommerce_payfast_settings',
|
||||
'woocommerce_square_credit_card_settings',
|
||||
'woocommerce_klarna_payments_settings',
|
||||
'woocommerce_kco_settings',
|
||||
'wc_square_refresh_tokens',
|
||||
] );
|
||||
const countryCode = getCountryCode(
|
||||
options.woocommerce_default_country
|
||||
);
|
||||
|
||||
const configured = get(
|
||||
const methods = getPaymentMethods( {
|
||||
activePlugins,
|
||||
countryCode,
|
||||
options,
|
||||
[ 'woocommerce_task_list_payments', 'configured' ],
|
||||
[]
|
||||
profileItems,
|
||||
} );
|
||||
|
||||
const errors = {};
|
||||
const requesting = {};
|
||||
methods.forEach( ( method ) => {
|
||||
errors[ method.key ] = Boolean(
|
||||
getUpdateOptionsError( [ method.optionName ] )
|
||||
);
|
||||
requesting[ method.key ] = Boolean(
|
||||
isUpdateOptionsRequesting( [ method.optionName ] )
|
||||
);
|
||||
} );
|
||||
|
||||
return {
|
||||
countryCode,
|
||||
profileItems: getProfileItems(),
|
||||
activePlugins: getActivePlugins(),
|
||||
errors,
|
||||
profileItems,
|
||||
activePlugins,
|
||||
options,
|
||||
configured,
|
||||
methods,
|
||||
requesting,
|
||||
};
|
||||
} ),
|
||||
withDispatch( ( dispatch ) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Fragment } from '@wordpress/element';
|
||||
import { filter } from 'lodash';
|
||||
|
||||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import {
|
||||
getSetting,
|
||||
WC_ASSET_URL as wcAssetUrl,
|
||||
} from '@woocommerce/wc-admin-settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Stripe from './stripe';
|
||||
import Square from './square';
|
||||
import PayPal from './paypal';
|
||||
import Klarna from './klarna';
|
||||
import PayFast from './payfast';
|
||||
|
||||
export function getPaymentMethods( {
|
||||
activePlugins,
|
||||
countryCode,
|
||||
options,
|
||||
profileItems,
|
||||
} ) {
|
||||
const stripeCountries = getSetting( 'onboarding', {
|
||||
stripeSupportedCountries: [],
|
||||
} ).stripeSupportedCountries;
|
||||
|
||||
const methods = [
|
||||
{
|
||||
key: 'stripe',
|
||||
title: __(
|
||||
'Credit cards - powered by Stripe',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'Accept debit and credit cards in 135+ currencies, methods such as Alipay, ' +
|
||||
'and one-touch checkout with Apple Pay.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <img src={ wcAssetUrl + 'images/stripe.png' } alt="" />,
|
||||
visible: stripeCountries.includes( countryCode ),
|
||||
plugins: [ 'woocommerce-gateway-stripe' ],
|
||||
container: <Stripe />,
|
||||
isConfigured:
|
||||
options.woocommerce_stripe_settings &&
|
||||
options.woocommerce_stripe_settings.publishable_key &&
|
||||
options.woocommerce_stripe_settings.secret_key,
|
||||
isEnabled:
|
||||
options.woocommerce_stripe_settings &&
|
||||
options.woocommerce_stripe_settings.enabled === 'yes',
|
||||
optionName: 'woocommerce_stripe_settings',
|
||||
},
|
||||
{
|
||||
key: 'paypal',
|
||||
title: __( 'PayPal Checkout', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
"Safe and secure payments using credit cards or your customer's PayPal account.",
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Fragment>
|
||||
),
|
||||
before: <img src={ wcAssetUrl + 'images/paypal.png' } alt="" />,
|
||||
visible: true,
|
||||
plugins: [ 'woocommerce-gateway-paypal-express-checkout' ],
|
||||
container: <PayPal />,
|
||||
isConfigured:
|
||||
options.woocommerce_ppec_paypal_settings &&
|
||||
options.woocommerce_ppec_paypal_settings.api_username &&
|
||||
options.woocommerce_ppec_paypal_settings.api_password,
|
||||
isEnabled:
|
||||
options.woocommerce_ppec_paypal_settings &&
|
||||
options.woocommerce_ppec_paypal_settings.enabled === 'yes',
|
||||
optionName: 'woocommerce_ppec_paypal_settings',
|
||||
},
|
||||
{
|
||||
key: 'klarna_checkout',
|
||||
title: __( 'Klarna Checkout', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img src={ wcAssetUrl + 'images/klarna-black.png' } alt="" />
|
||||
),
|
||||
visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
|
||||
plugins: [ 'klarna-checkout-for-woocommerce' ],
|
||||
container: <Klarna plugin={ 'checkout' } />,
|
||||
// @todo This should check actual Klarna connection information.
|
||||
isConfigured: activePlugins.includes(
|
||||
'klarna-checkout-for-woocommerce'
|
||||
),
|
||||
isEnabled:
|
||||
options.woocommerce_kco_settings &&
|
||||
options.woocommerce_kco_settings.enabled === 'yes',
|
||||
optionName: 'woocommerce_kco_settings',
|
||||
},
|
||||
{
|
||||
key: 'klarna_payments',
|
||||
title: __( 'Klarna Payments', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img src={ wcAssetUrl + 'images/klarna-black.png' } alt="" />
|
||||
),
|
||||
visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
|
||||
plugins: [ 'klarna-payments-for-woocommerce' ],
|
||||
container: <Klarna plugin={ 'payments' } />,
|
||||
// @todo This should check actual Klarna connection information.
|
||||
isConfigured: activePlugins.includes(
|
||||
'klarna-payments-for-woocommerce'
|
||||
),
|
||||
isEnabled:
|
||||
options.woocommerce_klarna_payments_settings &&
|
||||
options.woocommerce_klarna_payments_settings.enabled === 'yes',
|
||||
optionName: 'woocommerce_klarna_payments_settings',
|
||||
},
|
||||
{
|
||||
key: 'square',
|
||||
title: __( 'Square', 'woocommerce-admin' ),
|
||||
content: __(
|
||||
'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
|
||||
'Sell online and in store and track sales and inventory in one place.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
before: (
|
||||
<img src={ wcAssetUrl + 'images/square-black.png' } alt="" />
|
||||
),
|
||||
visible:
|
||||
[ 'brick-mortar', 'brick-mortar-other' ].includes(
|
||||
profileItems.selling_venues
|
||||
) && [ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
|
||||
plugins: [ 'woocommerce-square' ],
|
||||
container: <Square />,
|
||||
isConfigured:
|
||||
options.wc_square_refresh_tokens &&
|
||||
options.wc_square_refresh_tokens.length,
|
||||
isEnabled:
|
||||
options.woocommerce_square_credit_card_settings &&
|
||||
options.woocommerce_square_credit_card_settings.enabled ===
|
||||
'yes',
|
||||
optionName: 'woocommerce_square_credit_card_settings',
|
||||
},
|
||||
{
|
||||
key: 'payfast',
|
||||
title: __( 'PayFast', 'woocommerce-admin' ),
|
||||
content: (
|
||||
<Fragment>
|
||||
{ __(
|
||||
'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
<p>
|
||||
{ __(
|
||||
'Selecting this extension will configure your store to use South African rands as the selected currency.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</p>
|
||||
</Fragment>
|
||||
),
|
||||
before: (
|
||||
<img
|
||||
src={ wcAssetUrl + 'images/payfast.png' }
|
||||
alt="PayFast logo"
|
||||
/>
|
||||
),
|
||||
visible: [ 'ZA' ].includes( countryCode ),
|
||||
plugins: [ 'woocommerce-payfast-gateway' ],
|
||||
container: <PayFast />,
|
||||
isConfigured:
|
||||
options.woocommerce_payfast_settings &&
|
||||
options.woocommerce_payfast_settings.merchant_id &&
|
||||
options.woocommerce_payfast_settings.merchant_key &&
|
||||
options.woocommerce_payfast_settings.pass_phrase,
|
||||
isEnabled:
|
||||
options.woocommerce_payfast_settings &&
|
||||
options.woocommerce_payfast_settings.enabled === 'yes',
|
||||
optionName: 'woocommerce_payfast_settings',
|
||||
},
|
||||
];
|
||||
|
||||
return filter( methods, ( method ) => method.visible );
|
||||
}
|
||||
|
|
@ -31,7 +31,6 @@ class PayPal extends Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { autoConnectFailed } = this.state;
|
||||
const { createNotice, markConfigured } = this.props;
|
||||
|
||||
const query = getQuery();
|
||||
|
|
@ -54,12 +53,35 @@ class PayPal extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
if ( ! autoConnectFailed ) {
|
||||
this.fetchOAuthConnectURL();
|
||||
}
|
||||
|
||||
componentDidUpdate( prevProps ) {
|
||||
const { activePlugins } = this.props;
|
||||
|
||||
if (
|
||||
! prevProps.activePlugins.includes(
|
||||
'woocommerce-gateway-paypal-express-checkout'
|
||||
) &&
|
||||
activePlugins.includes(
|
||||
'woocommerce-gateway-paypal-express-checkout'
|
||||
)
|
||||
) {
|
||||
this.fetchOAuthConnectURL();
|
||||
}
|
||||
}
|
||||
|
||||
async fetchOAuthConnectURL() {
|
||||
const { activePlugins } = this.props;
|
||||
|
||||
if (
|
||||
! activePlugins.includes(
|
||||
'woocommerce-gateway-paypal-express-checkout'
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState( { isPending: true } );
|
||||
try {
|
||||
const result = await apiFetch( {
|
||||
|
|
@ -268,13 +290,17 @@ PayPal.defaultProps = {
|
|||
|
||||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { getOptions, isGetOptionsRequesting } = select( 'wc-api' );
|
||||
const { getActivePlugins, getOptions, isGetOptionsRequesting } = select(
|
||||
'wc-api'
|
||||
);
|
||||
const options = getOptions( [ 'woocommerce_ppec_paypal_settings' ] );
|
||||
const isOptionsRequesting = Boolean(
|
||||
isGetOptionsRequesting( [ 'woocommerce_ppec_paypal_settings' ] )
|
||||
);
|
||||
const activePlugins = getActivePlugins();
|
||||
|
||||
return {
|
||||
activePlugins,
|
||||
options,
|
||||
isOptionsRequesting,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ class Stripe extends Component {
|
|||
|
||||
componentDidUpdate( prevProps ) {
|
||||
const {
|
||||
activePlugins,
|
||||
createNotice,
|
||||
isOptionsRequesting,
|
||||
hasOptionsError,
|
||||
|
|
@ -86,6 +87,15 @@ class Stripe extends Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
! prevProps.activePlugins.includes(
|
||||
'woocommerce-gateway-stripe'
|
||||
) &&
|
||||
activePlugins.includes( 'woocommerce-gateway-stripe' )
|
||||
) {
|
||||
this.fetchOAuthConnectURL();
|
||||
}
|
||||
}
|
||||
|
||||
requiresManualConfig() {
|
||||
|
|
@ -113,6 +123,11 @@ class Stripe extends Component {
|
|||
}
|
||||
|
||||
async fetchOAuthConnectURL() {
|
||||
const { activePlugins } = this.props;
|
||||
if ( ! activePlugins.includes( 'woocommerce-gateway-stripe' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setState( { isPending: true } );
|
||||
const result = await apiFetch( {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function updateOptions( resourceNames, data, fetch ) {
|
|||
} )
|
||||
.then( () => optionsToResource( data[ resourceName ], true ) )
|
||||
.catch( ( error ) => {
|
||||
return { [ resourceName ]: { error } };
|
||||
return { [ resourceName ]: { data: {}, error } };
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,11 @@ const getOptionsError = ( getResource ) => ( optionNames ) => {
|
|||
return getResource( getResourceName( 'options', optionNames ) ).error;
|
||||
};
|
||||
|
||||
const getUpdateOptionsError = ( getResource ) => ( optionNames ) => {
|
||||
return getResource( getResourceName( 'options-update', optionNames ) )
|
||||
.error;
|
||||
};
|
||||
|
||||
const isGetOptionsRequesting = ( getResource ) => ( optionNames ) => {
|
||||
const { lastReceived, lastRequested } = getResource(
|
||||
getResourceName( 'options', optionNames )
|
||||
|
|
@ -70,6 +75,7 @@ const isUpdateOptionsRequesting = ( getResource ) => ( optionNames ) => {
|
|||
export default {
|
||||
getOptions,
|
||||
getOptionsError,
|
||||
getUpdateOptionsError,
|
||||
isGetOptionsRequesting,
|
||||
isUpdateOptionsRequesting,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -492,7 +492,13 @@ class Onboarding {
|
|||
$options[] = 'woocommerce_task_list_payments';
|
||||
$options[] = 'woocommerce_allow_tracking';
|
||||
$options[] = 'woocommerce_stripe_settings';
|
||||
$options[] = 'woocommerce_ppec_paypal_settings';
|
||||
$options[] = 'wc_square_refresh_tokens';
|
||||
$options[] = 'woocommerce_square_credit_card_settings';
|
||||
$options[] = 'woocommerce_payfast_settings';
|
||||
$options[] = 'woocommerce_default_country';
|
||||
$options[] = 'woocommerce_kco_settings';
|
||||
$options[] = 'woocommerce_klarna_payments_settings';
|
||||
|
||||
return $options;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,92 +64,6 @@ class OnboardingTasks {
|
|||
add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_tax_notice_admin_script' ) );
|
||||
add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_product_import_notice_admin_script' ) );
|
||||
add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_menu_experience_script' ) );
|
||||
|
||||
// Update payment cache on payment gateways update.
|
||||
add_action( 'update_option_woocommerce_stripe_settings', array( $this, 'check_stripe_completion' ), 10, 2 );
|
||||
add_action( 'add_option_woocommerce_stripe_settings', array( $this, 'check_stripe_completion' ), 10, 2 );
|
||||
add_action( 'update_option_woocommerce_ppec_paypal_settings', array( $this, 'check_paypal_completion' ), 10, 2 );
|
||||
add_action( 'add_option_woocommerce_ppec_paypal_settings', array( $this, 'check_paypal_completion' ), 10, 2 );
|
||||
add_action( 'add_option_wc_square_refresh_tokens', array( $this, 'check_square_completion' ), 10, 2 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if Square payment settings are complete.
|
||||
*
|
||||
* @param string $option Option name.
|
||||
* @param array $value Current value.
|
||||
*/
|
||||
public static function check_square_completion( $option, $value ) {
|
||||
if ( empty( $value ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
self::mark_payment_method_configured( 'square' );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Check if Paypal payment settings are complete.
|
||||
*
|
||||
* @param mixed $old_value Old value.
|
||||
* @param array $value Current value.
|
||||
*/
|
||||
public static function check_paypal_completion( $old_value, $value ) {
|
||||
if (
|
||||
! isset( $value['enabled'] ) ||
|
||||
'yes' !== $value['enabled'] ||
|
||||
! isset( $value['api_username'] ) ||
|
||||
empty( $value['api_username'] ) ||
|
||||
! isset( $value['api_password'] ) ||
|
||||
empty( $value['api_password'] )
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
self::mark_payment_method_configured( 'paypal' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if Stripe payment settings are complete.
|
||||
*
|
||||
* @param mixed $old_value Old value.
|
||||
* @param array $value Current value.
|
||||
*/
|
||||
public static function check_stripe_completion( $old_value, $value ) {
|
||||
if (
|
||||
! isset( $value['enabled'] ) ||
|
||||
'yes' !== $value['enabled'] ||
|
||||
! isset( $value['publishable_key'] ) ||
|
||||
empty( $value['publishable_key'] ) ||
|
||||
! isset( $value['secret_key'] ) ||
|
||||
empty( $value['secret_key'] )
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
self::mark_payment_method_configured( 'stripe' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the payments cache to complete if not already.
|
||||
*
|
||||
* @param string $payment_method Payment method slug.
|
||||
*/
|
||||
public static function mark_payment_method_configured( $payment_method ) {
|
||||
$task_list_payments = get_option( 'woocommerce_task_list_payments', array() );
|
||||
$payment_methods = isset( $task_list_payments['methods'] ) ? $task_list_payments['methods'] : array();
|
||||
$configured_payment_methods = isset( $task_list_payments['configured'] ) ? $task_list_payments['configured'] : array();
|
||||
|
||||
if ( ! in_array( $payment_method, $configured_payment_methods, true ) ) {
|
||||
$configured_payment_methods[] = $payment_method;
|
||||
$task_list_payments['configured'] = $configured_payment_methods;
|
||||
}
|
||||
|
||||
if ( 0 === count( array_diff( $payment_methods, $configured_payment_methods ) ) ) {
|
||||
$task_list_payments['completed'] = 1;
|
||||
}
|
||||
|
||||
update_option( 'woocommerce_task_list_payments', $task_list_payments );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -201,8 +115,8 @@ class OnboardingTasks {
|
|||
* Temporarily store the active task to persist across page loads when neccessary (such as publishing a product). Most tasks do not need to do this.
|
||||
*/
|
||||
public static function set_active_task() {
|
||||
if ( isset( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ) { // WPCS: csrf ok.
|
||||
$task = sanitize_title_with_dashes( wp_unslash( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) );
|
||||
if ( isset( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ) { // phpcs:ignore csrf ok.
|
||||
$task = sanitize_title_with_dashes( wp_unslash( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ); // phpcs:ignore csrf ok.
|
||||
|
||||
if ( self::check_task_completion( $task ) ) {
|
||||
return;
|
||||
|
|
@ -212,7 +126,7 @@ class OnboardingTasks {
|
|||
self::ACTIVE_TASK_TRANSIENT,
|
||||
$task,
|
||||
DAY_IN_SECONDS
|
||||
); // WPCS: csrf ok.
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue