From 8ce9e94bbbe40a69ccf8c0bbf9516f9b1c56c129 Mon Sep 17 00:00:00 2001
From: Himad M <h.mouhtar@inpsyde.com>
Date: Wed, 16 Jul 2025 16:53:21 -0400
Subject: [PATCH] Block UI during onApprove callback on block components

---
 modules/ppcp-blocks/resources/js/paypal-config.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/modules/ppcp-blocks/resources/js/paypal-config.js b/modules/ppcp-blocks/resources/js/paypal-config.js
index 4aacab318..b743cd901 100644
--- a/modules/ppcp-blocks/resources/js/paypal-config.js
+++ b/modules/ppcp-blocks/resources/js/paypal-config.js
@@ -3,6 +3,7 @@ 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 {
@@ -66,6 +67,10 @@ export const handleApprove = async (
 	onError,
 	onClose
 ) => {
+	// Block the entire page during approval process
+	const spinner = Spinner.fullPage();
+	spinner.block();
+
 	try {
 		let order;
 
@@ -173,6 +178,8 @@ export const handleApprove = async (
 		onClose();
 
 		throw err;
+	} finally {
+		spinner.unblock();
 	}
 };