Release branch for 7.4.0

.github/ISSUE_TEMPLATE/e2e_test_report.md

@@ -0,0 +1,39 @@
+---
+name: e2e test report
+about: Report an e2e test failure.
+title: ''
+labels: ['category: e2e', 'needs triage']
+assignees: ''
+
+---
+
+### Description
+<!-- Before reporting an issue, are you sure this e2e test is failing consistently? -->
+<!-- Add a clear and concise description of what the issue is. Please, be as descriptive as possible. -->
+<!-- Make sure you include relevant details such as what test/spec is failing and the link of the job where it started failing. -->
+
+**Output from the test failure**:
+<!-- Chunk of the output from the test failure. It doesn't need to be the entire output, just the relevant part. e.g.
+    TimeoutError: waiting for selector "..." failed: timeout 100000ms exceeded
+      336 | 	);
+    > 337 | 	const selector = await page.waitForSelector(
+          | 	                              ^
+      339 | 			'selector'
+ -->
+
+### Additional context
+<!-- Any additional context or details you think might be helpful. -->
+<!-- Ticket numbers/links, plugin versions, system statuses etc. -->
+
+### Priority
+<!-- Add a priority label based on your best judgement (quick is fine). -->
+<!-- Optional: add comments here to explain your decision or highlight any questions/potential risks. -->
+
+### Reason why this e2e test is broken
+<!-- Add one of the "e2e: broken flow/test/environment" labels based on your best judgement (quick is fine). -->
+<!-- Optional: add comments here to explain your decision. -->
+
+> [!Important]
+> Please, ensure when closing this issue (PR fix) that only one `e2e: broken` label is added and it is accurate.
+> - [ ] I confirmed there's only one `e2e: broken` label in this issue and it is accurate.
+<!-- Leave the above for who's fixing this issue. -->

.husky/pre-push

@@ -1,8 +1,11 @@
 #!/bin/bash
 . "$(dirname "$0")/_/husky.sh"
 
-# Allows us to read user input below, redirects script's input to the terminal.
-exec < /dev/tty
+# check if main stream (stdout and stderr) are attached to the terminal
+if [ -t 1 ] && [ -t 2 ]; then
+    # Allows us to read user input below, redirects script's input to the terminal.
+    exec < /dev/tty
+fi
 
 PROTECTED_BRANCH=("develop" "trunk")
 CURRENT_BRANCH=$(git branch --show-current)

assets/css/admin.css

@@ -17,10 +17,6 @@
 #adminmenu
 	#toplevel_page_wc-admin-path--payments-connect
 	.menu-icon-generic
-	div.wp-menu-image::before,
-#adminmenu
-	#toplevel_page_wc-admin-path--payments-deposits
-	.menu-icon-generic
 	div.wp-menu-image::before {
 	font-family: 'WCPay' !important;
 	content: '\e900';
@@ -36,7 +32,8 @@
 	height: 1.25rem;
 	width: 32px;
 	width: 2rem;
-	background-size: contain;
+	background-size: cover;
+	background-position: center;
 	background-repeat: no-repeat;
 	border-radius: 2px;
 	outline: 1px solid rgba( 0, 0, 0, 0.25 );

assets/css/admin.rtl.css

@@ -17,10 +17,6 @@
 #adminmenu
 	#toplevel_page_wc-admin-path--payments-connect
 	.menu-icon-generic
-	div.wp-menu-image::before,
-#adminmenu
-	#toplevel_page_wc-admin-path--payments-deposits
-	.menu-icon-generic
 	div.wp-menu-image::before {
 	font-family: 'WCPay' !important;
 	content: '\e900';
@@ -36,7 +32,8 @@
 	height: 1.25rem;
 	width: 32px;
 	width: 2rem;
-	background-size: contain;
+	background-size: cover;
+	background-position: center;
 	background-repeat: no-repeat;
 	border-radius: 2px;
 	outline: 1px solid rgba( 0, 0, 0, 0.25 );

changelog.txt

@@ -1,5 +1,56 @@
 *** WooPayments Changelog ***
 
+= 7.4.0 - 2024-03-27 =
+* Add - Add account reset for sandboxes
+* Add - Add a loading spinner to the "Proceed to Checkout" button in shortcode cart.
+* Add - Add data telemetry for the Proceed to Checkout button and the WooPay direct checkout.
+* Add - Added a notice about custom checkout fields conflicting with express checkouut
+* Add - Added a notice to inform the merchant when the payout bank account is in errored state
+* Add - Added a notice to the Deposits Listing screen when deposits are paused
+* Add - Add WooPay direct checkout flow behind a server-side feature flag.
+* Add - Add woopayMinimumSessionData in wcpayConfig when Express Checkout button's disabled o on car page.
+* Add - Customizing BNPL messaging with Appearance API
+* Add - Handle refunds triggered externally, outside WP Admin
+* Add - Preload WooPay session data for WooPay Direct Checkout flow.
+* Fix - Add empty validation when quering order by meta key and meta value
+* Fix - Add settings object for every gateway
+* Fix - Allow WooPay button preview on settings page
+* Fix - Apply the WooPay Direct Checkout flow only to the "Proceed to Checkout" button, in cthe classic cart.
+* Fix - Ensure card gateway is not running through the settings migration.
+* Fix - Ensure every gateway has individual settings object.
+* Fix - Ensure WooPay Direct Checkout continues to work as intended when WooPay Express Checkout is disabled on the cart page.
+* Fix - fix: "Add payment method" page initialization on missing UPE styles
+* Fix - fix: better error message when saved card and amount too large
+* Fix - Fixed a 1px gap on the right side of some payment method icons in transaction details.
+* Fix - Fixed Clearpay aria-label for UK sites
+* Fix - Fixes some instances where Stripe UPE styles add a black background to input fields.
+* Fix - Fix the cursor pointer when hovering over disabled checkboxes in Advanced Settings
+* Fix - Fix WooPay direct checkout eligibility checks.
+* Fix - Hide the option to refund in full from the transaction details menu when a transaction is partially refunded.
+* Fix - Inform hard blocked merchants they're under review
+* Fix - Load deposit overview only when deposit is present
+* Fix - Move test mode transactions notice to the top of the page.
+* Fix - Order completed and refunded emails are no longer sent when a dispute is closed.
+* Fix - Preventing stock quantity from being reduced twice.
+* Fix - Re-enable Direct-to-Checkout Feature Flag in WooPay OTP Iframe.
+* Fix - strtolower deprecation warning no longer appears on the Order Received and View Order pages when using PHP version 8.1+
+* Fix - Used client side navigation to improve the UX for "View Deposit History"
+* Fix - Uses WCPayAPI to initialise Stripe for BNPL payment element, includes necessary required parameters.
+* Update - Allow WooPay to request full session data from store.
+* Update - Clean up remaining unused code from a past experiment - `wcpay_empty_state_preview_mode`, done on Deposits list.
+* Update - Make the order note for `dispute funds withdrawn` event clearly mention that the dispute amount and fee would be deducted from the next deposit.
+* Update - Remove mention of test mode from general settings help text.
+* Update - Updated deposits API documentation to add default_external_accounts element
+* Update - Updates to reduce the amount of steps required during onboarding flow.
+* Update - Update the Payments Connect page design and logic
+* Update - Validate deposit id before sending a request to fetch deposit.
+* Dev - Bump WC tested up to version to 8.7.0 and set Requires Plugins header.
+* Dev - Ensure pre-push hook understands terminal & non-terminal environments
+* Dev - Fix a bug in Tracks where admin events were not recorded properly
+* Dev - Implement a feature flag for the Payment Overview widget.
+* Dev - Minor refactor to disputes utility function inInquiry to make it accept only dispute status as a param, instead of whole dispute object.
+* Dev - refactor: validator package bundle size improvements
+
 = 7.3.0 - 2024-03-06 =
 * Add - Added confirmation modals for order status changes with pending authorizations
 * Add - Add migration script to cover situations with Link and WooPay both enabled after plugin update.

client/cart/index.js

@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import { recordUserEvent } from 'tracks';
+import { getConfig } from 'wcpay/utils/checkout';
+import WooPayDirectCheckout from 'wcpay/checkout/woopay/direct-checkout/woopay-direct-checkout';
+
+const recordProceedToCheckoutButtonClick = () => {
+	recordUserEvent( 'wcpay_proceed_to_checkout_button_click', {
+		woopay_direct_checkout: Boolean(
+			getConfig( 'isWooPayDirectCheckoutEnabled' )
+		),
+	} );
+};
+
+const addProceedToCheckoutTracking = () => {
+	Object.values( WooPayDirectCheckout.redirectElements ).forEach(
+		( className ) => {
+			const proceedButton = document.querySelector( className );
+
+			if ( ! proceedButton ) {
+				return;
+			}
+
+			proceedButton.addEventListener(
+				'click',
+				recordProceedToCheckoutButtonClick
+			);
+		}
+	);
+};
+
+/**
+ * We need to register a MutationObserver in the classic checkout because if the
+ * user updates something in the cart page, the entire "Cart totals" section is
+ * re-rendered and the event listener is lost. For this reason, we need to register
+ * the event listener again, and just for that particular "Proceed to checkout" button.
+ *
+ * @return {void}
+ */
+const registerClassicCartCollateralsObserver = () => {
+	const cartCollateralsNode = document.querySelector( '.cart-collaterals' );
+
+	if ( ! cartCollateralsNode ) {
+		return;
+	}
+
+	const observer = new MutationObserver( () => {
+		const proceedButton = document.querySelector(
+			WooPayDirectCheckout.redirectElements.CLASSIC_CART_PROCEED_BUTTON
+		);
+
+		if ( ! proceedButton ) {
+			return;
+		}
+
+		proceedButton.addEventListener(
+			'click',
+			recordProceedToCheckoutButtonClick
+		);
+	} );
+
+	observer.observe( cartCollateralsNode, { childList: true, subtree: true } );
+};
+
+window.addEventListener( 'load', () => {
+	addProceedToCheckoutTracking();
+	registerClassicCartCollateralsObserver();
+} );

client/checkout/api/index.js

@@ -410,13 +410,13 @@ export default class WCPayAPI {
 	 * Saves the calculated UPE appearance values in a transient.
 	 *
 	 * @param {Object} appearance The UPE appearance object with style values
-	 * @param {string} isBlocksCheckout 'true' if save request is for Blocks Checkout. Default 'false'.
+	 * @param {string} elementsLocation The location of the elements.
 	 *
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	saveUPEAppearance( appearance, isBlocksCheckout = 'false' ) {
+	saveUPEAppearance( appearance, elementsLocation ) {
 		return this.request( getConfig( 'ajaxUrl' ), {
-			is_blocks_checkout: isBlocksCheckout,
+			elements_location: elementsLocation,
 			appearance: JSON.stringify( appearance ),
 			action: 'save_upe_appearance',
 			// eslint-disable-next-line camelcase

client/checkout/blocks/index.js

@@ -150,7 +150,7 @@ if ( getUPEConfig( 'isWooPayEnabled' ) ) {
 		handleWooPayEmailInput( '#email', api, true );
 	}
 
-	if ( getUPEConfig( 'isWoopayExpressCheckoutEnabled' ) ) {
+	if ( getUPEConfig( 'shouldShowWooPayButton' ) ) {
 		registerExpressPaymentMethod( wooPayExpressCheckoutPaymentMethod() );
 	}
 }

client/checkout/blocks/payment-elements.js

@@ -26,10 +26,10 @@ const PaymentElements = ( { api, ...props } ) => {
 	useEffect( () => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( true );
+			let upeAppearance = getAppearance( 'blocks_checkout' );
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
-				'true'
+				'blocks_checkout'
 			);
 			setAppearance( upeAppearance );
 		}

client/checkout/classic/payment-processing.js

@@ -50,7 +50,10 @@ async function initializeAppearance( api ) {
 		return Promise.resolve( appearance );
 	}
 
-	return await api.saveUPEAppearance( getAppearance() );
+	return await api.saveUPEAppearance(
+		getAppearance( 'shortcode_checkout' ),
+		'shortcode_checkout'
+	);
 }
 
 /**

client/checkout/classic/test/3ds-flow-handling.test.js

@@ -3,12 +3,6 @@
  */
 import { showAuthenticationModalIfRequired } from '../3ds-flow-handling';
 
-jest.mock( 'wcpay/checkout/utils/upe', () => {
-	return {
-		isWCPayChosen: jest.fn( () => true ),
-	};
-} );
-
 describe( 'showAuthenticationModalIfRequired', () => {
 	it( 'Should stop processing when no confirmation is needed', () => {
 		const replaceStateSpy = jest.spyOn( history, 'replaceState' );

client/checkout/classic/test/payment-processing.test.js

@@ -185,7 +185,8 @@ describe( 'Stripe Payment Element mounting', () => {
 
 		expect( getAppearance ).toHaveBeenCalled();
 		expect( apiMock.saveUPEAppearance ).toHaveBeenCalledWith(
-			appearanceMock
+			appearanceMock,
+			'shortcode_checkout'
 		);
 		expect( dispatchMock ).toHaveBeenCalled();
 	} );