diff --git a/changelog/add-9490-filter-txns-by-payment-method b/changelog/add-9490-filter-txns-by-payment-method
new file mode 100644
index 00000000000..04e175479d1
--- /dev/null
+++ b/changelog/add-9490-filter-txns-by-payment-method
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Allow transactions filtered by Payment Method
diff --git a/client/data/transactions/hooks.ts b/client/data/transactions/hooks.ts
index 0b860612dc9..3f1130ed08d 100644
--- a/client/data/transactions/hooks.ts
+++ b/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,
diff --git a/client/data/transactions/resolvers.js b/client/data/transactions/resolvers.js
index 77e517bdf6d..37b1c94fb0d 100644
--- a/client/data/transactions/resolvers.js
+++ b/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,
diff --git a/client/transactions/declarations.d.ts b/client/transactions/declarations.d.ts
index 1ee8fe71627..15a6a4ccf27 100644
--- a/client/transactions/declarations.d.ts
+++ b/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[];
diff --git a/client/transactions/filters/config.ts b/client/transactions/filters/config.ts
index b5552654494..61be5f4660d 100644
--- a/client/transactions/filters/config.ts
+++ b/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: __(
+ '
Payment method ',
+ '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' ),
diff --git a/client/transactions/filters/index.tsx b/client/transactions/filters/index.tsx
index ef8c11d4f15..b468f0c5bed 100644
--- a/client/transactions/filters/index.tsx
+++ b/client/transactions/filters/index.tsx
@@ -11,15 +11,19 @@ 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(
() =>
@@ -27,9 +31,15 @@ export const TransactionsFilters = ( {
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(
diff --git a/client/transactions/filters/test/__snapshots__/index.tsx.snap b/client/transactions/filters/test/__snapshots__/index.tsx.snap
index b8aefe7a57b..a2a2a7bd3da 100644
--- a/client/transactions/filters/test/__snapshots__/index.tsx.snap
+++ b/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 [
+ ,
+ ,
+ ,
+]
+`;
+
exports[`Transactions filters when filtering by risk level should render all types 1`] = `
HTMLOptionsCollection [