Use the LoadingMask component from WooCommerce Blocks for PRB loading status in the Cart and Checkout Blocks

[reykjalin]

Changes proposed in this Pull Request:

Instead of relying on CSS classes that may change in the future to trigger the loading state on the Payment Request Buttons in the Cart and Checkout Blocks, we instead use the <LoadableMask /> component exposed in woocommerce/woocommerce-blocks#5135 and released in WooCommerce Blocks v6.4.0.

• Wrap all PRB components in <LoadableMask /> to trigger the loading state.

To stick to our general L-2 support policy this PR should not be merged until WooCommerce Blocks 6.6.0 is released.

Testing instructions

Note: You'll need to be using WooCommerce Blocks version 6.4.0 or newer for this to work.

Note: Both tests require you to use the Cart and Checkout blocks instead of the Shortcode-based checkout pages.

Note: Both tests require you to make sure Payment Request Buttons are displayed on the Cart and Checkout pages.

Testing the Cart Block

1. Add any item(s) to your cart.
2. Go to the Cart page.
3. Wait for the Payment Request Button (PRB) to load.
4. Change the amount of any of the items in your cart.
5. Make sure the PRB is greyed out and disabled, and the Payment Request modal isn't opened if you click it.
6. After the PRB is reenabled click the PRB to open the payment request modal.
7. Cancel the Payment Request.
8. Change the amount of any of the items in your cart again.
9. Make sure the PRB is again greyed out and disabled, and the Payment Request modal isn't opened if you click it.
10. After the PRB is reenabled click the PRB to open the payment request modal.
11. Make sure you can complete a payment successfully this time.

Testing the Checkout Block

1. Add any item(s) to your cart.
2. Go to the Checkout page.
3. Wait for the Payment Request Button (PRB) to load.
4. Change the state in your address.
   • You could also change any other settings that will cause WooCommerce to reevaluate the shipping costs.
5. Make sure the PRB is greyed out and disabled, and the Payment Request modal isn't opened if you click it.
6. After the PRB is reenabled click the PRB to open the payment request modal.
7. Cancel the Payment Request.
8. Change the state in your address again.
9. Make sure the PRB is again greyed out and disabled, and the Payment Request modal isn't opened if you click it.
10. After the PRB is reenabled click the PRB to open the payment request modal.
11. Make sure you can complete a payment successfully this time.

---

I decided not to add automated JS tests for this change since we'd essentially be testing the <LoadableMask /> component, and the WooCommerce Blocks plugin is already taking care of that.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)

[reykjalin]

I'm marking this PR as blocked until WooCommerce Blocks v6.6.0 is released so we can stick to our L-2 support policy.

[reykjalin]

Version 6.6.0 of the Blocks plugin has been released so I'm going to remove the blocked tag 🙌

[diegocurbelo]

Code looks good, and tests well 🚢