Merge pull request #3533 from woocommerce/PCP-4712-appswitch-qa

Block UI during onApprove callback (4712)

Author: Dinamiko

modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js

@@ -158,7 +158,7 @@ class CheckoutActionHandler {
 		};
 		return {
 			createOrder,
-			onApprove: onApprove( this, this.errorHandler, this.spinner ),
+			onApprove: onApprove( this, this.errorHandler ),
 			onCancel: () => {
 				spinner.unblock();
 			},

modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js

@@ -2,11 +2,20 @@ import {
 	getCurrentPaymentMethod,
 	PaymentMethods,
 } from '../Helper/CheckoutMethodState';
+import Spinner from '../Helper/Spinner';
 
-const onApprove = ( context, errorHandler, spinner ) => {
+import resumeFlowHelper from '../Helper/ResumeFlowHelper';
+
+const onApprove = ( context, errorHandler ) => {
 	return ( data, actions ) => {
+		const spinner = Spinner.fullPage();
 		spinner.block();
 		errorHandler.clear();
+		// Pay Now submits via form (not AJAX), so we can't detect payment errors.
+		// Preemptively remove hash params to prevent reload issues.
+		if ( resumeFlowHelper.isResumeFlow() ) {
+			resumeFlowHelper.cleanHashParams();
+		}
 
 		return fetch( context.config.ajax.approve_order.endpoint, {
 			method: 'POST',
@@ -24,7 +33,6 @@ const onApprove = ( context, errorHandler, spinner ) => {
 				return res.json();
 			} )
 			.then( ( data ) => {
-				spinner.unblock();
 				if ( ! data.success ) {
 					if ( data.data.code === 100 ) {
 						errorHandler.message( data.data.message );
@@ -49,6 +57,9 @@ const onApprove = ( context, errorHandler, spinner ) => {
 				}
 
 				document.querySelector( '#place_order' ).click();
+			} )
+			.finally( () => {
+				spinner.unblock();
 			} );
 	};
 };