Delegate spinner unblock to WooCommerce events

Author: hmouhtar

modules/ppcp-blocks/resources/js/Components/paypal.js

@@ -21,6 +21,7 @@ import {
 	onApproveSavePayment,
 } from '../paypal-config';
 import { useRef } from 'react';
+import Spinner from '../../../../ppcp-button/resources/js/modules/Helper/Spinner';
 
 const PAYPAL_GATEWAY_ID = 'ppcp-gateway';
 
@@ -52,8 +53,11 @@ export const PayPalComponent = ( {
 		useState( false );
 
 	const [ paypalScriptLoaded, setPaypalScriptLoaded ] = useState( false );
+	const [ isFullPageSpinnerActive, setIsFullPageSpinnerActive ] =
+		useState( false );
 
 	const paypalButtonRef = useRef( null );
+	const spinnerRef = useRef( null );
 
 	if ( ! paypalScriptLoaded ) {
 		if ( ! paypalScriptPromise ) {
@@ -70,6 +74,18 @@ export const PayPalComponent = ( {
 		? `${ config.id }-${ fundingSource }`
 		: config.id;
 
+	// Full-page spinner used to block UI interactions during flows like AppSwitch.
+	useEffect( () => {
+		if ( isFullPageSpinnerActive ) {
+			if ( ! spinnerRef.current ) {
+				spinnerRef.current = Spinner.fullPage();
+			}
+			spinnerRef.current.block();
+		} else if ( spinnerRef.current ) {
+			spinnerRef.current.unblock();
+		}
+	}, [ isFullPageSpinnerActive ] );
+
 	useEffect( () => {
 		// fill the form if in continuation (for product or mini-cart buttons)
 		if ( continuationFilled || ! config.scriptData.continuation?.order ) {
@@ -286,12 +302,21 @@ export const PayPalComponent = ( {
 		};
 	}, [ onPaymentSetup, paypalOrder, activePaymentMethod ] );
 
+	useEffect( () => {
+		const unsubscribe = onCheckoutFail( () => {
+			setIsFullPageSpinnerActive( false );
+		} );
+
+		return unsubscribe;
+	}, [ onCheckoutFail ] );
+
 	useEffect( () => {
 		if ( activePaymentMethod !== methodId ) {
 			return;
 		}
 		const unsubscribe = onCheckoutFail( ( { processingResponse } ) => {
 			console.error( processingResponse );
+			setIsFullPageSpinnerActive( false );
 			if ( onClose ) {
 				onClose();
 			}
@@ -336,7 +361,8 @@ export const PayPalComponent = ( {
 						setGotoContinuationOnError,
 						onSubmit,
 						onError,
-						onClose
+						onClose,
+						setIsFullPageSpinnerActive
 					);
 				},
 			}
@@ -491,7 +517,8 @@ export const PayPalComponent = ( {
 					setGotoContinuationOnError,
 					onSubmit,
 					onError,
-					onClose
+					onClose,
+					setIsFullPageSpinnerActive
 				)
 			}
 			onShippingOptionsChange={ getOnShippingOptionsChange(

modules/ppcp-blocks/resources/js/paypal-config.js

@@ -3,7 +3,6 @@ import {
 	paypalSubscriptionToWcAddresses,
 } from './Helper/Address';
 import ResumeFlowHelper from '../../../ppcp-button/resources/js/modules/Helper/ResumeFlowHelper';
-import Spinner from '../../../ppcp-button/resources/js/modules/Helper/Spinner';
 
 export const createOrder = async ( data, config, onError, onClose ) => {
 	try {
@@ -65,11 +64,10 @@ export const handleApprove = async (
 	setGotoContinuationOnError,
 	onSubmit,
 	onError,
-	onClose
+	onClose,
+	setIsFullPageSpinnerActive
 ) => {
-	// Block the entire page during approval process
-	const spinner = Spinner.fullPage();
-	spinner.block();
+	setIsFullPageSpinnerActive( true );
 
 	try {
 		let order;
@@ -173,13 +171,13 @@ export const handleApprove = async (
 	} catch ( err ) {
 		console.error( err );
 
+		setIsFullPageSpinnerActive( false );
+
 		onError( err.message );
 
 		onClose();
 
 		throw err;
-	} finally {
-		spinner.unblock();
 	}
 };
 

modules/ppcp-button/resources/js/modules/Helper/Spinner.js

@@ -14,6 +14,7 @@ class Spinner {
 				background: '#fff',
 				opacity: 0.6,
 			},
+			baseZ: 10000,
 		} );
 	}