Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Rollback checkout status to started instead of pristine in case of error #5318

Closed
wants to merge 2 commits into from

Conversation

senadir
Copy link
Member

@senadir senadir commented Dec 6, 2021

When checkouts runs into an error (local validation for example), its status is rolled back to pristine, causing payment saved data to unload. For some reasoning, fixing errors and hitting submit again doesn't reset saved payment methods, @alexflorisca and I had two solutions:

  • Make sure going to pristine preserve saved tokens (not a great solution given pristine should be empty).
  • Don't roll back to pristine, roll back to started (the solution we did).
  • Make sure saved payment methods are still picked up again later when you hit Place Order (not sure how to do this).

Fixes #5296

Testing

How to test the changes in this Pull Request:

  1. Make sure you have a saved payment.
  2. On Checkout, don't check terms block, or clear postcode, just make sure there's an error.
  3. Place order, you have an error.
  4. Fix the error, place again, it should work.
  5. The original code has something to do with express payment methods (not sure what is it @mikejolley) so make sure they're also working fine.

Changelog

Fix a certain use case error with saved payment methods.

@senadir senadir added type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. labels Dec 6, 2021
@senadir senadir added this to the 6.5.0 milestone Dec 6, 2021
@senadir senadir requested a review from mikejolley December 6, 2021 12:44
@rubikuserbot rubikuserbot requested a review from a team December 6, 2021 12:45
@senadir
Copy link
Member Author

senadir commented Dec 6, 2021

cc @peterlama you did a lot of debugging in #5296 do you think this solutions cover all of its basis, do you happen to have another approach in mind?

@mikejolley you wrote the original code so it's worth giving this another look?

@github-actions
Copy link
Contributor

github-actions bot commented Dec 6, 2021

Size Change: +200 B (0%)

Total Size: 841 kB

Filename Size Change
build/cart-frontend.js 45.5 kB +36 B (0%)
build/cart.js 44 kB +43 B (0%)
build/checkout-frontend.js 47.6 kB +41 B (0%)
build/checkout.js 47.1 kB +40 B (0%)
build/mini-cart-component-frontend.js 37.7 kB +40 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.06 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 34.4 kB
build/all-reviews.js 8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.88 kB
build/atomic-block-components/add-to-cart.js 6.42 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 848 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 553 B
build/atomic-block-components/rating.js 553 B
build/atomic-block-components/sale-badge-frontend.js 626 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 585 B
build/atomic-block-components/stock-indicator.js 586 B
build/atomic-block-components/summary-frontend.js 875 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.6 kB
build/attribute-filter.js 12.7 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.87 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 297 B
build/cart-blocks/line-items-frontend.js 5.14 kB
build/cart-blocks/order-summary-frontend.js 8.96 kB
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/actions-frontend.js 1.45 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.25 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.17 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.48 kB
build/checkout-blocks/shipping-address-frontend.js 973 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/featured-category.js 8.55 kB
build/featured-product.js 9.9 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.05 kB
build/mini-cart-contents.js 3.46 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.66 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.61 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.51 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.36 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.47 kB
build/product-tag.js 7.77 kB
build/product-top-rated.js 7.63 kB
build/products-by-attribute.js 8.49 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.23 kB
build/single-product-frontend.js 22 kB
build/single-product.js 10.4 kB
build/stock-filter-frontend.js 6.8 kB
build/stock-filter.js 6.83 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 18.9 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.81 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.27 kB
build/wc-blocks-editor-style.css 4.28 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.4 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.6 kB

compressed-size-action

@peterlama
Copy link

@senadir Setting the status to started seems like a good solution to me! Although, I wonder if the status should only be started if a saved payment method is selected? I noticed a check for that here: payment-method-data-context.tsx#L234

@senadir
Copy link
Member Author

senadir commented Dec 6, 2021

After much consideration, I'm not sure started is the best approach here, maybe pristine or a new status idle would work best, we're still looking at this but would welcome any suggestions.

@mikejolley
Copy link
Member

@senadir As long as we have a way to distinguish started (when payment should be happening) from idle or pristine state, we should cover all bases. Since you also need to distinguish pristine from a checkout that is not yet being paid for, but has data, I think the new idle status will make the most sense.

@Aljullu Aljullu modified the milestones: 6.5.0, 6.6.0 Dec 7, 2021
@senadir senadir force-pushed the fix/broken-saved-payment-after-error branch from 28a8c8c to ee764e3 Compare December 8, 2021 12:27
@@ -66,6 +67,8 @@ export interface PaymentMethodDataContextState {
export type PaymentMethodCurrentStatusType = {
// If true then the payment method state in checkout is pristine.
isPristine: boolean;
// If true then the payment method state in checkout is modified, but isn't doing anyting.
Copy link
Contributor

@ralucaStan ralucaStan Dec 8, 2021

Choose a reason for hiding this comment

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

I find this comment confusing, especially the but isn't doing anyting. part. It's unclear to me what part is not doing anything? Does this idle state for a payment menthod happen when at the same time with this idle status?

@@ -222,7 +222,7 @@ export const PaymentMethodDataProvider = ( {
// When checkout is returned to idle, set payment status to pristine but only if payment status is already not finished.
Copy link
Contributor

Choose a reason for hiding this comment

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

This comment also needs updated, just replace pristine with idle here set payment status to pristine but only. It might help to leave some comment with the reason why this is necessary

@mikejolley mikejolley removed this from the 6.6.0 milestone Dec 20, 2021
@nielslange nielslange deleted the fix/broken-saved-payment-after-error branch April 19, 2023 23:46
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkout: Selected payment method token gets out of sync with paymentMethodData
6 participants