Skip to content

Conversation

@mgascam
Copy link
Contributor

@mgascam mgascam commented Oct 5, 2021

All Submissions:

Changes proposed in this Pull Request:

An 'Invalid payment method' error shows when a user double clicks the'Delete' button in the 'Add Payment method screen'. Every time the user clicks the button, there is a GET request to delete the payment method. First request is handled correctly, but subsequent requests throw an error, because the payment method cannot be found since it was already deleted.

This is a video of the bug, taken from the issue.

To avoid firing the multiple requests, this PR adds an event handler to the buttons in the Payment method table. The event is attached to the table tbody and delegated to .payment-method-actions .button. When the event handler is executed, it will check if the button has .disabled class. If the button is not disabled, it will add this class and the GET request will fire. If the button is disabled, it calls preventDefault in the event, to avoid firing the request.

I'd like to merge this PR to avoid confusion for the user and I also think there is a little performance gain since we are sparing some requests that will end up throwing an error.

Closes #30862

How to test the changes in this Pull Request:

Prerequisites
You'll need to upload and activate the WooCommerce Payments plugin, to be able to add and remove payment methods in the user's account

  1. Log in with a valid shop user
  2. Go to My Account > Payment Methods
  3. Add a Payment method
  4. On Payment methods table, double click on 'Delete' button
  5. Check that the payment method is correctly removed and there are no errors displayed to the user

This the behavior with the fix applied:

Screen Capture on 2021-10-05 at 18-23-53

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully run tests with your changes locally?

Changelog entry

Enter a summary of all changes on this Pull Request. This will appear in the changelog if accepted.

  • Fix 'Invalid payment method' error upon double click 'Delete' button on Add Payment methods screen

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@mgascam mgascam force-pushed the fix/invalid-payment-error-upon-double-click-delete branch from ef4d229 to 5c53516 Compare October 5, 2021 16:19
Copy link
Contributor

@kalessil kalessil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The approach looks good ! Leaving a simplification proposal.

…erce#30862

An 'Invalid payment method' error shows when a user double clicks the
'Delete' button in the 'Add Payment method screen'. Every time the user clicks
the button, there is a GET request to delete the payment method. First request is
handled correctly, but subsequent requests throw an error, because the payment
method cannot be found since it was already deleted.

This adds an event handler to disable the button on the first
click.
@mgascam mgascam force-pushed the fix/invalid-payment-error-upon-double-click-delete branch from 5c53516 to dea2aa9 Compare October 6, 2021 15:31
@mgascam mgascam marked this pull request as ready for review October 6, 2021 15:57
@mgascam mgascam requested a review from kalessil October 6, 2021 15:58
@kalessil
Copy link
Contributor

kalessil commented Oct 7, 2021

Pulling @nerrad and @ObliviousHarmony for a review, on my end, the changes are looking good !

@kalessil kalessil added the Enhancement The issue is a request for an enhancement. label Oct 7, 2021
@nerrad nerrad removed their request for review October 7, 2021 14:32
@kalessil
Copy link
Contributor

Ping @ObliviousHarmony

@ObliviousHarmony ObliviousHarmony requested review from a team and vedanshujain and removed request for a team and ObliviousHarmony November 9, 2021 23:45
@ObliviousHarmony ObliviousHarmony added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Feb 21, 2022
Copy link
Contributor

@vedanshujain vedanshujain left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Looks like CI is failing, but it's probably unrelated. I have restarted it, and will merge when it passes.

@vedanshujain vedanshujain merged commit c20f58e into woocommerce:trunk Oct 21, 2022
@github-actions github-actions bot added this to the 7.2.0 milestone Oct 21, 2022
@github-actions
Copy link
Contributor

Hi @vedanshujain, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

  • Add the release: add testing instructions label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Enhancement The issue is a request for an enhancement. plugin: woocommerce Issues related to the WooCommerce Core plugin. type: community contribution

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"Invalid payment method" error is displayed upon clicking "Delete" button twice on "Add Payment method" screen.

5 participants