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

Add CartEventContext and dispatch events when pressing proceed to checkout button #7809

Merged
merged 20 commits into from
Jun 19, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Dec 1, 2022

This is a re-do of #7694 but it targets trunk instead.

Testing

Automated Tests

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

Internal dev testing

  1. Go to
  2. Add this code, it will register an observer to the onProceedToCheckout event, and show a confirmation box. Pressing cancel will cause the observer to return an error object, this should abort the proceed to checkout aciton.
	const { onProceedToCheckout } = useCartEventsContext();
	useEffect(
		() =>
			onProceedToCheckout( () => {
				const confirmation = confirm(
					'onProceedToCheckout fired, pressing OK will proceed to checkout, cancelling will stop it.'
				);
				if ( ! confirmation ) {
					return { error: true, type: 'error' };
				}
			} ),
		[ onProceedToCheckout ]
	);
  1. Add an item to your cart (only add one or the confirm will happen multiple times).
  2. Press Proceed to Checkout and in the confirmation dialogue, press cancel, verify you do not go to Checkout.
  3. Press Proceed to Checkout again, but this time press OK. Verify you get taken to the Checkout block.

User Facing Testing

  1. Ensure you can navigate from the Cart to the Checkout block using the Proceed to Checkout button.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Skipping

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

TypeScript Errors Report

Files with errors: 436
Total errors: 2120

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

assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx

assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/test/block.tsx

@github-actions
Copy link
Contributor

github-actions bot commented Dec 1, 2022

