Merge branch 'develop' into add/9826-payment-methods-logos-component

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.

changelog/dev-10063-playwright-migration-shopper-checkout-purchase-site-editor

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert shopper checkout with site editor theme spec to Playwright

changelog/dev-9964-playwright-migration-order-refund-failures

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert order refund failure E2E tests to Playwright

changelog/dev-create-new-customer-for-each-pw-test

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Refresh customer instance with REST API, replace customer creation by new order with anonymous customer

changelog/fix-10193-woopay-express-button-fatal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent potential fatal when initializing the WooPay express checkout button.

client/components/copy-button/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import React, { useState } 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,
+} ) => {
+	const [ copied, setCopied ] = useState( false );
+
+	const copyToClipboard = () => {
+		navigator.clipboard.writeText( textToCopy );
+		setCopied( true );
+	};
+
+	return (
+		<button
+			type="button"
+			className={ classNames( 'woopayments-copy-button', {
+				'state--copied': copied,
+			} ) }
+			aria-label={ label }
+			title={ __( 'Copy to clipboard', 'woocommerce-payments' ) }
+			onClick={ copyToClipboard }
+			onAnimationEnd={ () => setCopied( false ) }
+		>
+			<i></i>
+		</button>
+	);
+};

client/components/copy-button/style.scss

@@ -0,0 +1,51 @@
+.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;
+		animation: copy-indicator 2s forwards;
+	}
+
+	@keyframes copy-indicator {
+		0% {
+			opacity: 1;
+		}
+		95% {
+			opacity: 1;
+		}
+		// a quick fade-out from 1%→0% at the end
+		100% {
+			opacity: 0;
+		}
+	}
+}

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,67 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * 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', () => {
+		it( 'copies the text to the clipboard and shows copied state', async () => {
+			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,
+			} );
+
+			if ( ! button ) {
+				throw new Error( 'Button not found' );
+			}
+
+			//Mock the clipboard API
+			Object.assign( navigator, {
+				clipboard: {
+					writeText: jest.fn().mockResolvedValueOnce( undefined ),
+				},
+			} );
+
+			await act( async () => {
+				fireEvent.click( button );
+			} );
+
+			expect( navigator.clipboard.writeText ).toHaveBeenCalledWith(
+				'test_bank_reference_id'
+			);
+			expect( button ).toHaveClass( 'state--copied' );
+
+			act( () => {
+				fireEvent.animationEnd( button );
+			} );
+
+			expect( button ).not.toHaveClass( 'state--copied' );
+		} );
+	} );
+} );

client/deposits/details/index.tsx

@@ -28,6 +28,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';
@@ -68,7 +69,7 @@ interface SummaryItemProps {
 	label: string;
 	value: string | JSX.Element;
 	valueClass?: string | false;
-	detail?: string;
+	detail?: string | JSX.Element;
 }
 
 /**
@@ -100,6 +101,30 @@ const SummaryItem: React.FC< SummaryItemProps > = ( {
 	</li>
 );
 
+interface DepositDateItemProps {
+	deposit: CachedDeposit;
+}
+
+const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => {
+	let depositDateLabel = __( 'Payout date', 'woocommerce-payments' );
+	if ( ! deposit.automatic ) {
+		depositDateLabel = __( 'Instant payout date', 'woocommerce-payments' );
+	}
+	if ( deposit.type === 'withdrawal' ) {
+		depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' );
+	}
+
+	return (
+		<SummaryItem
+			key="depositDate"
+			label={
+				`${ depositDateLabel }: ` +
+				formatDateTimeFromString( deposit.date )
+			}
+			value={ <DepositStatusIndicator deposit={ deposit } /> }
+		/>
+	);
+};
 interface DepositOverviewProps {
 	deposit: CachedDeposit | undefined;
 }
@@ -120,32 +145,12 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 
 	const isWithdrawal = deposit.type === 'withdrawal';
 
-	let depositDateLabel = __( 'Payout date', 'woocommerce-payments' );
-	if ( ! deposit.automatic ) {
-		depositDateLabel = __( 'Instant payout date', 'woocommerce-payments' );
-	}
-	if ( isWithdrawal ) {
-		depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' );
-	}
-
-	const depositDateItem = (
-		<SummaryItem
-			key="depositDate"
-			label={
-				`${ depositDateLabel }: ` +
-				formatDateTimeFromString( deposit.date )
-			}
-			value={ <DepositStatusIndicator deposit={ deposit } /> }
-			detail={ deposit.bankAccount }
-		/>
-	);
-
 	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,
@@ -155,7 +160,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					</ul>
 				</Card>
 			) : (
-				<SummaryList
+				<SummaryList // For instant deposits only
 					label={
 						isWithdrawal
 							? __(
@@ -166,7 +171,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					}
 				>
 					{ () => [
-						depositDateItem,
+						<DepositDateItem key="dateItem" deposit={ deposit } />,
 						<SummaryItem
 							key="depositAmount"
 							label={
@@ -222,6 +227,60 @@ 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">
+						<div className="woopayments-payout-details-header__item">
+							<h2>
+								{ __( 'Bank account', 'woocommerce-payments' ) }
+							</h2>
+							<div className="woopayments-payout-details-header__value">
+								{ deposit.bankAccount }
+							</div>
+						</div>
+						<div className="woopayments-payout-details-header__item">
+							<h2>
+								{ __(
+									'Bank reference ID',
+									'woocommerce-payments'
+								) }
+							</h2>
+							<div className="woopayments-payout-details-header__value">
+								{ 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',
+											'woocommerce-payments'
+										) }
+									</div>
+								) }
+							</div>
+						</div>
+					</div>
+				</CardBody>
+			</Card>
 		</div>
 	);
 };