Fix WooPay pre-checking place order bug when buying a subscription

changelog/fix-woopay-pre-checking-save-my-info-place-order

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay pre-checking place order bug when buying a subscription.

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,
 	};
 };