Use data from Payment Method context instead of reading setting from …

…the server
woocommerce · Aug 10, 2020 · 40db3ee · 40db3ee
1 parent 9bf9b36
commit 40db3ee
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/assets/js/base/components/payment-methods/saved-payment-method-options.js b/assets/js/base/components/payment-methods/saved-payment-method-options.js
@@ -8,7 +8,6 @@ import {
 	usePaymentMethodDataContext,
 } from '@woocommerce/base-context';
 import RadioControl from '@woocommerce/base-components/radio-control';
-import { PAYMENT_GATEWAY_SORT_ORDER } from '@woocommerce/block-settings';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').CustomerPaymentMethod} CustomerPaymentMethod
@@ -105,15 +104,9 @@ const SavedPaymentMethodOptions = ( { onSelect } ) => {
 		if ( paymentMethodKeys.length > 0 ) {
 			paymentMethodKeys.forEach( ( type ) => {
 				const paymentMethods = customerPaymentMethods[ type ];
-				const enabledPaymentMethods = paymentMethods.filter(
-					( paymentMethod ) =>
-						PAYMENT_GATEWAY_SORT_ORDER.includes(
-							paymentMethod.method.gateway
-						)
-				);
-				if ( enabledPaymentMethods.length > 0 ) {
+				if ( paymentMethods.length > 0 ) {
 					options = options.concat(
-						enabledPaymentMethods.map( ( paymentMethod ) => {
+						paymentMethods.map( ( paymentMethod ) => {
 							const option =
 								type === 'cc' || type === 'echeck'
 									? getCcOrEcheckPaymentMethodOption(

diff --git a/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js b/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js
@@ -77,6 +77,32 @@ export const usePaymentMethodDataContext = () => {
 	return useContext( PaymentMethodDataContext );
 };
 
+/**
+ * Gets the payment methods saved for the current user after filtering out
+ * disabled ones.
+ *
+ * @param {Object[]} availablePaymentMethods List of available payment methods.
+ * @return {Object} Object containing the payment methods saved for a specific user which are available.
+ */
+const getCustomerPaymentMethods = ( availablePaymentMethods = [] ) => {
+	const customerPaymentMethods = getSetting( 'customerPaymentMethods', {} );
+	const paymentMethodKeys = Object.keys( customerPaymentMethods );
+	if ( paymentMethodKeys.length === 0 ) {
+		return {};
+	}
+	const enabledCustomerPaymentMethods = {};
+	paymentMethodKeys.forEach( ( type ) => {
+		enabledCustomerPaymentMethods[ type ] = customerPaymentMethods[
+			type
+		].filter( ( paymentMethod ) => {
+			return Object.keys( availablePaymentMethods ).includes(
+				paymentMethod.method.gateway
+			);
+		} );
+	} );
+	return enabledCustomerPaymentMethods;
+};
+
 /**
  * PaymentMethodDataProvider is automatically included in the
  * CheckoutDataProvider.
@@ -107,10 +133,7 @@ export const PaymentMethodDataProvider = ( { children } ) => {
 	const currentObservers = useRef( observers );
 
 	const { isEditor, previewData } = useEditorContext();
-	const customerPaymentMethods =
-		isEditor && previewData?.previewSavedPaymentMethods
-			? previewData?.previewSavedPaymentMethods
-			: getSetting( 'customerPaymentMethods', {} );
+
 	const [ paymentData, dispatch ] = useReducer(
 		reducer,
 		DEFAULT_PAYMENT_DATA
@@ -150,6 +173,21 @@ export const PaymentMethodDataProvider = ( { children } ) => {
 		[ dispatch ]
 	);
 
+	const customerPaymentMethods = useMemo( () => {
+		if ( isEditor && previewData.previewSavedPaymentMethods ) {
+			return previewData.previewSavedPaymentMethods;
+		}
+		if ( ! paymentMethodsInitialized ) {
+			return {};
+		}
+		return getCustomerPaymentMethods( paymentData.paymentMethods );
+	}, [
+		isEditor,
+		previewData.previewSavedPaymentMethods,
+		paymentMethodsInitialized,
+		paymentData.paymentMethods,
+	] );
+
 	const setExpressPaymentError = useCallback(
 		( message ) => {
 			if ( message ) {