From 7fd3ca96bff93f3986a052b30f57dd8bc7dff89d Mon Sep 17 00:00:00 2001 From: Saad Tarhi Date: Mon, 16 Jan 2023 23:06:48 +0100 Subject: [PATCH] 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 --- .../assets/js/data/payment/action-types.ts | 1 - .../assets/js/data/payment/actions.ts | 7 ------ .../assets/js/data/payment/default-state.ts | 17 +------------- .../assets/js/data/payment/reducers.ts | 7 ------ .../assets/js/data/payment/selectors.ts | 23 ++++++++++++++++++- 5 files changed, 23 insertions(+), 32 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/data/payment/action-types.ts b/plugins/woocommerce-blocks/assets/js/data/payment/action-types.ts index 7de60ae2dfe..f73208e3e83 100644 --- a/plugins/woocommerce-blocks/assets/js/data/payment/action-types.ts +++ b/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', } diff --git a/plugins/woocommerce-blocks/assets/js/data/payment/actions.ts b/plugins/woocommerce-blocks/assets/js/data/payment/actions.ts index bb864293187..8ee3d412fee 100644 --- a/plugins/woocommerce-blocks/assets/js/data/payment/actions.ts +++ b/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 * diff --git a/plugins/woocommerce-blocks/assets/js/data/payment/default-state.ts b/plugins/woocommerce-blocks/assets/js/data/payment/default-state.ts index 5fc4a953b15..660951c0b04 100644 --- a/plugins/woocommerce-blocks/assets/js/data/payment/default-state.ts +++ b/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, diff --git a/plugins/woocommerce-blocks/assets/js/data/payment/reducers.ts b/plugins/woocommerce-blocks/assets/js/data/payment/reducers.ts index 226a8c96c5d..18723fb3785 100644 --- a/plugins/woocommerce-blocks/assets/js/data/payment/reducers.ts +++ b/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; diff --git a/plugins/woocommerce-blocks/assets/js/data/payment/selectors.ts b/plugins/woocommerce-blocks/assets/js/data/payment/selectors.ts index 9cf10a0dce4..dd87cd4cdaf 100644 --- a/plugins/woocommerce-blocks/assets/js/data/payment/selectors.ts +++ b/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 ) => {