Correctly detect compatible express payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/8201)

* Remove unused action and type action

* Derive the incompatible payment methods with selector

Instead of adding the incompatiblePaymentMethods to the payment state.
Let's simply derive it using a selector to keep a minimal state.

* Check compatibility with express payments

plugins/woocommerce-blocks/assets/js/data/payment/action-types.ts

@@ -15,6 +15,5 @@ export enum ACTION_TYPES {
 	REMOVE_AVAILABLE_EXPRESS_PAYMENT_METHOD = 'REMOVE_AVAILABLE_EXPRESS_PAYMENT_METHOD',
 	INITIALIZE_PAYMENT_METHODS = 'INITIALIZE_PAYMENT_METHODS',
 	SET_PAYMENT_METHOD_DATA = 'SET_PAYMENT_METHOD_DATA',
-	SET_INCOMPATIBLE_PAYMENT_METHODS = 'SET_INCOMPATIBLE_PAYMENT_METHODS',
 	SET_PAYMENT_RESULT = 'SET_PAYMENT_RESULT',
 }

plugins/woocommerce-blocks/assets/js/data/payment/actions.ts

@@ -113,13 +113,6 @@ export const __internalSetPaymentMethodData = (
 	paymentMethodData,
 } );
 
-export const setIncompatiblePaymentMethods = (
-	incompatiblePaymentMethods: Array< string > = []
-) => ( {
-	type: ACTION_TYPES.SET_INCOMPATIBLE_PAYMENT_METHODS,
-	incompatiblePaymentMethods,
-} );
-
 /**
  * Store the result of the payment attempt from the /checkout StoreApi call
  *

plugins/woocommerce-blocks/assets/js/data/payment/default-state.ts

@@ -1,11 +1,7 @@
 /**
  * External dependencies
  */
-import type {
-	EmptyObjectType,
-	GlobalPaymentMethod,
-	PaymentResult,
-} from '@woocommerce/types';
+import type { EmptyObjectType, PaymentResult } from '@woocommerce/types';
 import { getSetting } from '@woocommerce/settings';
 import {
 	PlainPaymentMethods,
@@ -30,20 +26,10 @@ export interface PaymentState {
 		| EmptyObjectType;
 	paymentMethodData: Record< string, unknown >;
 	paymentResult: PaymentResult | null;
-	incompatiblePaymentMethods: Record< string, string >;
 	paymentMethodsInitialized: boolean;
 	expressPaymentMethodsInitialized: boolean;
 	shouldSavePaymentMethod: boolean;
 }
-const incompatiblePaymentMethods: Record< string, string > = {};
-
-if ( getSetting( 'globalPaymentMethods' ) ) {
-	getSetting< GlobalPaymentMethod[] >( 'globalPaymentMethods' ).forEach(
-		( method ) => {
-			incompatiblePaymentMethods[ method.id ] = method.title;
-		}
-	);
-}
 
 export const defaultPaymentState: PaymentState = {
 	status: PAYMENT_STATUS.PRISTINE,
@@ -55,7 +41,6 @@ export const defaultPaymentState: PaymentState = {
 		Record< string, SavedPaymentMethod[] > | EmptyObjectType
 	>( 'customerPaymentMethods', {} ),
 	paymentMethodData: {},
-	incompatiblePaymentMethods,
 	paymentResult: null,
 	paymentMethodsInitialized: false,
 	expressPaymentMethodsInitialized: false,

plugins/woocommerce-blocks/assets/js/data/payment/reducers.ts

@@ -125,13 +125,6 @@ const reducer: Reducer< PaymentState > = (
 			newState = {
 				...state,
 				availablePaymentMethods: action.paymentMethods,
-				incompatiblePaymentMethods: Object.fromEntries(
-					Object.entries( state.incompatiblePaymentMethods ).filter(
-						( [ k ] ) => {
-							return ! ( k in action.paymentMethods );
-						}
-					)
-				),
 			};
 			break;
 

plugins/woocommerce-blocks/assets/js/data/payment/selectors.ts

@@ -3,6 +3,8 @@
  */
 import { objectHasProp } from '@woocommerce/types';
 import deprecated from '@wordpress/deprecated';
+import { getSetting } from '@woocommerce/settings';
+import type { GlobalPaymentMethod } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -11,6 +13,15 @@ import { PaymentState } from './default-state';
 import { filterActiveSavedPaymentMethods } from './utils/filter-active-saved-payment-methods';
 import { STATUS as PAYMENT_STATUS } from './constants';
 
+const globalPaymentMethods: Record< string, string > = {};
+if ( getSetting( 'globalPaymentMethods' ) ) {
+	getSetting< GlobalPaymentMethod[] >( 'globalPaymentMethods' ).forEach(
+		( method ) => {
+			globalPaymentMethods[ method.id ] = method.title;
+		}
+	);
+}
+
 export const isPaymentPristine = ( state: PaymentState ) =>
 	state.status === PAYMENT_STATUS.PRISTINE;
 
@@ -67,7 +78,17 @@ export const getPaymentMethodData = ( state: PaymentState ) => {
 };
 
 export const getIncompatiblePaymentMethods = ( state: PaymentState ) => {
-	return state.incompatiblePaymentMethods;
+	return Object.fromEntries(
+		Object.entries( globalPaymentMethods ).filter( ( [ k ] ) => {
+			return ! (
+				k in
+				{
+					...state.availablePaymentMethods,
+					...state.availableExpressPaymentMethods,
+				}
+			);
+		} )
+	);
 };
 
 export const getSavedPaymentMethods = ( state: PaymentState ) => {