Skip to content

Commit

Permalink
Payouts: Add payout bank reference key to payout reports and CSV (#9832)
Browse files Browse the repository at this point in the history
Co-authored-by: Nagesh Pai <nagesh.pai@automattic.com>
  • Loading branch information
nagpai and Nagesh Pai authored Nov 29, 2024
1 parent 6012025 commit b0b67af
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 1 deletion.
4 changes: 4 additions & 0 deletions changelog/add-5316-payout-trace-id
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions client/deposits/list/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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 } );
Expand Down
104 changes: 104 additions & 0 deletions client/deposits/list/test/__snapshots__/index.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,22 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
Bank account
</span>
</th>
<th
class="woocommerce-table__header is-left-aligned"
role="columnheader"
scope="col"
>
<span
aria-hidden="true"
>
Bank reference key
</span>
<span
class="screen-reader-text"
>
Bank reference key
</span>
</th>
</tr>
<tr>
<th
Expand Down Expand Up @@ -400,6 +416,18 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock1"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
<tr>
<th
Expand Down Expand Up @@ -487,6 +515,18 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock2"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
<tr>
<th
Expand Down Expand Up @@ -574,6 +614,18 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock3"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -949,6 +1001,22 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
Bank account
</span>
</th>
<th
class="woocommerce-table__header is-left-aligned"
role="columnheader"
scope="col"
>
<span
aria-hidden="true"
>
Bank reference key
</span>
<span
class="screen-reader-text"
>
Bank reference key
</span>
</th>
</tr>
<tr>
<th
Expand Down Expand Up @@ -1036,6 +1104,18 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock1"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
<tr>
<th
Expand Down Expand Up @@ -1123,6 +1203,18 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock2"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
<tr>
<th
Expand Down Expand Up @@ -1210,6 +1302,18 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
MOCK BANK •••• 1234 (USD)
</a>
</td>
<td
class="woocommerce-table__item is-left-aligned"
>
<a
class="woocommerce-table__clickable-cell"
data-link-type="wc-admin"
href="admin.php?page=wc-admin&path=%2Fpayments%2Fpayouts%2Fdetails&id=po_mock3"
tabindex="-1"
>
mock_reference_key
</a>
</td>
</tr>
</tbody>
</table>
Expand Down
7 changes: 7 additions & 0 deletions client/deposits/list/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -71,6 +73,7 @@ const mockDeposits = [
status: 'paid',
bankAccount: 'MOCK BANK •••• 1234 (USD)',
currency: 'USD',
bank_reference_key: 'mock_reference_key',
} as CachedDeposit,
];

Expand Down Expand Up @@ -287,6 +290,7 @@ describe( 'Deposits list', () => {
'Amount',
'Status',
'"Bank account"',
'"Bank reference key"',
];

const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];
Expand Down Expand Up @@ -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 () => {
Expand Down
10 changes: 9 additions & 1 deletion client/types/deposits.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -24,6 +31,7 @@ export interface CachedDeposit {
status: DepositStatus;
bankAccount: string;
automatic: boolean;
bank_reference_key: string;
}

export interface DepositsSummaryCache {
Expand Down

0 comments on commit b0b67af

Please sign in to comment.