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

Rename the checkout events #8381

Merged
merged 14 commits into from
Feb 17, 2023
Merged

Rename the checkout events #8381

merged 14 commits into from
Feb 17, 2023

Conversation

alexflorisca
Copy link
Member

@alexflorisca alexflorisca commented Feb 3, 2023

This PR follows on from #8110 , where we refactored the payment status (mostly) and the checkout status. We drew diagrams and flows and went deep about how the checkout flow should look in terms of events and statuses. There was a lot that was confusing and one of those things were the checkout events.

  • The checkout events were too vague and cumbersome
  • The payment_processing event is misleading as we're not actually processing the payment with that event. We are just setting up the payment data

So I've made the following changes here:

  • Rename onCheckoutValidationBeforeProcessing. to onCheckoutValidation
  • Rename onCheckoutAfterProcessingWithSuccess to onCheckoutSuccess
  • Rename onCheckoutAfterProcessingWithError to onCheckoutFail
  • Rename onPaymentProcessing to oPaymentSetup

Hopefully this is clearer to everyone going forward.

Here is what the happy path will look like after this PR and #8110

Untitled-2023-02-02-2008

Testing

User Facing Testing

  1. Install and activate the Stripe Payment Gateway plugin
  2. Add something to your cart and checkout with a bad card (4000 0000 0000 0002).
  3. You should see a "Your card was declined" message in the payment options section
  4. Add something to your cart again and checkout with a valid card (4242 4242 4242 4242)
  5. You should be redirected to the order summary page and you should see the order in wp-admin.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Dev Note

Some of the checkout event emitters have been renamed to better reflect their purpose. Deprecation is in place, so if you’re using the old emitter names your code will continue to work, but you may see a notice in the browser error console. The changes include are as follows.

onCheckoutValidationBeforeProcessing has been renamed to onCheckoutValidation . There is only one validation event during checkout so this makes it clearer where validation listeners should fire.

onCheckoutAfterProcessingWithSuccess has been renamed simply to onCheckoutSuccess since the processing part is not relevant and has no real meaning in this context. The same for onCheckoutAfterProcessingWithError which has dropped the prefix to become onCheckoutFail .

Finally, onPaymentProcessing has been renamed to onPaymentSetup . This is because it was unclear that no actual processing would take place during this event. The event emitter is only there to prepare the payment gateway to take payment when the checkout processes. onPaymentSetup reflects this more clearly.

Changelog

Rename the checkout events

@alexflorisca alexflorisca self-assigned this Feb 3, 2023
@woocommercebot woocommercebot requested a review from a team February 3, 2023 17:18
@alexflorisca alexflorisca added type: refactor The issue/PR is related to refactoring. block: checkout Issues related to the checkout block. type: technical debt This issue/PR represents/solves the technical debt of the project. labels Feb 3, 2023
@alexflorisca alexflorisca modified the milestone: 9.6.0 Feb 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 3, 2023

The release ZIP for this PR is accessible via:

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

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.

TypeScript Errors Report

  • Files with errors: 496
  • Total errors: 2341

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@alexflorisca alexflorisca mentioned this pull request Feb 7, 2023
10 tasks
@mikejolley mikejolley self-assigned this Feb 14, 2023
@mikejolley
Copy link
Member

Blocked by #8110

@mikejolley mikejolley added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Feb 14, 2023
@mikejolley mikejolley force-pushed the update/rename-checkout-events branch from 078da3a to ebd0fa2 Compare February 14, 2023 13:19
@github-actions
Copy link
Contributor

github-actions bot commented Feb 14, 2023

