From 4262da51cb424d7739582b70d5e6c4a21e771935 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Wed, 4 Sep 2024 14:12:18 -0700
Subject: [PATCH] fix: make processing class unique to avoid clashes

---
 src/modal-checkout/checkout.scss | 4 ++--
 src/modal-checkout/index.js      | 8 ++++----
 src/modal-checkout/modal.js      | 6 +++---
 src/modal-checkout/modal.scss    | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/modal-checkout/checkout.scss b/src/modal-checkout/checkout.scss
index a2e50b14d..f6fb19717 100644
--- a/src/modal-checkout/checkout.scss
+++ b/src/modal-checkout/checkout.scss
@@ -253,7 +253,7 @@
 	// Processing styles
 	.modal_checkout_nyp,
 	.modal_checkout_coupon {
-		&.processing {
+		&.modal-processing {
 			opacity: 0.5;
 		}
 	}
@@ -558,7 +558,7 @@
 		margin-top: 0;
 	}
 
-	.processing {
+	.modal-processing {
 		opacity: 0.5;
 	}
 }
diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js
index 3ffb33e20..61087034b 100644
--- a/src/modal-checkout/index.js
+++ b/src/modal-checkout/index.js
@@ -635,14 +635,14 @@ domReady(
 				 * @return {boolean} Whether the form was blocked or not.
 				 */
 				function blockForm( form ) {
-					if ( form.is( '.processing' ) ) {
+					if ( form.is( '.modal-processing' ) ) {
 						return false;
 					}
 					const buttons = form.find( 'button[type=submit]' );
 					buttons.each( ( i, el ) => {
 						$( el ).attr( 'disabled', true );
 					} );
-					form.addClass( 'processing' );
+					form.addClass( 'modal-processing' );
 					return true;
 				}
 
@@ -654,14 +654,14 @@ domReady(
 				 * @return {boolean} Whether the form was unblocked or not.
 				 */
 				function unblockForm( form ) {
-					if ( ! form.is( '.processing' ) ) {
+					if ( ! form.is( '.modal-processing' ) ) {
 						return false;
 					}
 					const buttons = form.find( 'button[type=submit]' );
 					buttons.each( ( i, el ) => {
 						$( el ).attr( 'disabled', false );
 					} );
-					form.removeClass( 'processing' );
+					form.removeClass( 'modal-processing' );
 					return true;
 				}
 			} );
diff --git a/src/modal-checkout/modal.js b/src/modal-checkout/modal.js
index 7c98faa41..d03c4fb14 100644
--- a/src/modal-checkout/modal.js
+++ b/src/modal-checkout/modal.js
@@ -232,7 +232,7 @@ domReady( () => {
 				form.appendChild( modalCheckoutHiddenInput.cloneNode() );
 				form.target = IFRAME_NAME;
 				form.addEventListener( 'submit', ev => {
-					form.classList.add( 'processing' );
+					form.classList.add( 'modal-processing' );
 
 					const productData = form.dataset.product;
 					if ( productData ) {
@@ -288,14 +288,14 @@ domReady( () => {
 
 							// Open the variations modal.
 							ev.preventDefault();
-							form.classList.remove( 'processing' );
+							form.classList.remove( 'modal-processing' );
 							openModal( variationModal );
 							a11y.trapFocus( variationModal, false );
 							return;
 						}
 					}
 
-					form.classList.remove( 'processing' );
+					form.classList.remove( 'modal-processing' );
 
 					// Set reader activation checkout data if available.
 					let data = {};
diff --git a/src/modal-checkout/modal.scss b/src/modal-checkout/modal.scss
index eb96dadca..6d73a19e3 100644
--- a/src/modal-checkout/modal.scss
+++ b/src/modal-checkout/modal.scss
@@ -238,6 +238,6 @@
 	}
 }
 
-.processing {
+.modal-processing {
 	opacity: 0.5;
 }