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

Conversation

@alexflorisca
Copy link
Contributor

@alexflorisca alexflorisca commented Nov 11, 2022

The payment status in the payment data store is composed of an object with a bunch of boolean properties that don't always make sense. For example isProcessing can be true at the the same time as isPristine. See #6998 for more details.

This PR refactors the payment status to have one string value with the status. The various boolean helpers are now selectors. Things to note:

  • Replaced the boolean values inside the currentStatus object with selectors for querying the payment status
  • We need to keep the API we expose to third parties consistent, so the usePaymentMethodInterface hook exposes the paymentStatus as it was before.
  • Removed the __internalSetCurrentStatus action because it is marked as internal, hasn't been advertised to third party devs and hasn't been around that long (a month or two since we merged the data store work);
  • Deprecated but kept the getCurrentStatus selector as it is documented and available to third parties, even though this is fairly new so I doubt anyone has had a chance to implement it.

Fixes #6998

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Load the checkout block and open up the payments store in Redux dev tools
  2. You should see 2 calls to SET_PAYMENT_PRISTINE. One comes after we set the default payment method and the other because the checkout is idle and we haven’t completed the payment yet
  3. Click on an express payment method. You should see the SET_PAYMENT_STARTED action fired and the status change to started
  4. Click out of the express payment modal. You should see the SET_PAYMENT_PRISTINE action fired and status changed to pristine
  5. Open up [this file](
    dispatch.__internalSetComplete();
    ) and add dispatch.__internalSetHasError( true ); (and maybe a console log) on line 167.
  6. Go through the checkout flow with a stripe CC and check the SET_PAYMENT_PRISTINE action is fired and status changed to pristine and the console log shows. This is a really unlikely (impossible maybe?) scenario that resets the payment status to pristine, given an error with the checkout, after the payment has been successful.
  7. Remove the code above.
  8. Go through the checkout process once again. Check the SET_PAYMENT_PROCESSING action is fired and the status changed to processing and the SET_PAYMENT_METHOD_DATA and SET_PAYMENT_SUCCESS actions are fired and the status and paymentMethodData keys are updated in the store
  9. The SET_PAYMENT_FAILED and SET_PAYMENT_ERROR are difficult to test as it requires modifying code in the stripe plugin. They are also not accurate representations of the state which I have explained in The ERROR and FAIL payment status values are not accurate #7667. For now I think it’s ok to check the code and make sure these set the correct value on the status.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Refactored the payment store to provide clearer payment status via new wp/data selectors

@rubikuserbot rubikuserbot requested review from a team and tarhi-saad and removed request for a team November 11, 2022 17:04
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7666.zip

@github-actions
Copy link
Contributor

github-actions bot commented Nov 11, 2022

TypeScript Errors Report

Files with errors: 438
Total errors: 2093

⚠️ ⚠️ This PR introduces new TS errors on 8 files:

assets/js/atomic/blocks/product-elements/price/index.js

assets/js/atomic/blocks/product-elements/stock-indicator/block.js

assets/js/atomic/blocks/product-elements/tag-list/index.ts

assets/js/base/components/cart-checkout/product-details/index.tsx

assets/js/blocks/cart/block.js

assets/js/blocks/checkout/block.tsx

assets/js/blocks/mini-cart/frontend.ts

assets/js/blocks/product-query/constants.ts

@github-actions
Copy link
Contributor

github-actions bot commented Nov 11, 2022

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 11, 2022

Size Change: +723 B (0%)

Total Size: 991 kB