Size Change: +1.82 kB (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters-frontend.js 7.98 kB -2 B (0%)
build/active-filters-wrapper-frontend.js 5.99 kB -4 B (0%)
build/active-filters.js 7.33 kB +15 B (0%)
build/all-products-frontend.js 11.7 kB +10 B (0%)
build/all-products.js 34.2 kB +499 B (+1%)
build/all-reviews.js 7.67 kB +4 B (0%)
build/attribute-filter-frontend.js 22.9 kB +4 B (0%)
build/attribute-filter-wrapper-frontend.js 7.66 kB -6 B (0%)
build/attribute-filter.js 12.3 kB +16 B (0%)
build/blocks-checkout.js 41.2 kB +15 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.7 kB +6 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB +25 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB +6 B (0%)
build/cart-frontend.js 28.9 kB +145 B (+1%)
build/cart.js 47.3 kB +191 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB -2 B (0%)
build/checkout-blocks/payment-frontend.js 8.45 kB +24 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB +1 B (0%)
build/checkout-frontend.js 30.4 kB +137 B (0%)
build/checkout.js 43.9 kB +234 B (+1%)
build/customer-account.js 3.12 kB -1 B (0%)
build/featured-category.js 13.2 kB +2 B (0%)
build/featured-product.js 13.4 kB -3 B (0%)
build/filter-wrapper.js 2.4 kB +1 B (0%)
build/handpicked-products.js 7.24 kB -1 B (0%)
build/mini-cart-component-frontend.js 27.9 kB -3 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.86 kB +74 B (+3%)
build/mini-cart-contents.js 17.1 kB +93 B (+1%)
build/mini-cart.js 4.3 kB -4 B (0%)
build/price-filter-wrapper-frontend.js 6.99 kB +2 B (0%)
build/price-filter.js 8.39 kB +23 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B +25 B (+11%) ⚠️
build/product-add-to-cart-frontend.js 6.73 kB -1 B (0%)
build/product-add-to-cart.js 8.63 kB -4 B (0%)
build/product-best-sellers.js 7.6 kB -4 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 496 B +2 B (0%)
build/product-button-frontend.js 2.19 kB +1 B (0%)
build/product-button.js 3.99 kB -4 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category-list-frontend.js 1.19 kB -1 B (0%)
build/product-category.js 8.58 kB -4 B (0%)
build/product-image-frontend.js 2.2 kB +3 B (0%)
build/product-image.js 4.09 kB +2 B (0%)
build/product-new.js 7.58 kB -3 B (0%)
build/product-on-sale.js 7.91 kB +1 B (0%)
build/product-price-frontend.js 2.29 kB +2 B (0%)
build/product-price.js 1.58 kB -2 B (0%)
build/product-query.js 6.08 kB -1 B (0%)
build/product-rating-frontend.js 1.62 kB -1 B (0%)
build/product-results-count.js 1.65 kB -1 B (0%)
build/product-sale-badge-frontend.js 1.43 kB -1 B (0%)
build/product-sale-badge.js 816 B +1 B (0%)
build/product-search.js 2.63 kB -3 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB -3 B (0%)
build/product-summary.js 920 B +2 B (0%)
build/product-tag-list-frontend.js 1.18 kB +1 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-tag.js 8.07 kB -2 B (0%)
build/product-title.js 3.46 kB -4 B (0%)
build/product-top-rated.js 7.84 kB -1 B (0%)
build/products-by-attribute.js 8.52 kB -1 B (0%)
build/rating-filter-frontend.js 21.4 kB +2 B (0%)
build/rating-filter-wrapper-frontend.js 6.19 kB -2 B (0%)
build/rating-filter.js 7.4 kB +28 B (0%)
build/reviews-by-category.js 11.2 kB -2 B (0%)
build/reviews-by-product.js 12.3 kB -2 B (0%)
build/reviews-frontend.js 7.14 kB +1 B (0%)
build/single-product-frontend.js 17.8 kB +7 B (0%)
build/single-product.js 9.98 kB +3 B (0%)
build/stock-filter-frontend.js 21.1 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 5.85 kB +3 B (0%)
build/stock-filter.js 8.13 kB +21 B (0%)
build/store-notices.js 1.65 kB -3 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB -2 B (0%)
build/wc-blocks-data.js 21.4 kB +52 B (0%)
build/wc-blocks-editor-style-rtl.css 5.54 kB +41 B (+1%)
build/wc-blocks-editor-style.css 5.54 kB +41 B (+1%)
build/wc-blocks-vendors.js 64.4 kB +125 B (0%)
build/wc-blocks.js 2.65 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/filter-wrapper-frontend.js 14 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/legacy-template.js 2.85 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 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 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2 kB
build/price-filter-frontend.js 13.9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 258 B
build/product-category-list.js 503 B
build/product-rating.js 919 B
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.58 kB
build/product-title-frontend.js 1.62 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.5 kB
build/wc-blocks-style.css 26.5 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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
build/wc-shipping-method-pickup-location.js 29.7 kB
build/wp-directives-runtime.js 2.4 kB
build/wp-directives-vendors.js 7.89 kB

compressed-size-action

@mikejolley mikejolley removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Feb 14, 2023
@mikejolley
Copy link
Member

I've rebased this and fixed the tests. Going to ask another reviewer to take a look.

@mikejolley mikejolley requested a review from opr February 14, 2023 14:04
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.

Code looks good, tested and it's working nicely. I added a comment about adding links/version numbers to the deprecated message, please can we do this before shipping?

return function (
...args: Parameters< typeof onCheckoutValidationBeforeProcessing >
) {
return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
deprecated( 'onCheckoutBeforeProcessing', {
alternative: 'onCheckoutValidationBeforeProcessing',
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this be updated since we're now deprecating onCheckoutValidationBeforeProcessing too

return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
deprecated( 'onCheckoutValidationBeforeProcessing', {
alternative: 'onCheckoutValidation',
plugin: 'WooCommerce Blocks',
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we add links and version numbers to these deprecation messages?

@mikejolley mikejolley added the needs: dev note PR that has some text that needs to be included in the release notes. label Feb 17, 2023
@mikejolley mikejolley merged commit 4eae7ca into trunk Feb 17, 2023
@mikejolley mikejolley deleted the update/rename-checkout-events branch February 17, 2023 11:03
@dinhtungdu dinhtungdu added this to the 9.7.0 milestone Feb 27, 2023
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. needs: dev note PR that has some text that needs to be included in the release notes. 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.

4 participants