Use triggers block/unblock the payment request button

[helgatheviking]

Added by @v18:

Please do not merge. This PR is blocked until #1539 is solved. Then it can be merged to trunk. See this comment for more details.

---

...On a single product page

Changes proposed in this Pull Request:

Use jQuery custom event triggers to block and unblock the payment request buttons

Issue: Link to the GitHub issue this PR addresses (if appropriate).
Fixes #1228

Description:
This is a first step for compatibility with complex product types. For example with Name Your Price, the payment request button should not be clickable until the minimum price is satisfied. With Mix and Match, the payment request button should not be clickable until all the selections are made to fill the container.

Probably still need a way to change the popup error notice to suit the need. Currently, you can get:

Please select some product options before adding this product to your cart.

if the variation isn't selected, but would need a way to supply different notices.

Probably also need a way to pass ALL the form data (and in some cases a custom price). Currently, you are manually adding the data from Addons, but Name Your Price and Mix and Match would have different form data.

Testing instructions

Can test this in the browser's console.

jQuery( document.body ).trigger( 'wc_stripe_block_payment_request_button' );

and

jQuery( document.body ).trigger( 'wc_stripe_unblock_payment_request_button' );

You should see the button go disabled and then be re-enabled. You can also see it happen when a variation is changed or when a product's quantity is changed.

---

• Make sure your changes respect WordPress' coding standards.
• Did you make changes, or create a new .js file? If Gruntfile.js exists in the repo, make sure to run grunt.

[diegocurbelo]

Code LGTM...

But in addition to disabling the button the "blocked status" also adds a "working/loading indicator". Which makes sense when updating the product quantity for example, but it might be confusing when disabling the button until the user completes other form fields, the user might think they just need to wait

[helgatheviking]

Not sure I have a solution for that. Any suggestions? I am going on vacation for the weekend and won't be looking at it.

[diegocurbelo]

Not sure I have a solution for that. Any suggestions? I am going on vacation for the weekend and won't be looking at it.

We should be able to do both, block/unblock and also disable/enable the Payment Request Button..

I would suggest adding 2 new triggers wc_stripe_disable_payment_request_button and wc_stripe_enable_payment_request_button and two new functions like disablePaymentRequestButton and enablePaymentRequestButton similar to unblockPaymentRequestButton and blockPaymentRequestButton respectively, that add/remove an additional css class that hides the spinner (by hiding .blockUI:before for example)

[v18]

Hi @helgatheviking 👋 - wanted to see if you had any thoughts on the above suggestion. We're all super glad you opened this PR, and I wanted to make sure you had what you needed so we can merge the changes.

[helgatheviking]

Hi @v18. Feedback seems sound... I had not noticed the spinners. I am completely overwhelmed with my plugins at the moment and not able to look at this right now.

This is meant to be an opening salvo for #1515 to make this compatible with other marketplace plugins.

[v18]

Thank you @helgatheviking for the update & for your work in this PR so far!

I created a separate issue to update the block UI: #1539

Once that issue is solved (on top of the branch for this PR) and the PR is approved, we'll merged your PR and then merge this fix as well. I updated the PR description to note this so this PR isn't accidentally merged prematurely.

[asumaran]

Since the PR that fixes #1539 got approved. I'll be merging this one and then #1542

[helgatheviking]

Awesome! Thanks so much everyone. Eventually I hope to get a chance to get this integrated into Name Your Price and Mix and Match.

[v18]

That's awesome @helgatheviking! Thank you :)