Size Change: +934 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters-frontend.js 8.64 kB -8 B (0%)
build/active-filters-wrapper-frontend.js 7.61 kB +2 B (0%)
build/all-products-frontend.js 12 kB +5 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-frontend.js 253 B -1 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB +3 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB -2 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB -5 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 718 B -2 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.5 kB -4 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB +1 B (0%)
build/cart-blocks/cart-totals-frontend.js 309 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -3 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB -6 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 272 B -2 B (-1%)
build/cart-blocks/order-summary-taxes-frontend.js 431 B -4 B (-1%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB +59 B (+4%)
build/cart-frontend.js 30 kB +128 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB +3 B (0%)
build/checkout-blocks/fields-frontend.js 331 B -1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -3 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB +1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +2 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -2 B (-1%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB -5 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 433 B -3 B (-1%)
build/checkout-blocks/payment-frontend.js 8.28 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.84 kB -5 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.63 kB -3 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB -1 B (0%)
build/checkout-blocks/totals-frontend.js 362 B +1 B (0%)
build/checkout-frontend.js 31.9 kB -21 B (0%)
build/mini-cart-component-frontend.js 29.6 kB +1.08 kB (+4%)
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB -3 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB +78 B (+5%) 🔍
build/mini-cart-contents-block/empty-cart-frontend.js 361 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.81 kB -281 B (-7%)
build/mini-cart-contents-block/products-table-frontend.js 594 B +1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 528 B +2 B (0%)
build/mini-cart-contents-block/title-frontend.js 1.89 kB -5 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB -5 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 1.52 kB -6 B (0%)
build/mini-cart-frontend.js 2.66 kB -1 B (0%)
build/price-filter-wrapper-frontend.js 6.75 kB +2 B (0%)
build/product-add-to-cart-frontend.js 6.51 kB -2 B (0%)
build/product-button-frontend.js 2.65 kB -5 B (0%)
build/product-image-frontend.js 2.61 kB -8 B (0%)
build/product-price-frontend.js 204 B +1 B (0%)
build/product-rating-frontend.js 2.26 kB -11 B (0%)
build/product-sale-badge-frontend.js 1.78 kB -7 B (0%)
build/product-sku-frontend.js 1.83 kB -6 B (0%)
build/product-stock-indicator-frontend.js 2.02 kB -4 B (0%)
build/product-summary-frontend.js 2.18 kB -9 B (0%)
build/product-title-frontend.js 2.21 kB -5 B (0%)
build/rating-filter-frontend.js 21.4 kB -2 B (0%)
build/rating-filter-wrapper-frontend.js 6.2 kB +3 B (0%)
build/reviews-frontend.js 7.17 kB -2 B (0%)
build/stock-filter-wrapper-frontend.js 2.98 kB +1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB +1 B (0%)
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 kB -3 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.58 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB +1 B (0%)
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB +1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB +2 B (0%)
build/vendors--price-filter-wrapper-frontend.js 2.2 kB +1 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB -3 B (0%)
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.47 kB
build/all-products.js 40 kB
build/all-reviews.js 7.85 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/billing-address-frontend.js 1.19 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 6.46 kB
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents.js 18 kB
build/mini-cart.js 4.43 kB
build/price-filter.js 8.55 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.35 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B
build/product-button.js 3.97 kB
build/product-categories.js 2.71 kB
build/product-category.js 9.36 kB
build/product-collection.js 9.89 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.68 kB
build/product-price.js 1.69 kB
build/product-query.js 11.8 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku.js 536 B
build/product-stock-indicator.js 730 B
build/product-summary.js 904 B
build/product-tag.js 9.01 kB
build/product-template.js 3.35 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/single-product.js 11.1 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 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/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 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.75 kB
build/wc-blocks-style-rtl.css 27.9 kB
build/wc-blocks-style.css 27.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65 kB
build/wc-blocks.js 3.7 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 30.4 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@opr opr self-assigned this Dec 6, 2022
@opr opr added status: needs review category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. skip-changelog PRs that you don't want to appear in the changelog. focus: blocks Specific work involving or impacting how blocks behave. block: cart Issues related to the cart block. type: enhancement The issue is a request for an enhancement. labels Dec 6, 2022
@opr opr marked this pull request as ready for review December 6, 2022 16:49
@rubikuserbot rubikuserbot requested review from a team and senadir and removed request for a team December 6, 2022 16:49
@opr opr force-pushed the add/cart-event-context-trunk branch from dd62544 to c43994d Compare December 6, 2022 16:50
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 14, 2022
Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

Thank you for working on this Thomas. I think what this PR is missing is a why section? why do we want to trigger an event on what supposed to be a regular link transition between two pages? I think this button serves a different purpose than say Place Order which puts things into motion. I'm overall not opposing this PR, just trying to understand some valid use cases for this.

Do we also need to document this somewhere?

>
{ __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ) }
</Button>
<div>
Copy link
Member

Choose a reason for hiding this comment

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

Was this extra div always here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No, good catch I don't know why that's here.

@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-7809.zip

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 15, 2022
@opr
Copy link
Contributor Author

opr commented Dec 19, 2022

Thank you for working on this Thomas. I think what this PR is missing is a why section? why do we want to trigger an event on what supposed to be a regular link transition between two pages? I think this button serves a different purpose than say Place Order which puts things into motion. I'm overall not opposing this PR, just trying to understand some valid use cases for this.

Do we also need to document this somewhere?

Thank you for the review, Nadir. @mikejolley and I spoke about this (the why) and for now I plan to leave this PR until the rest of the cart validation/error handling is finished. Once it is we can decide if we this PR. At that point I will be able to answer you better about why it's necessary.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 27, 2022
@opr
Copy link
Contributor Author

opr commented Feb 7, 2023

Closing because this is no longer needed, we are using snackbars to show quantity changes. This PR was supposed to handle the case where validation errors needed to show in the quantity input fields, but this is no longer required.

@opr opr closed this Feb 7, 2023
@opr opr reopened this May 31, 2023
@opr opr force-pushed the add/cart-event-context-trunk branch 2 times, most recently from d5119bf to 97e3a32 Compare May 31, 2023 11:08
@github-actions
Copy link
Contributor

github-actions bot commented May 31, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7809.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: 468
  • Total errors: 2255

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

assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx

comments-aggregator

@opr opr force-pushed the add/cart-event-context-trunk branch from 9557d04 to 628ad57 Compare May 31, 2023 17:59
@opr opr requested review from senadir and mikejolley June 1, 2023 12:42
@mikejolley
Copy link
Member

Hey @opr is this back?

Closing because this is no longer needed, we are using snackbars to show quantity changes. This PR was supposed to handle the case where validation errors needed to show in the quantity input fields, but this is no longer required.

Whats the new status?

@opr
Copy link
Contributor Author

opr commented Jun 19, 2023

@mikejolley it's from woocommerce/woocommerce#42648 - the button should not be disabled, but we should still catch and prevent the default action to proceed to checkout. The only way to do this is using this event/observer.

@mikejolley
Copy link
Member

@opr I tried your example but after hitting cancel it still redirected. Not sure if I did something wrong?

@opr
Copy link
Contributor Author

opr commented Jun 19, 2023

@mikejolley Weird, I've updated the example in the PR body to add the registration function to the useEffect's dependencies.

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Works with the updated snippet. Approving 👍🏻

@opr opr merged commit a953700 into trunk Jun 19, 2023
@opr opr deleted the add/cart-event-context-trunk branch June 19, 2023 15:44
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. skip-changelog PRs that you don't want to appear in the changelog. status: stale Stale issues and PRs have had no updates for 60 days. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants