Add Payment Method to Transactions advanced filters

changelog/add-9490-filter-txns-by-payment-method

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Allow transactions filtered by Payment Method

client/data/transactions/hooks.ts

@@ -87,6 +87,7 @@ interface TransactionsSummary {
 		currency?: string;
 		store_currencies?: string[];
 		customer_currencies?: string[];
+		sources?: Transaction[ 'source' ][];
 	};
 	isLoading: boolean;
 }
@@ -158,6 +159,8 @@ export const useTransactions = (
 		store_currency_is: storeCurrencyIs,
 		customer_currency_is: customerCurrencyIs,
 		customer_currency_is_not: customerCurrencyIsNot,
+		source_is: sourceIs,
+		source_is_not: sourceIsNot,
 		loan_id_is: loanIdIs,
 		search,
 	}: Query,
@@ -196,6 +199,8 @@ export const useTransactions = (
 				storeCurrencyIs,
 				customerCurrencyIs,
 				customerCurrencyIsNot,
+				sourceIs,
+				sourceIsNot,
 				channelIs,
 				channelIsNot,
 				customerCountryIs,
@@ -230,6 +235,8 @@ export const useTransactions = (
 			storeCurrencyIs,
 			customerCurrencyIs,
 			customerCurrencyIsNot,
+			sourceIs,
+			sourceIsNot,
 			channelIs,
 			channelIsNot,
 			customerCountryIs,
@@ -256,6 +263,8 @@ export const useTransactionsSummary = (
 		store_currency_is: storeCurrencyIs,
 		customer_currency_is: customerCurrencyIs,
 		customer_currency_is_not: customerCurrencyIsNot,
+		source_is: sourceIs,
+		source_is_not: sourceIsNot,
 		channel_is: channelIs,
 		channel_is_not: channelIsNot,
 		customer_country_is: customerCountryIs,
@@ -286,6 +295,8 @@ export const useTransactionsSummary = (
 				storeCurrencyIs,
 				customerCurrencyIs,
 				customerCurrencyIsNot,
+				sourceIs,
+				sourceIsNot,
 				channelIs,
 				channelIsNot,
 				customerCountryIs,
@@ -315,6 +326,8 @@ export const useTransactionsSummary = (
 			storeCurrencyIs,
 			customerCurrencyIs,
 			customerCurrencyIsNot,
+			sourceIs,
+			sourceIsNot,
 			channelIs,
 			channelIsNot,
 			customerCountryIs,

client/data/transactions/resolvers.js

@@ -54,6 +54,8 @@ export const formatQueryFilters = ( query ) => ( {
 	deposit_id: query.depositId,
 	customer_currency_is: query.customerCurrencyIs,
 	customer_currency_is_not: query.customerCurrencyIsNot,
+	source_is: query.sourceIs,
+	source_is_not: query.sourceIsNot,
 	search: query.search,
 	user_timezone: getUserTimeZone(),
 	locale: query.locale,

client/transactions/declarations.d.ts

@@ -139,6 +139,8 @@ declare module '@woocommerce/navigation' {
 		risk_level_is_not?: string;
 		customer_currency_is?: unknown;
 		customer_currency_is_not?: unknown;
+		source_is?: string;
+		source_is_not?: string;
 		store_currency_is?: string;
 		loan_id_is?: string;
 		search?: string[];

client/transactions/filters/config.ts

@@ -154,7 +154,8 @@ export const getFilters = (
 
 /*eslint-disable max-len*/
 export const getAdvancedFilters = (
-	customerCurrencyOptions?: TransactionsFilterEntryType[]
+	customerCurrencyOptions?: TransactionsFilterEntryType[],
+	transactionSourceOptions?: TransactionsFilterEntryType[]
 ): any => {
 	// TODO: Remove this and all the checks once we drop support of WooCommerce 7.7 and below.
 	const wooCommerceVersionString = getSetting( 'wcVersion' );
@@ -270,6 +271,51 @@ export const getAdvancedFilters = (
 					options: customerCurrencyOptions,
 				},
 			},
+			source: {
+				labels: {
+					add: __( 'Payment method', 'woocommerce-payments' ),
+					remove: __(
+						'Remove payment method filter',
+						'woocommerce-payments'
+					),
+					rule: __(
+						'Select a payment method filter match',
+						'woocommerce-payments'
+					),
+					title: __(
+						'<title>Payment method</title> <rule /> <filter />',
+						'woocommerce-payments'
+					),
+					filter: __(
+						'Select a payment method',
+						'woocommerce-payments'
+					),
+				},
+				rules: [
+					{
+						value: 'is',
+						/* translators: Sentence fragment, logical, "Is" refers to searching for transactions matching a chosen payment method. */
+						label: _x(
+							'Is',
+							'payment method',
+							'woocommerce-payments'
+						),
+					},
+					{
+						value: 'is_not',
+						/* translators: Sentence fragment, logical, "Is not" refers to searching for transactions that don\'t match a chosen payment method. */
+						label: _x(
+							'Is not',
+							'payment method',
+							'woocommerce-payments'
+						),
+					},
+				],
+				input: {
+					component: 'SelectControl',
+					options: transactionSourceOptions,
+				},
+			},
 			type: {
 				labels: {
 					add: __( 'Type', 'woocommerce-payments' ),

client/transactions/filters/index.tsx

@@ -11,25 +11,35 @@ import { getQuery } from '@woocommerce/navigation';
 import { getFilters, getAdvancedFilters } from './config';
 import { formatCurrencyName } from 'multi-currency/interface/functions';
 import { recordEvent } from 'tracks';
+import { PAYMENT_METHOD_TITLES } from 'wcpay/constants/payment-method';
+import { Transaction } from 'wcpay/data';
 
 interface TransactionsFiltersProps {
 	storeCurrencies: string[];
 	customerCurrencies: string[];
+	transactionSources: Transaction[ 'source' ][];
 }
 
 export const TransactionsFilters = ( {
 	storeCurrencies,
 	customerCurrencies,
+	transactionSources,
 }: TransactionsFiltersProps ): JSX.Element => {
 	const advancedFilters = useMemo(
 		() =>
 			getAdvancedFilters(
 				customerCurrencies.map( ( currencyCode: string ) => ( {
 					label: formatCurrencyName( currencyCode ),
 					value: currencyCode,
-				} ) )
+				} ) ),
+				typeof transactionSources === 'undefined'
+					? []
+					: transactionSources.map( ( source ) => ( {
+							label: PAYMENT_METHOD_TITLES[ source ] || source,
+							value: source,
+					  } ) )
 			),
-		[ customerCurrencies ]
+		[ customerCurrencies, transactionSources ]
 	);
 
 	const filters = useMemo(

client/transactions/filters/test/__snapshots__/index.tsx.snap

@@ -55,6 +55,26 @@ HTMLOptionsCollection [
 ]
 `;
 
+exports[`Transactions filters when filtering by payment method should render all types 1`] = `
+HTMLOptionsCollection [
+  <option
+    value="visa"
+  >
+    Visa
+  </option>,
+  <option
+    value="mastercard"
+  >
+    Mastercard
+  </option>,
+  <option
+    value="sofort"
+  >
+    SOFORT
+  </option>,
+]
+`;
+
 exports[`Transactions filters when filtering by risk level should render all types 1`] = `
 HTMLOptionsCollection [
   <option

client/transactions/filters/test/index.tsx

@@ -12,6 +12,7 @@ import { getQuery, updateQueryString } from '@woocommerce/navigation';
  * Internal dependencies
  */
 import { TransactionsFilters } from '../';
+import { Transaction } from 'wcpay/data';
 
 // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this.
 jest.mock( '@woocommerce/settings', () => ( {
@@ -33,6 +34,11 @@ function addAdvancedFilter( filter: string ) {
 
 const storeCurrencies = [ 'eur', 'usd' ];
 const customerCurrencies = [ 'eur', 'usd', 'gbp' ];
+const transactionSources: Transaction[ 'source' ][] = [
+	'visa',
+	'mastercard',
+	'sofort',
+];
 
 declare const global: {
 	wcSettings: { countries: Record< string, string > };
@@ -71,6 +77,7 @@ describe( 'Transactions filters', () => {
 			<TransactionsFilters
 				storeCurrencies={ storeCurrencies }
 				customerCurrencies={ customerCurrencies }
+				transactionSources={ transactionSources }
 			/>
 		);
 
@@ -85,6 +92,7 @@ describe( 'Transactions filters', () => {
 			<TransactionsFilters
 				storeCurrencies={ storeCurrencies }
 				customerCurrencies={ customerCurrencies }
+				transactionSources={ transactionSources }
 			/>
 		);
 	} );
@@ -250,6 +258,52 @@ describe( 'Transactions filters', () => {
 		} );
 	} );
 
+	describe( 'when filtering by payment method', () => {
+		let ruleSelector: HTMLElement;
+
+		beforeEach( () => {
+			addAdvancedFilter( 'Payment method' );
+			ruleSelector = screen.getByRole( 'combobox', {
+				name: /payment method filter/i,
+			} );
+		} );
+
+		test( 'should render all types', () => {
+			const typeSelect = screen.getByRole( 'combobox', {
+				name: /payment method$/i,
+			} ) as HTMLSelectElement;
+			expect( typeSelect.options ).toMatchSnapshot();
+		} );
+
+		test( 'should filter by is', () => {
+			user.selectOptions( ruleSelector, 'is' );
+
+			user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: /Select a payment method$/i,
+				} ),
+				'visa'
+			);
+			user.click( screen.getByRole( 'link', { name: /Filter/ } ) );
+
+			expect( getQuery().source_is ).toEqual( 'visa' );
+		} );
+
+		test( 'should filter by is_not', () => {
+			user.selectOptions( ruleSelector, 'is_not' );
+
+			user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: /Select a payment method$/i,
+				} ),
+				'visa'
+			);
+			user.click( screen.getByRole( 'link', { name: /Filter/ } ) );
+
+			expect( getQuery().source_is_not ).toEqual( 'visa' );
+		} );
+	} );
+
 	describe( 'when filtering by source device', () => {
 		let ruleSelector: HTMLElement;
 

client/transactions/list/index.tsx

@@ -624,13 +624,17 @@ export const TransactionsList = (
 			risk_level_is_not: riskLevelIsNot,
 			customer_currency_is: customerCurrencyIs,
 			customer_currency_is_not: customerCurrencyIsNot,
+			source_is: sourceIs,
+			source_is_not: sourceIsNot,
 		} = params;
 		const depositId = props.depositId;
 
 		const isFiltered =
 			!! dateAfter ||
 			!! dateBefore ||
 			!! dateBetween ||
+			!! sourceIs ||
+			!! sourceIsNot ||
 			!! search ||
 			!! typeIs ||
 			!! typeIsNot ||
@@ -673,6 +677,8 @@ export const TransactionsList = (
 						sourceDeviceIsNot,
 						customerCurrencyIs,
 						customerCurrencyIsNot,
+						sourceIs,
+						sourceIsNot,
 						channelIs,
 						channelIsNot,
 						customerCountryIs,
@@ -825,13 +831,15 @@ export const TransactionsList = (
 		transactionsSummary.store_currencies ||
 		( isCurrencyFiltered ? [ getQuery().store_currency_is ?? '' ] : [] );
 	const customerCurrencies = transactionsSummary.customer_currencies || [];
+	const transactionSources = transactionsSummary.sources || [];
 
 	return (
 		<Page>
 			{ showFilters && (
 				<TransactionsFilters
 					storeCurrencies={ storeCurrencies }
 					customerCurrencies={ customerCurrencies }
+					transactionSources={ transactionSources }
 				/>
 			) }
 			<TableCard

includes/admin/class-wc-rest-payments-transactions-controller.php

@@ -247,6 +247,8 @@ function ( $transaction_date ) use ( $user_timezone ) {
 				'store_currency_is'        => $request->get_param( 'store_currency_is' ),
 				'customer_currency_is'     => $request->get_param( 'customer_currency_is' ),
 				'customer_currency_is_not' => $request->get_param( 'customer_currency_is_not' ),
+				'source_is'                => $request->get_param( 'source_is' ),
+				'source_is_not'            => $request->get_param( 'source_is_not' ),
 				'loan_id_is'               => $request->get_param( 'loan_id_is' ),
 				'search'                   => $request->get_param( 'search' ),
 			],

includes/core/server/request/class-list-transactions.php

@@ -94,6 +94,8 @@ function ( $transaction_date ) use ( $user_timezone ) {
 			'store_currency_is'        => $request->get_param( 'store_currency_is' ),
 			'customer_currency_is'     => $request->get_param( 'customer_currency_is' ),
 			'customer_currency_is_not' => $request->get_param( 'customer_currency_is_not' ),
+			'source_is'                => $request->get_param( 'source_is' ),
+			'source_is_not'            => $request->get_param( 'source_is_not' ),
 			'loan_id_is'               => $request->get_param( 'loan_id_is' ),
 			'search'                   => (array) $request->get_param( 'search' ),
 			'deposit_id'               => $request->get_param( 'deposit_id' ),