Fix WooPay duplicated Save my info section #9531
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alefesouza
requested review from
a team and
malithsen
and removed request for
a team
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: +15 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
@alefesouza, I encountered the bug you’re fixing here through a different scenario. I pulled your branch and confirmed that this PR resolves the issue as well. I’m leaving the steps to reproduce the bug I encountered for future reference. It would be great if you could confirm the fix on your end too. Steps to reproduce:
|
a-danae
approved these changes
Oct 22, 2024
There was a problem hiding this comment.
Things work as expected in this branch 👍
I was able to replicate the problem in trunk using the Stripe extension. The "Save my info" component was inserted multiple times on the page. This behavior was caused by this listener that inserts the component when an AJAX request is completed.
With this approach, there's still an event triggered on AJAX requests, but now the element is only inserted if it doesn't already exist.
✅ The "Save my info" component isn't rendered multiple times on the blocks checkout.
✅ The "Save my info" component continues to be displayed as expected on the shortcode checkout.
✅ The WooPay user gets created in both the shortcode and blocks checkout when checking off "Save my info"
I left a question below but it's not a blocker.
I noticed the following behavior but it's also happening on develop. So I'm just noting it down and I'll create a separate issue for it.
Sometimes the "Save my info" checkbox is displayed, even though the user already exists in WooPay. Seems to be related to the ajax check for whether the user exists not being triggered sometimes. The checkbox is always hidden when hard refreshing the page. So might be related to caching. Let's dive into it in another issue.
| Checkbox is hidden | Checkbox is displayed |
|---|---|
 |
 |
Thanks for the work here @alefesouza ! And apologies for the delay. I'm merging this since you're AFK.
| } | ||
|
|
||
| ReactDOM.render( |
There was a problem hiding this comment.
Things behave as expected, but I'm curious. Why keep this render when the element already exists?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #9410
Changes proposed in this Pull Request
This PR fixes the WooPay
Save my infocomponent being duplicated due to late ajax requests before the payment method component is fully rendered, it was being duplicated here.The issue mentions it's related to Stripe plugin but it happens even without the Stripe plugin installed.
Testing instructions
You can try to reproduce this bug without checking out to the branch:
Save my infocomponent should be duplicated.Save my infocomponent should not duplicate anymore.This PR fixes that by checking if the element where the component is mounted already exists on the
renderSaveUserSectionbefore creating a new element for it.npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge