Merge pull request #1872 from Automattic/fix/free-trial-checkout-load…

…ing-issue fix (ras-acc): make processing class unique to avoid clashes
Automattic · Sep 5, 2024 · 75290f0 · 75290f0
2 parents 9af74b5 + 4262da5
commit 75290f0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -630,14 +630,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;
 				}
 
@@ -649,14 +649,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
@@ -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
@@ -238,6 +238,6 @@
 	}
 }
 
-.processing {
+.modal-processing {
 	opacity: 0.5;
 }