From 86c2f2da3352dd5648669c2e928feb3fa87d314c Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Fri, 31 Oct 2025 10:52:48 -0300 Subject: [PATCH 1/8] Add Fees and Net columns to the payout list --- ...d-fees-and-net-columns-to-payouts-page-and | 4 + .../__snapshots__/index.test.tsx.snap | 308 ++++++++++++++++++ client/deposits/list/__tests__/index.test.tsx | 6 + client/deposits/list/index.tsx | 28 ++ client/types/deposits.d.ts | 2 + 5 files changed, 348 insertions(+) create mode 100644 changelog/woopmnt-5359-feature-request-add-fees-and-net-columns-to-payouts-page-and diff --git a/changelog/woopmnt-5359-feature-request-add-fees-and-net-columns-to-payouts-page-and b/changelog/woopmnt-5359-feature-request-add-fees-and-net-columns-to-payouts-page-and new file mode 100644 index 00000000000..2dad201f1da --- /dev/null +++ b/changelog/woopmnt-5359-feature-request-add-fees-and-net-columns-to-payouts-page-and @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Add Fees and Net columns to the payout history list. diff --git a/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap b/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap index 603c06fa7cc..4a313f0f339 100644 --- a/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap +++ b/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap @@ -438,6 +438,88 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` Sort by Amount in descending order + + + + Sort by Fees in descending order + + + + + + Sort by Net in descending order + + + + + $0.50 + + + + + $19.50 + + @@ -644,6 +750,30 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` $30.00 + + + $0.75 + + + + + $29.25 + + @@ -743,6 +873,30 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` $40.00 + + + $0.00 + + + + + $40.00 + + @@ -1283,6 +1437,88 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = ` Sort by Amount in descending order + + + + Sort by Fees in descending order + + + + + + Sort by Net in descending order + + + + + $0.50 + + + + + $19.50 + + @@ -1489,6 +1749,30 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = ` $30.00 + + + $0.75 + + + + + $29.25 + + @@ -1588,6 +1872,30 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = ` $40.00 + + + $0.00 + + + + + $40.00 + + diff --git a/client/deposits/list/__tests__/index.test.tsx b/client/deposits/list/__tests__/index.test.tsx index 902cea057f8..5df99bc19b0 100644 --- a/client/deposits/list/__tests__/index.test.tsx +++ b/client/deposits/list/__tests__/index.test.tsx @@ -42,6 +42,8 @@ const mockDeposits = [ date: '2020-01-02 17:46:02', type: 'deposit', amount: 2000, + fee: 50, + fee_percentage: 2.5, status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', @@ -52,6 +54,8 @@ const mockDeposits = [ date: '2020-01-03 17:46:02', type: 'withdrawal', amount: 3000, + fee: 75, + fee_percentage: 2.5, status: 'pending', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', @@ -62,6 +66,8 @@ const mockDeposits = [ date: '2020-01-04 17:46:02', type: 'withdrawal', amount: 4000, + fee: 0, + fee_percentage: 0, status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index c09cbd027d5..4d91453526b 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -72,6 +72,21 @@ const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [ required: true, isSortable: true, }, + { + key: 'fees', + label: __( 'Fees', 'woocommerce-payments' ), + screenReaderLabel: __( 'Fees', 'woocommerce-payments' ), + isNumeric: true, + isSortable: true, + }, + { + key: 'net', + label: __( 'Net', 'woocommerce-payments' ), + screenReaderLabel: __( 'Net', 'woocommerce-payments' ), + isNumeric: true, + required: true, + isSortable: true, + }, { key: 'status', label: __( 'Status', 'woocommerce-payments' ), @@ -133,6 +148,7 @@ export const DepositsList = (): JSX.Element => { ); // Map deposit to table row. + const netAmount = deposit.amount - deposit.fee; const data = { details: { value: deposit.id, display: detailsLink }, date: { value: deposit.date, display: dateDisplay }, @@ -146,6 +162,18 @@ export const DepositsList = (): JSX.Element => { formatExplicitCurrency( deposit.amount, deposit.currency ) ), }, + fees: { + value: formatExportAmount( deposit.fee, deposit.currency ), + display: clickable( + formatExplicitCurrency( deposit.fee, deposit.currency ) + ), + }, + net: { + value: formatExportAmount( netAmount, deposit.currency ), + display: clickable( + formatExplicitCurrency( netAmount, deposit.currency ) + ), + }, status: { value: depositStatusLabels[ deposit.status ], display: clickable( ), diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts index 6c41a561d87..b8e5394086a 100644 --- a/client/types/deposits.d.ts +++ b/client/types/deposits.d.ts @@ -7,6 +7,8 @@ export interface DepositsTableHeader extends TableCardColumn { | 'date' | 'type' | 'amount' + | 'fees' + | 'net' | 'status' | 'bankAccount' | 'bankReferenceId'; From 4c51f51895e2aca29682c85adc85d130a05095e1 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Wed, 5 Nov 2025 14:31:18 -0300 Subject: [PATCH 2/8] fix this --- client/deposits/details/index.tsx | 4 ++-- client/deposits/list/index.tsx | 5 ++--- client/types/deposits.d.ts | 1 + 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index d63d1bcbce3..a4ee25c79fb 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -187,7 +187,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { ) } value={ formatExplicitCurrency( - deposit.amount + deposit.fee, + deposit.amount, deposit.currency ) } />, @@ -220,7 +220,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { ) } value={ formatExplicitCurrency( - deposit.amount, + deposit.net, deposit.currency ) } valueClass="wcpay-deposit-net" diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 4d91453526b..2cd0cd893ef 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -148,7 +148,6 @@ export const DepositsList = (): JSX.Element => { ); // Map deposit to table row. - const netAmount = deposit.amount - deposit.fee; const data = { details: { value: deposit.id, display: detailsLink }, date: { value: deposit.date, display: dateDisplay }, @@ -169,9 +168,9 @@ export const DepositsList = (): JSX.Element => { ), }, net: { - value: formatExportAmount( netAmount, deposit.currency ), + value: formatExportAmount( deposit.net, deposit.currency ), display: clickable( - formatExplicitCurrency( netAmount, deposit.currency ) + formatExplicitCurrency( deposit.net, deposit.currency ) ), }, status: { diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts index b8e5394086a..33832990c2a 100644 --- a/client/types/deposits.d.ts +++ b/client/types/deposits.d.ts @@ -30,6 +30,7 @@ export interface CachedDeposit { currency: string; fee_percentage: number; fee: number; + net: number; status: DepositStatus; bankAccount: string; automatic: boolean; From 6f3c5e43703f4588fc54ef092cf7f5fa3aab3c3b Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Wed, 5 Nov 2025 14:54:23 -0300 Subject: [PATCH 3/8] rollback this --- client/deposits/details/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index a4ee25c79fb..d63d1bcbce3 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -187,7 +187,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { ) } value={ formatExplicitCurrency( - deposit.amount, + deposit.amount + deposit.fee, deposit.currency ) } />, @@ -220,7 +220,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { ) } value={ formatExplicitCurrency( - deposit.net, + deposit.amount, deposit.currency ) } valueClass="wcpay-deposit-net" From 2196a692db0e50971523b2570ec01e7d19508756 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Wed, 5 Nov 2025 15:44:53 -0300 Subject: [PATCH 4/8] follow this approach --- client/data/deposits/hooks.ts | 69 ++++++++++++++++++++++++++++++++++ client/deposits/list/index.tsx | 40 ++++++++++++++++---- 2 files changed, 102 insertions(+), 7 deletions(-) diff --git a/client/data/deposits/hooks.ts b/client/data/deposits/hooks.ts index 66e994292f6..339d602db06 100644 --- a/client/data/deposits/hooks.ts +++ b/client/data/deposits/hooks.ts @@ -163,6 +163,75 @@ export const useDeposits = ( { ); }; +/** + * Interface for deposit fee data returned by useDepositsWithFeeData + */ +export interface DepositFeeData { + totalFees: number; + feesCurrency: string; + grossAmount: number; +} + +/** + * Hook to fetch transaction summaries for multiple deposits and calculate fee-related data. + * Returns a map of deposit ID to fee data (total fees, gross amount). + * + * @param deposits - Array of deposits to fetch fee data for + * @return Map of deposit ID to DepositFeeData + */ +export const useDepositsWithFeeData = ( + deposits: CachedDeposit[] +): Record< string, DepositFeeData > => { + // Fetch transaction summaries for all deposits to get total fees + // useSelect automatically triggers resolvers when data isn't cached + const transactionSummariesByDeposit = useSelect( + ( select ) => { + const { getTransactionsSummary } = select( STORE_NAME ); + const summaries: Record< + string, + { fees?: number; currency?: string } + > = {}; + deposits.forEach( ( deposit ) => { + const query = { depositId: deposit.id }; + const summary = getTransactionsSummary( query ) as { + fees?: number; + currency?: string; + }; + if ( + summary && + ( summary.fees !== undefined || summary.currency ) + ) { + summaries[ deposit.id ] = { + fees: summary.fees, + currency: summary.currency, + }; + } + } ); + return summaries; + }, + [ deposits ] + ); + + // Calculate fee data for each deposit + const feeDataMap: Record< string, DepositFeeData > = {}; + deposits.forEach( ( deposit ) => { + const transactionSummary = transactionSummariesByDeposit[ deposit.id ]; + const totalFees = + transactionSummary?.fees !== undefined + ? transactionSummary.fees + : deposit.fee; + const feesCurrency = transactionSummary?.currency ?? deposit.currency; + + feeDataMap[ deposit.id ] = { + totalFees, + feesCurrency, + grossAmount: deposit.amount + totalFees, + }; + } ); + + return feeDataMap; +}; + export const useDepositsSummary = ( { match, store_currency_is: storeCurrencyIs, diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 2cd0cd893ef..e51644ce6f5 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React from 'react'; +import React, { useState } from 'react'; import { recordEvent } from 'tracks'; import { __, _n, sprintf } from '@wordpress/i18n'; import { TableCard, Link } from '@woocommerce/components'; @@ -15,7 +15,11 @@ import { parseInt } from 'lodash'; * Internal dependencies. */ import type { DepositsTableHeader } from 'wcpay/types/deposits'; -import { useDeposits, useDepositsSummary } from 'wcpay/data'; +import { + useDeposits, + useDepositsSummary, + useDepositsWithFeeData, +} from 'wcpay/data'; import { displayType, depositStatusLabels } from '../strings'; import { formatExplicitCurrency, @@ -113,7 +117,6 @@ export const DepositsList = (): JSX.Element => { const { depositsSummary, isLoading: isSummaryLoading } = useDepositsSummary( getQuery() ); - const { requestReportExport, isExportInProgress } = useReportExport(); const { createNotice } = useDispatch( 'core/notices' ); @@ -123,6 +126,9 @@ export const DepositsList = (): JSX.Element => { DepositsTableHeader >( 'wc_payments_payouts_hidden_columns', columns ); + // Fetch transaction summaries and calculate fee data for all deposits + const depositsFeeData = useDepositsWithFeeData( deposits ); + const totalRows = depositsSummary.count || 0; const rows = deposits.map( ( deposit ) => { @@ -148,6 +154,14 @@ export const DepositsList = (): JSX.Element => { ); // Map deposit to table row. + // Get fee data from hook (includes total fees from transactions summary and gross amount). + // If the fee data is not available, default to 0 fees and the deposit currency. + const feeData = depositsFeeData[ deposit.id ] ?? { + totalFees: 0, + feesCurrency: deposit.currency, + grossAmount: deposit.amount, + }; + const data = { details: { value: deposit.id, display: detailsLink }, date: { value: deposit.date, display: dateDisplay }, @@ -156,15 +170,27 @@ export const DepositsList = (): JSX.Element => { display: clickable( displayType[ deposit.type ] ), }, amount: { - value: formatExportAmount( deposit.amount, deposit.currency ), + value: formatExportAmount( + feeData.grossAmount, + deposit.currency + ), display: clickable( - formatExplicitCurrency( deposit.amount, deposit.currency ) + formatExplicitCurrency( + feeData.grossAmount, + deposit.currency + ) ), }, fees: { - value: formatExportAmount( deposit.fee, deposit.currency ), + value: formatExportAmount( + feeData.totalFees, + feeData.feesCurrency + ), display: clickable( - formatExplicitCurrency( deposit.fee, deposit.currency ) + formatExplicitCurrency( + feeData.totalFees, + feeData.feesCurrency + ) ), }, net: { From 24497c371559e7d962af7608a3b4704de20f8474 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Wed, 5 Nov 2025 16:27:46 -0300 Subject: [PATCH 5/8] remove this --- client/deposits/list/index.tsx | 6 +++--- client/types/deposits.d.ts | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index e51644ce6f5..2f22c54092e 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React, { useState } from 'react'; +import React from 'react'; import { recordEvent } from 'tracks'; import { __, _n, sprintf } from '@wordpress/i18n'; import { TableCard, Link } from '@woocommerce/components'; @@ -194,9 +194,9 @@ export const DepositsList = (): JSX.Element => { ), }, net: { - value: formatExportAmount( deposit.net, deposit.currency ), + value: formatExportAmount( deposit.amount, deposit.currency ), display: clickable( - formatExplicitCurrency( deposit.net, deposit.currency ) + formatExplicitCurrency( deposit.amount, deposit.currency ) ), }, status: { diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts index 33832990c2a..b8e5394086a 100644 --- a/client/types/deposits.d.ts +++ b/client/types/deposits.d.ts @@ -30,7 +30,6 @@ export interface CachedDeposit { currency: string; fee_percentage: number; fee: number; - net: number; status: DepositStatus; bankAccount: string; automatic: boolean; From 885dfc7d5483b9abe5ead6402bc3123acc7d5d56 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Wed, 5 Nov 2025 17:27:43 -0300 Subject: [PATCH 6/8] fix tests --- .../__snapshots__/index.test.tsx.snap | 16 ++++---- client/deposits/list/__tests__/index.test.tsx | 39 ++++++++++++++++++- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap b/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap index 4a313f0f339..8398bb8b080 100644 --- a/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap +++ b/client/deposits/list/__tests__/__snapshots__/index.test.tsx.snap @@ -624,7 +624,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = ` href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock1" tabindex="-1" > - $20.00 + $20.50 - $19.50 + $20.00 - $30.00 + $30.75 - $29.25 + $30.00 - $20.00 + $20.50 - $19.50 + $20.00 - $30.00 + $30.75 - $29.25 + $30.00 ( { useDeposits: jest.fn(), useDepositsSummary: jest.fn(), + useDepositsWithFeeData: jest.fn(), } ) ); jest.mock( '@wordpress/api-fetch', () => jest.fn() ); @@ -47,7 +52,10 @@ const mockDeposits = [ status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', + automatic: true, bank_reference_key: 'mock_reference_key', + failure_code: 'insufficient_funds', + failure_message: '', } as CachedDeposit, { id: 'po_mock2', @@ -59,7 +67,10 @@ const mockDeposits = [ status: 'pending', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', + automatic: true, bank_reference_key: 'mock_reference_key', + failure_code: 'insufficient_funds', + failure_message: '', } as CachedDeposit, { id: 'po_mock3', @@ -71,7 +82,10 @@ const mockDeposits = [ status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', + automatic: true, bank_reference_key: 'mock_reference_key', + failure_code: 'insufficient_funds', + failure_message: '', } as CachedDeposit, ]; @@ -113,6 +127,10 @@ const mockUseDepositsSummary = useDepositsSummary as jest.MockedFunction< typeof useDepositsSummary >; +const mockUseDepositsWithFeeData = useDepositsWithFeeData as jest.MockedFunction< + typeof useDepositsWithFeeData +>; + const mockUseUserPreferences = useUserPreferences as jest.MockedFunction< typeof useUserPreferences >; @@ -130,6 +148,25 @@ describe( 'Deposits list', () => { isRequesting: false, } as any ); + // Mock fee data for deposits - maps deposit ID to fee data + mockUseDepositsWithFeeData.mockReturnValue( { + po_mock1: { + totalFees: 50, + feesCurrency: 'USD', + grossAmount: 2050, + }, + po_mock2: { + totalFees: 75, + feesCurrency: 'USD', + grossAmount: 3075, + }, + po_mock3: { + totalFees: 0, + feesCurrency: 'USD', + grossAmount: 4000, + }, + } ); + global.wcpaySettings = { zeroDecimalCurrencies: [], connect: { From d838dcf4afb4c9fd40ecf2c8dbf2a01f70d98423 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Mon, 10 Nov 2025 19:24:32 -0300 Subject: [PATCH 7/8] simplify things --- client/data/deposits/hooks.ts | 69 ------------------- client/deposits/list/__tests__/index.test.tsx | 36 ++-------- client/deposits/list/index.tsx | 40 +++-------- client/types/deposits.d.ts | 2 + 4 files changed, 17 insertions(+), 130 deletions(-) diff --git a/client/data/deposits/hooks.ts b/client/data/deposits/hooks.ts index 339d602db06..66e994292f6 100644 --- a/client/data/deposits/hooks.ts +++ b/client/data/deposits/hooks.ts @@ -163,75 +163,6 @@ export const useDeposits = ( { ); }; -/** - * Interface for deposit fee data returned by useDepositsWithFeeData - */ -export interface DepositFeeData { - totalFees: number; - feesCurrency: string; - grossAmount: number; -} - -/** - * Hook to fetch transaction summaries for multiple deposits and calculate fee-related data. - * Returns a map of deposit ID to fee data (total fees, gross amount). - * - * @param deposits - Array of deposits to fetch fee data for - * @return Map of deposit ID to DepositFeeData - */ -export const useDepositsWithFeeData = ( - deposits: CachedDeposit[] -): Record< string, DepositFeeData > => { - // Fetch transaction summaries for all deposits to get total fees - // useSelect automatically triggers resolvers when data isn't cached - const transactionSummariesByDeposit = useSelect( - ( select ) => { - const { getTransactionsSummary } = select( STORE_NAME ); - const summaries: Record< - string, - { fees?: number; currency?: string } - > = {}; - deposits.forEach( ( deposit ) => { - const query = { depositId: deposit.id }; - const summary = getTransactionsSummary( query ) as { - fees?: number; - currency?: string; - }; - if ( - summary && - ( summary.fees !== undefined || summary.currency ) - ) { - summaries[ deposit.id ] = { - fees: summary.fees, - currency: summary.currency, - }; - } - } ); - return summaries; - }, - [ deposits ] - ); - - // Calculate fee data for each deposit - const feeDataMap: Record< string, DepositFeeData > = {}; - deposits.forEach( ( deposit ) => { - const transactionSummary = transactionSummariesByDeposit[ deposit.id ]; - const totalFees = - transactionSummary?.fees !== undefined - ? transactionSummary.fees - : deposit.fee; - const feesCurrency = transactionSummary?.currency ?? deposit.currency; - - feeDataMap[ deposit.id ] = { - totalFees, - feesCurrency, - grossAmount: deposit.amount + totalFees, - }; - } ); - - return feeDataMap; -}; - export const useDepositsSummary = ( { match, store_currency_is: storeCurrencyIs, diff --git a/client/deposits/list/__tests__/index.test.tsx b/client/deposits/list/__tests__/index.test.tsx index 038fb8642cd..5cdc9fe1261 100644 --- a/client/deposits/list/__tests__/index.test.tsx +++ b/client/deposits/list/__tests__/index.test.tsx @@ -13,11 +13,7 @@ import { useUserPreferences } from '@woocommerce/data'; * Internal dependencies */ import { DepositsList } from '../'; -import { - useDeposits, - useDepositsSummary, - useDepositsWithFeeData, -} from 'wcpay/data'; +import { useDeposits, useDepositsSummary } from 'wcpay/data'; import { CachedDeposit, CachedDeposits, @@ -27,7 +23,6 @@ import { jest.mock( 'wcpay/data', () => ( { useDeposits: jest.fn(), useDepositsSummary: jest.fn(), - useDepositsWithFeeData: jest.fn(), } ) ); jest.mock( '@wordpress/api-fetch', () => jest.fn() ); @@ -49,6 +44,8 @@ const mockDeposits = [ amount: 2000, fee: 50, fee_percentage: 2.5, + processing_fees: 30, + instant_payout_fee: 20, status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', @@ -64,6 +61,8 @@ const mockDeposits = [ amount: 3000, fee: 75, fee_percentage: 2.5, + processing_fees: 50, + instant_payout_fee: 25, status: 'pending', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', @@ -79,6 +78,8 @@ const mockDeposits = [ amount: 4000, fee: 0, fee_percentage: 0, + processing_fees: 0, + instant_payout_fee: 0, status: 'paid', bankAccount: 'MOCK BANK •••• 1234 (USD)', currency: 'USD', @@ -127,10 +128,6 @@ const mockUseDepositsSummary = useDepositsSummary as jest.MockedFunction< typeof useDepositsSummary >; -const mockUseDepositsWithFeeData = useDepositsWithFeeData as jest.MockedFunction< - typeof useDepositsWithFeeData ->; - const mockUseUserPreferences = useUserPreferences as jest.MockedFunction< typeof useUserPreferences >; @@ -148,25 +145,6 @@ describe( 'Deposits list', () => { isRequesting: false, } as any ); - // Mock fee data for deposits - maps deposit ID to fee data - mockUseDepositsWithFeeData.mockReturnValue( { - po_mock1: { - totalFees: 50, - feesCurrency: 'USD', - grossAmount: 2050, - }, - po_mock2: { - totalFees: 75, - feesCurrency: 'USD', - grossAmount: 3075, - }, - po_mock3: { - totalFees: 0, - feesCurrency: 'USD', - grossAmount: 4000, - }, - } ); - global.wcpaySettings = { zeroDecimalCurrencies: [], connect: { diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 2f22c54092e..0ce25b7b37e 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -15,11 +15,7 @@ import { parseInt } from 'lodash'; * Internal dependencies. */ import type { DepositsTableHeader } from 'wcpay/types/deposits'; -import { - useDeposits, - useDepositsSummary, - useDepositsWithFeeData, -} from 'wcpay/data'; +import { useDeposits, useDepositsSummary } from 'wcpay/data'; import { displayType, depositStatusLabels } from '../strings'; import { formatExplicitCurrency, @@ -126,9 +122,6 @@ export const DepositsList = (): JSX.Element => { DepositsTableHeader >( 'wc_payments_payouts_hidden_columns', columns ); - // Fetch transaction summaries and calculate fee data for all deposits - const depositsFeeData = useDepositsWithFeeData( deposits ); - const totalRows = depositsSummary.count || 0; const rows = deposits.map( ( deposit ) => { @@ -153,14 +146,9 @@ export const DepositsList = (): JSX.Element => { ); - // Map deposit to table row. - // Get fee data from hook (includes total fees from transactions summary and gross amount). - // If the fee data is not available, default to 0 fees and the deposit currency. - const feeData = depositsFeeData[ deposit.id ] ?? { - totalFees: 0, - feesCurrency: deposit.currency, - grossAmount: deposit.amount, - }; + // Calculate fees: processing_fees + instant_payout_fee + const totalFees = deposit.processing_fees + deposit.instant_payout_fee; + const grossAmount = deposit.amount + totalFees; const data = { details: { value: deposit.id, display: detailsLink }, @@ -170,27 +158,15 @@ export const DepositsList = (): JSX.Element => { display: clickable( displayType[ deposit.type ] ), }, amount: { - value: formatExportAmount( - feeData.grossAmount, - deposit.currency - ), + value: formatExportAmount( grossAmount, deposit.currency ), display: clickable( - formatExplicitCurrency( - feeData.grossAmount, - deposit.currency - ) + formatExplicitCurrency( grossAmount, deposit.currency ) ), }, fees: { - value: formatExportAmount( - feeData.totalFees, - feeData.feesCurrency - ), + value: formatExportAmount( totalFees, deposit.currency ), display: clickable( - formatExplicitCurrency( - feeData.totalFees, - feeData.feesCurrency - ) + formatExplicitCurrency( totalFees, deposit.currency ) ), }, net: { diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts index b8e5394086a..60383c59ef2 100644 --- a/client/types/deposits.d.ts +++ b/client/types/deposits.d.ts @@ -30,6 +30,8 @@ export interface CachedDeposit { currency: string; fee_percentage: number; fee: number; + processing_fees: number; + instant_payout_fee: number; status: DepositStatus; bankAccount: string; automatic: boolean; From e61660997f33ceb31b39277665619493e7432680 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Mon, 10 Nov 2025 19:57:26 -0300 Subject: [PATCH 8/8] simplify things --- client/deposits/list/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx index 0ce25b7b37e..f50387702e1 100644 --- a/client/deposits/list/index.tsx +++ b/client/deposits/list/index.tsx @@ -146,10 +146,8 @@ export const DepositsList = (): JSX.Element => { ); - // Calculate fees: processing_fees + instant_payout_fee - const totalFees = deposit.processing_fees + deposit.instant_payout_fee; - const grossAmount = deposit.amount + totalFees; - + // Gross amount is the amount plus the fee + const grossAmount = deposit.amount + deposit.fee; const data = { details: { value: deposit.id, display: detailsLink }, date: { value: deposit.date, display: dateDisplay }, @@ -164,9 +162,9 @@ export const DepositsList = (): JSX.Element => { ), }, fees: { - value: formatExportAmount( totalFees, deposit.currency ), + value: formatExportAmount( deposit.fee, deposit.currency ), display: clickable( - formatExplicitCurrency( totalFees, deposit.currency ) + formatExplicitCurrency( deposit.fee, deposit.currency ) ), }, net: {