This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Revise checkout payment statuses to avoid data loss on error #5350
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
mikejolley
added
block: checkout
|
Size Change: +20 B (0%) Total Size: 840 kB
ℹ️ View Unchanged
|
mikejolley
commented
Dec 9, 2021
| [ savedTokenKey ]: token.toString(), | ||
| isSavedToken: true, | ||
| } ); | ||
| removeNotice( |
There was a problem hiding this comment.
This was previously handled in the context provider via useEffect, but because we want the token and method ID it seemed best to move it all to the onClick handler.
mikejolley
commented
Dec 9, 2021
| @@ -79,10 +80,10 @@ const ExpressPaymentMethods = () => { | |||
| ( errorMessage ) => { | |||
| setPaymentStatus().error( errorMessage ); | |||
| setExpressPaymentError( errorMessage ); | |||
| setActivePaymentMethod( previousActivePaymentMethod.current ); | |||
| if ( previousPaymentMethodData.current.isSavedToken ) { | |||
There was a problem hiding this comment.
This code appears to have been added as a workaround for started/pristine data resetting. Saved methods should not be using STARTED so I've removed it.
mikejolley
commented
Dec 9, 2021
| }; | ||
| setActivePaymentMethod: ( | ||
| paymentMethod: string, | ||
| paymentMethodData?: ObjectType | EmptyObjectType |
There was a problem hiding this comment.
Data can now be set at the same time as setting an active payment method. This removes the need to use STARTED status to set data.
senadir
reviewed
Dec 9, 2021
| type: STATUS.SUCCESS, | ||
| paymentMethodData, | ||
| } as const ), | ||
| started: ( { |
There was a problem hiding this comment.
So we can no longer dispatch started?
There was a problem hiding this comment.
No, it's dispatched as statusOnly now like pristine. That's all express methods need. The data addition was added for saved payment methods - with the new setActivePaymentMethod method that's no longer a requirement. They can stay pristine.
senadir
reviewed
Dec 9, 2021
assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts
Outdated
Show resolved
Hide resolved
mikejolley
commented
Dec 9, 2021
| if ( | ||
| ! activePaymentMethod && | ||
| paymentMethod.is_default && | ||
| activeSavedToken === '' |
There was a problem hiding this comment.
Not sure why we were handling defaults here. I moved it to context with the other default setter.
…/reducer.ts Co-authored-by: Seghir Nadir <[email protected]>
jonny-bull
pushed a commit
to jonny-bull/woocommerce-gutenberg-products-block
that referenced
this pull request
Dec 14, 2021
…erce#5350) * Clarify docs for STARTED * Clarify docs for setActivePaymentMethod * Remove useActivePaymentMethod hook (this held state for active methods and tokens) * Update type defs * Enhance setActivePaymentMethod action to accept method data * SET_ACTIVE_PAYMENT_METHOD action * Add setActivePaymentMethod dispatcher and make "started" status only * Update setActivePaymentMethod usage in express methods * Set radio control defaults * Consolodate tokens and methods * Update assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts Co-authored-by: Seghir Nadir <[email protected]> * Spacing * Split saved cards tests from regular, since saved cards are checked by default Co-authored-by: Seghir Nadir <[email protected]>
|
Issue reported here as as well 4580573-zen. |
jonny-bull
pushed a commit
to jonny-bull/woocommerce-gutenberg-products-block
that referenced
this pull request
Dec 16, 2021
…erce#5350) * Clarify docs for STARTED * Clarify docs for setActivePaymentMethod * Remove useActivePaymentMethod hook (this held state for active methods and tokens) * Update type defs * Enhance setActivePaymentMethod action to accept method data * SET_ACTIVE_PAYMENT_METHOD action * Add setActivePaymentMethod dispatcher and make "started" status only * Update setActivePaymentMethod usage in express methods * Set radio control defaults * Consolodate tokens and methods * Update assets/js/base/context/providers/cart-checkout/payment-methods/reducer.ts Co-authored-by: Seghir Nadir <[email protected]> * Spacing * Split saved cards tests from regular, since saved cards are checked by default Co-authored-by: Seghir Nadir <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
We're seeing errors and inconsistencies with payment method data being lost when errors cause a status change (to pristine) on checkout. On reviewing this, we've also noticed some discrepancies with how statuses (in particular the
STARTEDstatus) are used in a non-documented way. It's also confusing how some data is stored in the context provider, some in hooks, and yet it all needs to be kept in sync (currently with useEffect calls).To solve this, I've taken the following approach:
useActivePaymentMethodhook which had methods to set active method, and active token. This has been replaced with data in the context provider.setActivePaymentMethodnow accepts payment method data. By consolidating it within this function, saved methods no longer need to use theSTARTEDstatus to store data.setActiveToken.useEffecthook to avoid conflicts.Fixes #5296
Closes #5318 in favor of this.
Testing
Please smoke test the following:
Also, test the case from #5296.
Changelog