Reporting: Show bank reference ID on Payout details page

changelog/add-9878-bank-ref-key-payout-details

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Show Bank reference key on top of the payout details page, whenever available.

client/components/copy-button/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface CopyButtonProps {
+	/**
+	 * The text to copy to the clipboard.
+	 */
+	textToCopy: string;
+
+	/**
+	 * The label for the button. Also used as the aria-label.
+	 */
+	label: string;
+}
+
+export const CopyButton: React.FC< CopyButtonProps > = ( {
+	textToCopy,
+	label,
+} ) => {
+	// useRef() is used to store the timer reference for the setTimeout() function.
+	const timerRef = useRef< NodeJS.Timeout | null >( null );
+
+	// useEffect() is used to clear the timer reference when the component is unmounted.
+	useEffect( () => {
+		return () => {
+			if ( timerRef.current ) {
+				clearTimeout( timerRef.current );
+			}
+		};
+	}, [] );
+
+	const [ copied, setCopied ] = useState( false );
+
+	const copyToClipboard = () => {
+		navigator.clipboard.writeText( textToCopy );
+		setCopied( true );
+		timerRef.current = setTimeout( () => {
+			setCopied( false );
+		}, 2000 );
+	};
+
+	return (
+		<button
+			type="button"
+			className={ classNames( 'woopayments-copy-button', {
+				'state--copied': copied,
+			} ) }
+			aria-label={ label }
+			title={ __( 'Copy to clipboard', 'woocommerce-payments' ) }
+			onClick={ copyToClipboard }
+		>
+			<i></i>
+		</button>
+	);
+};

client/components/copy-button/style.scss

@@ -0,0 +1,37 @@
+.woopayments-copy-button {
+	line-height: 1.2em;
+	display: inline-flex;
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	vertical-align: middle;
+	font-weight: normal;
+	cursor: pointer;
+	color: inherit;
+	margin-left: 2px;
+	align-items: center;
+
+	i {
+		display: block;
+		width: 1.2em;
+		height: 1.2em;
+		mask-image: url( 'assets/images/icons/copy.svg?asset' );
+		mask-size: contain;
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: currentColor;
+
+		&:hover {
+			opacity: 0.7;
+		}
+
+		&:active {
+			transform: scale( 0.9 );
+		}
+	}
+
+	&.state--copied i {
+		mask-image: url( 'assets/images/icons/check-green.svg?asset' );
+		background-color: $studio-green-50;
+	}
+}

client/components/copy-button/test/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopyButton renders the button correctly 1`] = `
+<div>
+  <button
+    aria-label="Copy bank reference ID to clipboard"
+    class="woopayments-copy-button"
+    title="Copy to clipboard"
+    type="button"
+  >
+    <i />
+  </button>
+</div>
+`;

client/components/copy-button/test/index.test.tsx

@@ -0,0 +1,70 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { CopyButton } from '..';
+
+describe( 'CopyButton', () => {
+	it( 'renders the button correctly', () => {
+		const { container: copyButtonContainer } = render(
+			<CopyButton
+				textToCopy="test_bank_reference_id"
+				label="Copy bank reference ID to clipboard"
+			/>
+		);
+
+		expect( copyButtonContainer ).toMatchSnapshot();
+	} );
+
+	describe( 'when the button is clicked', () => {
+		beforeAll( () => {
+			jest.useFakeTimers();
+		} );
+
+		afterAll( () => {
+			jest.useRealTimers();
+		} );
+
+		it( 'copies the text to the clipboard and shows copied state', () => {
+			render(
+				<CopyButton
+					textToCopy="test_bank_reference_id"
+					label="Copy bank reference ID to clipboard"
+				/>
+			);
+
+			const button = screen.queryByRole( 'button', {
+				name: /Copy bank reference ID to clipboard/i,
+			} );
+
+			//Mock the clipboard API
+			Object.assign( navigator, {
+				clipboard: {
+					writeText: jest.fn(),
+				},
+			} );
+
+			act( () => {
+				button?.click();
+			} );
+
+			expect( navigator.clipboard.writeText ).toHaveBeenCalledWith(
+				'test_bank_reference_id'
+			);
+			expect( button ).toHaveClass( 'state--copied' );
+
+			act( () => {
+				jest.advanceTimersByTime( 2000 );
+			} );
+
+			expect( button ).not.toHaveClass( 'state--copied' );
+		} );
+	} );
+} );

client/deposits/details/index.tsx

@@ -30,6 +30,7 @@ import classNames from 'classnames';
 import type { CachedDeposit } from 'types/deposits';
 import { useDeposit } from 'data';
 import TransactionsList from 'transactions/list';
+import { CopyButton } from 'components/copy-button';
 import Page from 'components/page';
 import ErrorBoundary from 'components/error-boundary';
 import { TestModeNotice } from 'components/test-mode-notice';
@@ -70,7 +71,7 @@ interface SummaryItemProps {
 	label: string;
 	value: string | JSX.Element;
 	valueClass?: string | false;
-	detail?: string;
+	detail?: string | JSX.Element;
 }
 
 /**
@@ -102,35 +103,20 @@ const SummaryItem: React.FC< SummaryItemProps > = ( {
 	</li>
 );
 
-interface DepositOverviewProps {
-	deposit: CachedDeposit | undefined;
+interface DepositDateItemProps {
+	deposit: CachedDeposit;
 }
 
-export const DepositOverview: React.FC< DepositOverviewProps > = ( {
-	deposit,
-} ) => {
-	if ( ! deposit ) {
-		return (
-			<InlineNotice icon status="error" isDismissible={ false }>
-				{ __(
-					`The deposit you are looking for cannot be found.`,
-					'woocommerce-payments'
-				) }
-			</InlineNotice>
-		);
-	}
-
-	const isWithdrawal = deposit.type === 'withdrawal';
-
+const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => {
 	let depositDateLabel = __( 'Payout date', 'woocommerce-payments' );
 	if ( ! deposit.automatic ) {
 		depositDateLabel = __( 'Instant payout date', 'woocommerce-payments' );
 	}
-	if ( isWithdrawal ) {
+	if ( deposit.type === 'withdrawal' ) {
 		depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' );
 	}
 
-	const depositDateItem = (
+	return (
 		<SummaryItem
 			key="depositDate"
 			label={
@@ -142,16 +128,35 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 				)
 			}
 			value={ <DepositStatusIndicator deposit={ deposit } /> }
-			detail={ deposit.bankAccount }
 		/>
 	);
+};
+interface DepositOverviewProps {
+	deposit: CachedDeposit | undefined;
+}
+
+export const DepositOverview: React.FC< DepositOverviewProps > = ( {
+	deposit,
+} ) => {
+	if ( ! deposit ) {
+		return (
+			<InlineNotice icon status="error" isDismissible={ false }>
+				{ __(
+					`The deposit you are looking for cannot be found.`,
+					'woocommerce-payments'
+				) }
+			</InlineNotice>
+		);
+	}
+
+	const isWithdrawal = deposit.type === 'withdrawal';
 
 	return (
 		<div className="wcpay-deposit-overview">
 			{ deposit.automatic ? (
 				<Card className="wcpay-deposit-automatic">
 					<ul>
-						{ depositDateItem }
+						<DepositDateItem deposit={ deposit } />
 						<li className="wcpay-deposit-amount">
 							{ formatExplicitCurrency(
 								deposit.amount,
@@ -161,7 +166,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					</ul>
 				</Card>
 			) : (
-				<SummaryList
+				<SummaryList // For instant deposits only
 					label={
 						isWithdrawal
 							? __(
@@ -172,7 +177,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					}
 				>
 					{ () => [
-						depositDateItem,
+						<DepositDateItem key="dateItem" deposit={ deposit } />,
 						<SummaryItem
 							key="depositAmount"
 							label={
@@ -228,6 +233,53 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					] }
 				</SummaryList>
 			) }
+			<Card>
+				<CardHeader>
+					<Text size={ 16 } weight={ 600 }>
+						{ isWithdrawal
+							? __( 'Withdrawal details', 'woocommerce-payments' )
+							: __( 'Payout details', 'woocommerce-payments' ) }
+					</Text>
+				</CardHeader>
+				<CardBody>
+					<div className="woopayments-payout-details-header">
+						<h2>
+							{ __( 'Bank account', 'woocommerce-payments' ) }
+						</h2>
+						<div className="woopayments-payout-details-header__value">
+							{ deposit.bankAccount }
+						</div>
+						<h2>
+							{ __(
+								'Bank reference ID',
+								'woocommerce-payments'
+							) }
+						</h2>
+						<div>
+							{ deposit.bank_reference_key ? (
+								<>
+									<span className="woopayments-payout-details-header__bank-reference-id">
+										{ deposit.bank_reference_key }
+									</span>
+									<CopyButton
+										textToCopy={
+											deposit.bank_reference_key
+										}
+										label={ __(
+											'Copy bank reference ID to clipboard',
+											'woocommerce-payments'
+										) }
+									/>
+								</>
+							) : (
+								<div className="woopayments-payout-details-header__value">
+									Not available
+								</div>
+							) }
+						</div>
+					</div>
+				</CardBody>
+			</Card>
 		</div>
 	);
 };