Hide saved payment methods if their gateway is disabled (https://github.com/woocommerce/woocommerce-blocks/pull/2975)

* Hide saved payment methods if their gateway is disabled

* Fix wrong type-def

* Remove extra blank line

* Rename var

* Use FILTER_VALIDATE_BOOLEAN instead of comparing to 'yes'

* Use data from Payment Method context instead of reading setting from the server

* Use data from Payment Method context instead of reading setting from the server

plugins/woocommerce-blocks/assets/js/base/components/payment-methods/saved-payment-method-options.js

@@ -131,15 +131,17 @@ const SavedPaymentMethodOptions = ( { onSelect } ) => {
 					);
 				}
 			} );
-			currentOptions.current = options;
-			currentOptions.current.push( {
-				value: '0',
-				label: __(
-					'Use a new payment method',
-					'woo-gutenberg-product-blocks'
-				),
-				name: `wc-saved-payment-method-token-new`,
-			} );
+			if ( options.length > 0 ) {
+				currentOptions.current = options;
+				currentOptions.current.push( {
+					value: '0',
+					label: __(
+						'Use a new payment method',
+						'woo-gutenberg-product-blocks'
+					),
+					name: `wc-saved-payment-method-token-new`,
+				} );
+			}
 		}
 	}, [
 		customerPaymentMethods,

plugins/woocommerce-blocks/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js

@@ -77,6 +77,33 @@ 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 +134,6 @@ 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,24 @@ export const PaymentMethodDataProvider = ( { children } ) => {
 		[ dispatch ]
 	);
 
+	const customerPaymentMethods = useMemo( () => {
+		if ( isEditor && previewData.previewSavedPaymentMethods ) {
+			return previewData.previewSavedPaymentMethods;
+		}
+		if (
+			! paymentMethodsInitialized ||
+			paymentData.paymentMethods.length === 0
+		) {
+			return {};
+		}
+		return getCustomerPaymentMethods( paymentData.paymentMethods );
+	}, [
+		isEditor,
+		previewData.previewSavedPaymentMethods,
+		paymentMethodsInitialized,
+		paymentData.paymentMethods,
+	] );
+
 	const setExpressPaymentError = useCallback(
 		( message ) => {
 			if ( message ) {

plugins/woocommerce-blocks/assets/js/type-defs/contexts.js

@@ -256,9 +256,9 @@
 /**
  * @typedef {Object} EditorDataContext
  *
- * @property {number} isEditor      Indicates whether in the editor context.
- * @property {number} currentPostId The post ID being edited.
- * @property {Object} previewData   Object containing preview data for the editor.
+ * @property {boolean} isEditor      Indicates whether in the editor context.
+ * @property {number}  currentPostId The post ID being edited.
+ * @property {Object}  previewData   Object containing preview data for the editor.
  */
 
 /**

plugins/woocommerce-blocks/src/Payments/Api.php

@@ -76,14 +76,25 @@ class Api {
 		return array_merge( $dependencies, $this->payment_method_registry->get_all_registered_script_handles() );
 	}
 
+	/**
+	 * Returns true if the payment gateway is enabled.
+	 *
+	 * @param object $gateway Payment gateway.
+	 * @return boolean
+	 */
+	private function is_payment_gateway_enabled( $gateway ) {
+		return filter_var( $gateway->enabled, FILTER_VALIDATE_BOOLEAN );
+	}
+
 	/**
 	 * Add payment method data to Asset Registry.
 	 */
 	public function add_payment_method_script_data() {
 		// Enqueue the order of enabled gateways as `paymentGatewaySortOrder`.
 		if ( ! $this->asset_registry->exists( 'paymentGatewaySortOrder' ) ) {
-			$available_gateways = WC()->payment_gateways->payment_gateways();
-			$this->asset_registry->add( 'paymentGatewaySortOrder', array_keys( $available_gateways ) );
+			$payment_gateways = WC()->payment_gateways->payment_gateways();
+			$enabled_gateways = array_filter( $payment_gateways, array( $this, 'is_payment_gateway_enabled' ) );
+			$this->asset_registry->add( 'paymentGatewaySortOrder', array_keys( $enabled_gateways ) );
 		}
 
 		// Enqueue all registered gateway data (settings/config etc).