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..8398bb8b080 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
+
+
|
+
+ $20.50
+
+ |
+
+
+ $0.50
+
+ |
@@ -632,6 +738,30 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
Withdrawal
|
+
+
+ $30.75
+
+ |
+
+
+ $0.75
+
+ |
@@ -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
+ |
+
+
+ $20.50
+
+ |
+
+
+ $0.50
+
+ |
@@ -1477,6 +1737,30 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
Withdrawal
|
+
+
+ $30.75
+
+ |
+
+
+ $0.75
+
+ |
@@ -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..5cdc9fe1261 100644
--- a/client/deposits/list/__tests__/index.test.tsx
+++ b/client/deposits/list/__tests__/index.test.tsx
@@ -42,30 +42,51 @@ const mockDeposits = [
date: '2020-01-02 17:46:02',
type: 'deposit',
amount: 2000,
+ fee: 50,
+ fee_percentage: 2.5,
+ processing_fees: 30,
+ instant_payout_fee: 20,
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',
date: '2020-01-03 17:46:02',
type: 'withdrawal',
amount: 3000,
+ fee: 75,
+ fee_percentage: 2.5,
+ processing_fees: 50,
+ instant_payout_fee: 25,
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',
date: '2020-01-04 17:46:02',
type: 'withdrawal',
amount: 4000,
+ fee: 0,
+ fee_percentage: 0,
+ processing_fees: 0,
+ instant_payout_fee: 0,
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,
];
diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx
index c09cbd027d5..f50387702e1 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' ),
@@ -98,7 +113,6 @@ export const DepositsList = (): JSX.Element => {
const { depositsSummary, isLoading: isSummaryLoading } = useDepositsSummary(
getQuery()
);
-
const { requestReportExport, isExportInProgress } = useReportExport();
const { createNotice } = useDispatch( 'core/notices' );
@@ -132,7 +146,8 @@ export const DepositsList = (): JSX.Element => {
);
- // Map deposit to table row.
+ // 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 },
@@ -141,6 +156,18 @@ export const DepositsList = (): JSX.Element => {
display: clickable( displayType[ deposit.type ] ),
},
amount: {
+ value: formatExportAmount( grossAmount, deposit.currency ),
+ display: clickable(
+ formatExplicitCurrency( grossAmount, deposit.currency )
+ ),
+ },
+ fees: {
+ value: formatExportAmount( deposit.fee, deposit.currency ),
+ display: clickable(
+ formatExplicitCurrency( deposit.fee, deposit.currency )
+ ),
+ },
+ net: {
value: formatExportAmount( deposit.amount, deposit.currency ),
display: clickable(
formatExplicitCurrency( deposit.amount, deposit.currency )
diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts
index 6c41a561d87..60383c59ef2 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';
@@ -28,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;
|