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 [