Merge branch 'develop' into update/deprecating-sofort-from-checkout

changelog/add-7348-multi-currency-widget-setup-e2e-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add e2e tests for the multi-currency widget setup.

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-10066-playwright-migration-shopper-checkout-save-card-and-purchase

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert shopper checkout save card and purchase test to Playwright

changelog/dev-10069-e2e-convert-shopper-myaccount-payment-methods-add-fail-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert the shopper-myaccount-payment-methods-add-fail spec from Puppeteer to Playwright.

changelog/dev-10073-convert-shopper-wc-blocks-checkout-failures-spec

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Convert shopper-wc-blocks-checkout-failures spec from Puppeteer to Playwright
+
+

changelog/dev-10075-playwright-migration-shopper-wc-blocks-saved-card-checkout-and-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert Shopper WC Blocks saved card checkout and usage test to Playwright

changelog/dev-10210-fix-saving-woopayments-settings

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Refactoring of snackbar checks in Playwright e2e tests

changelog/dev-10262-flaky-mccy-test

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix flaky Multi-Currency test.

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-10023-handle-repeated_card-present-payment-failures

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Added timestamp to the order note when terminal payment fails.

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.

changelog/fix-10249-remove-subscriptions-jest-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove the subscriptions spec for Puppeteer

changelog/fix-playwright-saved-card-flakiness

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix flakiness in saved card tests caused by selling the same cart multiple times, triggering duplicate order protection

changelog/fix-tokenized-ece-with-no-address-on-initialization

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: avoid ECE error when no address is provided on initialization

changelog/update-9811-design-improvements-overview-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Design improvements related to the overview page

changelog/update-bump-wc-tested-up-to-9-6

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Bump wc tested up to 9.6.0
+
+

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/components/deposits-status/index.tsx

@@ -4,15 +4,17 @@
  * External dependencies
  */
 import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
 import GridiconNotice from 'gridicons/dist/notice';
-import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
 import React from 'react';
 
 /**
  * Internal dependencies
  */
 import 'components/account-status/shared.scss';
+import { ClickTooltip } from 'wcpay/components/tooltip';
 import type { AccountStatus } from 'wcpay/types/account/account-status';
 
 type DepositsStatus = 'enabled' | 'disabled' | 'blocked';
@@ -62,31 +64,47 @@ const DepositsStatusDisabled: React.FC< DepositsStatusProps > = ( props ) => {
 const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => {
 	const { iconSize } = props;
 
-	const learnMoreHref =
-		'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/';
-
-	const description = createInterpolateElement(
+	const description =
 		/* translators: <a> - suspended accounts FAQ URL */
-		__(
-			'Temporarily suspended (<a>learn more</a>)',
-			'woocommerce-payments'
-		),
-		{
-			a: (
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				<a
-					href={ learnMoreHref }
-					target="_blank"
-					rel="noopener noreferrer"
-				/>
-			),
-		}
-	);
+		__( 'Temporarily suspended', 'woocommerce-payments' );
 
 	return (
 		<span className={ 'account-status__info__yellow' }>
 			<GridiconNotice size={ iconSize } />
 			{ description }
+			<ClickTooltip
+				maxWidth={ '300px' }
+				buttonIcon={ <HelpOutlineIcon /> }
+				buttonLabel={ __(
+					'Learn more about payouts suspended',
+					'woocommerce-payments'
+				) }
+				content={ interpolateComponents( {
+					mixedString: sprintf(
+						/* translators: 1: WooPayments */
+						__(
+							// eslint-disable-next-line max-len
+							'After the information review, your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+							'woocommerce-payments'
+						),
+						'WooPayments'
+					),
+					components: {
+						learnMoreLink: (
+							// eslint-disable-next-line jsx-a11y/anchor-has-content
+							<a
+								href={
+									// eslint-disable-next-line max-len
+									'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'
+								}
+								target="_blank"
+								rel="noreferrer"
+								type="external"
+							/>
+						),
+					},
+				} ) }
+			/>
 		</span>
 	);
 };