Replace with the dynamic source values from the server

Automattic · Dec 20, 2024 · cee5b6c · cee5b6c
1 parent 9cea0e4
commit cee5b6c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git 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;
 }

diff --git 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' );
@@ -312,10 +313,7 @@ export const getAdvancedFilters = (
 				],
 				input: {
 					component: 'SelectControl',
-					options: [
-						{ label: 'card label', value: 'card' },
-						{ label: 'giropay label', value: 'giropay' },
-					], // @todo change to real options.
+					options: transactionSourceOptions,
 				},
 			},
 			type: {

diff --git a/client/transactions/filters/index.tsx b/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(

diff --git a/client/transactions/list/index.tsx b/client/transactions/list/index.tsx
@@ -833,13 +833,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