Filename Size Change
build/all-products-frontend.js 26.4 kB +2 B (0%)
build/all-products.js 33.5 kB +14 B (0%)
build/attribute-filter-frontend.js 22.6 kB +5 B (0%)
build/attribute-filter-wrapper-frontend.js 7.13 kB +4 B (0%)
build/attribute-filter.js 12.2 kB +4 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.01 kB +83 B (+2%)
build/cart-frontend.js 54.5 kB -12 B (0%)
build/cart.js 46.3 kB +110 B (0%)
build/checkout-blocks/payment-frontend.js 7.77 kB +73 B (+1%)
build/checkout-frontend.js 56.6 kB -13 B (0%)
build/checkout.js 40.3 kB +93 B (0%)
build/filter-wrapper-frontend.js 13.8 kB -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.97 kB -3 B (0%)
build/mini-cart-contents.js 17.1 kB +7 B (0%)
build/product-stock-indicator-frontend.js 1.01 kB +13 B (+1%)
build/product-stock-indicator.js 646 B +22 B (+4%)
build/rating-filter-frontend.js 7.16 kB +4 B (0%)
build/rating-filter-wrapper-frontend.js 5.41 kB +3 B (0%)
build/rating-filter.js 5.79 kB +3 B (0%)
build/single-product-frontend.js 32.2 kB +2 B (0%)
build/single-product.js 10 kB +2 B (0%)
build/stock-filter-frontend.js 7.78 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 6.03 kB +3 B (0%)
build/stock-filter.js 6.7 kB +3 B (0%)
build/wc-blocks-data.js 18.5 kB +307 B (+2%)
build/wc-blocks-registry.js 2.92 kB -9 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.02 kB
build/active-filters.js 7.32 kB
build/all-reviews.js 7.79 kB
build/blocks-checkout.js 18.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.47 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.68 kB
build/cart-blocks/cart-express-payment-frontend.js 764 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 5.66 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 952 B
build/checkout-blocks/contact-information-frontend.js 1.77 kB
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/shipping-address-frontend.js 1.06 kB
build/checkout-blocks/shipping-methods-frontend.js 4.89 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 323 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper.js 2.41 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 1.77 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.25 kB
build/product-add-to-cart.js 8.36 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 431 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 884 B
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 3.94 kB
build/product-new.js 7.63 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 1.92 kB
build/product-price.js 1.53 kB
build/product-query.js 2.89 kB
build/product-rating-frontend.js 1.2 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 812 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 377 B
build/product-sku.js 376 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 878 B
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.33 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.86 kB
build/products-by-attribute.js 8.54 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.22 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.3 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

@alexflorisca alexflorisca requested a review from opr November 11, 2022 17:22
@alexflorisca alexflorisca added type: refactor The issue/PR is related to refactoring. skip-changelog PRs that you don't want to appear in the changelog. block: checkout Issues related to the checkout block. type: technical debt This issue/PR represents/solves the technical debt of the project. labels Nov 11, 2022
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

Hey @alexflorisca nice work! Just a couple of things:

In the testing instructions:

You should see 2 calls to SET_PAYMENT_PRISTINE. One comes after we set the default payment method and the other because the checkout is idle and we haven’t completed the payment yet

I only see this once. Just want to double check that this doesn't indicate something being broken?

Go through the checkout flow with a stripe CC and check the SET_PAYMENT_PRISTINE action is fired and status changed to pristine and the console log shows. This is a really unlikely (impossible maybe?) scenario that resets the payment status to pristine, given an error with the checkout, after the payment has been successful.

I see this, and I see the error briefly before being redirected to the success page, is this the expected behaviour?

Alex Florisca and others added 2 commits November 14, 2022 16:19
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
@alexflorisca
Copy link
Contributor Author

Thanks for the review @opr , I've added your suggestions in now.

I only see this once. Just want to double check that this doesn't indicate something being broken?

Yeah it's fine, it's probably because you have some saved payment methods, in which case it will skip running one of them.

I see this, and I see the error briefly before being redirected to the success page, is this the expected behaviour?

Yep that's expected. I forgot to say in the testing instructions you can comment out the window.location... line in the checkout-processor.js to see the actions more clearly.

@alexflorisca alexflorisca requested a review from opr November 14, 2022 16:44
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

Thanks for making all these changes, looks great now! 🥳

@github-actions github-actions bot added this to the 9.0.0 milestone Nov 15, 2022
@alexflorisca alexflorisca merged commit 74dd439 into trunk Nov 15, 2022
@alexflorisca alexflorisca deleted the try/refactor-payment-status branch November 15, 2022 12:27
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. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring. type: technical debt This issue/PR represents/solves the technical debt of the project.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor payment status [after data store work is merged]

3 participants