Merge release/8.2.2 into trunk

changelog.txt

@@ -1,5 +1,8 @@
 *** WooPayments Changelog ***
 
+= 8.2.2 - 2024-09-24 =
+* Fix - Fix WooPay pre-checking place order bug when buying a subscription.
+
 = 8.2.1 - 2024-09-13 =
 * Fix - Create div container element with JS dynamically.
 

client/components/woopay/hooks/use-selected-payment-method.js

@@ -2,40 +2,22 @@
  * External dependencies
  */
 import { useEffect, useState } from 'react';
+import { useSelect } from '@wordpress/data';
+import { PAYMENT_STORE_KEY } from '@woocommerce/block-data'; // eslint-disable-line import/no-unresolved
 
-const getWCPayRadioButtonStatus = ( isBlocksCheckout ) =>
-	isBlocksCheckout
-		? document.querySelector(
-				'#radio-control-wc-payment-method-options-woocommerce_payments'
-		  )?.checked
-		: document.querySelector( '#payment_method_woocommerce_payments' )
-				?.checked;
-
-const getNewPaymentTokenRadioButtonStatus = ( isBlocksCheckout ) =>
-	isBlocksCheckout
-		? document.querySelector(
-				'#radio-control-wc-payment-method-options-woocommerce_payments'
-		  )?.checked
-		: document.querySelector( '#wc-woocommerce_payments-payment-token-new' )
-				?.checked ||
-		  ! document.querySelector(
-				'[type=radio][name="wc-woocommerce_payments-payment-token"]'
-		  );
+const getWCPayRadioButtonStatus = () => {
+	return document.querySelector( '#payment_method_woocommerce_payments' )
+		?.checked;
+};
 
-const getPaymentMethods = ( isBlocksCheckout ) => {
-	if ( isBlocksCheckout ) {
-		// For blocks checkout there is no common selector to find all the payment methods including the
-		// saved tokens. Thus need to concate them here to make a whole list.
-		return [
-			...document.querySelectorAll(
-				'[type=radio][name="radio-control-wc-payment-method-options"]'
-			),
-			...document.querySelectorAll(
-				'[type=radio][name="radio-control-wc-payment-method-saved-tokens"]'
-			),
-		];
-	}
-	// for classic checkout
+const getNewPaymentTokenRadioButtonStatus = () =>
+	document.querySelector( '#wc-woocommerce_payments-payment-token-new' )
+		?.checked ||
+	! document.querySelector(
+		'[type=radio][name="wc-woocommerce_payments-payment-token"]'
+	);
+
+const getPaymentMethods = () => {
 	return document.querySelectorAll( '[type=radio][name="payment_method"]' );
 };
 
@@ -51,15 +33,28 @@ const getPaymentTokens = ( isBlocksCheckout ) => {
 
 // hook for checking if WCPay is selected.
 const useSelectedPaymentMethod = ( isBlocksCheckout ) => {
+	// For blocks checkout, we use the store to get the active payment method.
+	const { isWCPayChosenOnBlocksCheckout } = useSelect( ( select ) => {
+		const store = select( PAYMENT_STORE_KEY );
+		return {
+			isWCPayChosenOnBlocksCheckout:
+				store.getActivePaymentMethod() === 'woocommerce_payments',
+		};
+	} );
+
 	const [ isWCPayChosen, setIsWCPayChosen ] = useState(
-		getWCPayRadioButtonStatus( isBlocksCheckout )
+		! isBlocksCheckout && getWCPayRadioButtonStatus()
 	);
 
 	const [ isNewPaymentTokenChosen, setNewPaymentTokenChosen ] = useState(
-		getNewPaymentTokenRadioButtonStatus( isBlocksCheckout )
+		! isBlocksCheckout && getNewPaymentTokenRadioButtonStatus()
 	);
 
 	useEffect( () => {
+		if ( isBlocksCheckout ) {
+			return;
+		}
+
 		// hides the `Save payment information to my account for future purchases` checkbox.
 		const hideCheckbox = () => {
 			const checkbox = document.querySelector(
@@ -87,7 +82,7 @@ const useSelectedPaymentMethod = ( isBlocksCheckout ) => {
 			);
 		};
 
-		const paymentMethods = getPaymentMethods( isBlocksCheckout );
+		const paymentMethods = getPaymentMethods();
 
 		paymentMethods.forEach( ( paymentMethod ) => {
 			paymentMethod.addEventListener( 'change', updateIsWCPayChosen );
@@ -119,8 +114,12 @@ const useSelectedPaymentMethod = ( isBlocksCheckout ) => {
 	}, [ isBlocksCheckout ] );
 
 	return {
-		isWCPayChosen,
-		isNewPaymentTokenChosen,
+		isWCPayChosen: isBlocksCheckout
+			? isWCPayChosenOnBlocksCheckout
+			: isWCPayChosen,
+		isNewPaymentTokenChosen: isBlocksCheckout
+			? isWCPayChosenOnBlocksCheckout
+			: isNewPaymentTokenChosen,
 	};
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "woocommerce-payments",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "main": "webpack.config.js",
   "author": "Automattic",
   "license": "GPL-3.0-or-later",

readme.txt

@@ -4,7 +4,7 @@ Tags: woocommerce payments, apple pay, credit card, google pay, payment, payment
 Requires at least: 6.0
 Tested up to: 6.6
 Requires PHP: 7.3
-Stable tag: 8.2.1
+Stable tag: 8.2.2
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -94,6 +94,10 @@ Please note that our support for the checkout block is still experimental and th
 
 == Changelog ==
 
+= 8.2.2 - 2024-09-24 =
+* Fix - Fix WooPay pre-checking place order bug when buying a subscription.
+
+
 = 8.2.1 - 2024-09-13 =
 * Fix - Create div container element with JS dynamically.
 

woocommerce-payments.php

@@ -11,7 +11,7 @@
  * WC tested up to: 9.2.0
  * Requires at least: 6.0
  * Requires PHP: 7.3
- * Version: 8.2.1
+ * Version: 8.2.2
  * Requires Plugins: woocommerce
  *
  * @package WooCommerce\Payments