diff --git a/changelog/add-5316-payout-trace-id b/changelog/add-5316-payout-trace-id
new file mode 100644
index 00000000000..a5e90413a86
--- /dev/null
+++ b/changelog/add-5316-payout-trace-id
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Bank reference key column in Payout reports. This will help reconcile WooPayments Payouts with bank statements.
diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx
index c991e7e7ec3..b74c14bca61 100644
--- a/client/deposits/list/index.tsx
+++ b/client/deposits/list/index.tsx
@@ -97,6 +97,11 @@ const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [
screenReaderLabel: __( 'Bank account', 'woocommerce-payments' ),
isLeftAligned: true,
},
+ {
+ key: 'bankReferenceKey',
+ label: __( 'Bank reference key', 'woocommerce-payments' ),
+ screenReaderLabel: __( 'Bank reference key', 'woocommerce-payments' ),
+ },
];
export const DepositsList = (): JSX.Element => {
@@ -165,6 +170,10 @@ export const DepositsList = (): JSX.Element => {
value: deposit.bankAccount,
display: clickable( deposit.bankAccount ),
},
+ bankReferenceKey: {
+ value: deposit.bank_reference_key,
+ display: clickable( deposit.bank_reference_key ?? 'N/A' ),
+ },
};
return columns.map( ( { key } ) => data[ key ] || { display: null } );
diff --git a/client/deposits/list/test/__snapshots__/index.tsx.snap b/client/deposits/list/test/__snapshots__/index.tsx.snap
index 86e84ecd1d1..9e15ae2f735 100644
--- a/client/deposits/list/test/__snapshots__/index.tsx.snap
+++ b/client/deposits/list/test/__snapshots__/index.tsx.snap
@@ -313,6 +313,22 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
Bank account
+
|
+ |
+
+ mock_reference_key
+
+ |
|
+ |
+
+ mock_reference_key
+
+ |
|
+ |
+
+ mock_reference_key
+
+ |
@@ -949,6 +1001,22 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
Bank account
+
|
+ |
+
+ mock_reference_key
+
+ |
|
+ |
+
+ mock_reference_key
+
+ |
|
+ |
+
+ mock_reference_key
+
+ |
diff --git a/client/deposits/list/test/index.tsx b/client/deposits/list/test/index.tsx
index d70561fb6d4..628dc670346 100644
--- a/client/deposits/list/test/index.tsx
+++ b/client/deposits/list/test/index.tsx
@@ -53,6 +53,7 @@ const mockDeposits = [
status: 'paid',
bankAccount: 'MOCK BANK •••• 1234 (USD)',
currency: 'USD',
+ bank_reference_key: 'mock_reference_key',
} as CachedDeposit,
{
id: 'po_mock2',
@@ -62,6 +63,7 @@ const mockDeposits = [
status: 'pending',
bankAccount: 'MOCK BANK •••• 1234 (USD)',
currency: 'USD',
+ bank_reference_key: 'mock_reference_key',
} as CachedDeposit,
{
id: 'po_mock3',
@@ -71,6 +73,7 @@ const mockDeposits = [
status: 'paid',
bankAccount: 'MOCK BANK •••• 1234 (USD)',
currency: 'USD',
+ bank_reference_key: 'mock_reference_key',
} as CachedDeposit,
];
@@ -287,6 +290,7 @@ describe( 'Deposits list', () => {
'Amount',
'Status',
'"Bank account"',
+ '"Bank reference key"',
];
const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];
@@ -332,6 +336,9 @@ describe( 'Deposits list', () => {
expect( csvFirstDeposit[ 5 ] ).toBe(
`"${ displayFirstDeposit[ 4 ] }"`
); // bank account
+ expect( csvFirstDeposit[ 6 ] ).toBe(
+ `${ displayFirstDeposit[ 5 ] }`
+ ); // bank reference key
} );
test( 'should fetch export after confirmation when download button is selected for unfiltered exports larger than 1000.', async () => {
diff --git a/client/types/deposits.d.ts b/client/types/deposits.d.ts
index ce749a58c30..29ebb263977 100644
--- a/client/types/deposits.d.ts
+++ b/client/types/deposits.d.ts
@@ -2,7 +2,14 @@
import { TableCardColumn } from '@woocommerce/components';
export interface DepositsTableHeader extends TableCardColumn {
- key: 'details' | 'date' | 'type' | 'amount' | 'status' | 'bankAccount';
+ key:
+ | 'details'
+ | 'date'
+ | 'type'
+ | 'amount'
+ | 'status'
+ | 'bankAccount'
+ | 'bankReferenceKey';
cellClassName?: string;
}
@@ -24,6 +31,7 @@ export interface CachedDeposit {
status: DepositStatus;
bankAccount: string;
automatic: boolean;
+ bank_reference_key: string;
}
export interface DepositsSummaryCache {