diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
index 032b85c327a..78a2c35dbac 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
@@ -7,6 +7,7 @@ import {
OPTIONS_STORE_NAME,
ONBOARDING_STORE_NAME,
PAYMENT_GATEWAYS_STORE_NAME,
+ SETTINGS_STORE_NAME,
} from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { useMemo, useCallback, useEffect } from '@wordpress/element';
@@ -24,6 +25,7 @@ import { Setup, Placeholder as SetupPlaceholder } from './components/Setup';
import { Toggle } from './components/Toggle/Toggle';
import { WCPaySuggestion } from './components/WCPay';
import { getPluginSlug } from '~/utils';
+import { getCountryCode } from '~/dashboard/utils';
import './plugins/Bacs';
import './payment-gateway-suggestions.scss';
@@ -40,7 +42,10 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
paymentGatewaySuggestions,
installedPaymentGateways,
isResolving,
+ countryCode,
} = useSelect( ( select ) => {
+ const { getSettings } = select( SETTINGS_STORE_NAME );
+ const { general: settings = {} } = getSettings( 'general' );
return {
getPaymentGateway: select( PAYMENT_GATEWAYS_STORE_NAME )
.getPaymentGateway,
@@ -54,6 +59,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
paymentGatewaySuggestions: select(
ONBOARDING_STORE_NAME
).getPaymentGatewaySuggestions(),
+ countryCode: getCountryCode( settings.woocommerce_default_country ),
};
}, [] );
@@ -185,6 +191,37 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
return gateway;
}, [ isResolving, query, paymentGateways ] );
+ const isWCPayOrOtherCategory = useMemo( () => {
+ for ( const [ , gateway ] of paymentGateways.entries() ) {
+ if ( ! gateway.installed || gateway.needsSetup ) {
+ continue;
+ }
+
+ if (
+ gateway.plugins?.length === 1 &&
+ gateway.plugins[ 0 ] === 'woocommerce-payments'
+ ) {
+ return true;
+ }
+
+ if (
+ gateway.category_other &&
+ gateway.category_other.indexOf( countryCode ) !== -1
+ ) {
+ return true;
+ }
+ }
+ return false;
+ }, [ countryCode, paymentGateways ] );
+
+ const isEligibleWCPay =
+ Array.from( paymentGateways.values() ).findIndex( ( gateway ) => {
+ return (
+ gateway.plugins?.length === 1 &&
+ gateway.plugins[ 0 ] === 'woocommerce-payments'
+ );
+ } ) !== -1;
+
const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo(
() =>
Array.from( paymentGateways.values() )
@@ -213,6 +250,22 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
wcPay.push( gateway );
} else if ( gateway.is_offline ) {
offline.push( gateway );
+ } else if ( gateway.enabled ) {
+ // Enabled gateways should be ignored.
+ } else if (
+ isEligibleWCPay &&
+ isWCPayOrOtherCategory
+ ) {
+ // If WCPay or "other" gateway is enabled in an WCPay-eligible country, only
+ // allow to list "additional" gateways or the ones without it defined.
+ if (
+ gateway.category_additional &&
+ gateway.category_additional.indexOf(
+ countryCode
+ ) !== -1
+ ) {
+ additional.push( gateway );
+ }
} else {
additional.push( gateway );
}
@@ -221,11 +274,14 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
},
[ [], [], [] ]
),
- [ paymentGateways ]
+ [
+ countryCode,
+ isEligibleWCPay,
+ isWCPayOrOtherCategory,
+ paymentGateways,
+ ]
);
- const isEligibleWCPay = !! wcPayGateway.length;
-
const trackSeeMore = () => {
recordEvent( 'tasklist_payment_see_more', {} );
};
@@ -254,23 +310,24 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
const additionalSection = !! additionalGateways.length && (
- { __( 'See more', 'woocommerce' ) }
-
);
@@ -288,7 +345,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {