Add CartEventsContext to dispatch events in the Cart block
#7694
Conversation
opr
added
status: needs review
type: enhancement
rubikuserbot
requested review from
a team and
senadir
and removed request for
a team
TypeScript Errors ReportFiles with errors: 434
assets/js/atomic/blocks/product-elements/image/block.js
assets/js/atomic/blocks/product-elements/image/edit.js assets/js/atomic/blocks/product-elements/image/index.js assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx assets/js/base/context/providers/store-notices/components/store-notices-container.js assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/test/block.tsx assets/js/utils/notices.ts |
|
The release ZIP for this PR is accessible via: |
|
Size Change: +2.18 kB (0%) Total Size: 994 kB
ℹ️ View Unchanged
|
opr
force-pushed
the
add/cart-events-context
branch
from
67be8e3 to
3d80d8c
Compare
TypeScript Errors ReportFiles with errors: 448
assets/js/atomic/blocks/product-elements/image/test/block.test.js
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/stock-indicator/edit.js assets/js/atomic/blocks/product-elements/tag-list/index.ts assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/product-price/index.tsx assets/js/base/components/state-input/state-input.tsx assets/js/base/components/text-input/text-input.tsx assets/js/base/components/text-input/validated-text-input.tsx assets/js/base/context/hooks/use-checkout-submit.js assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx assets/js/blocks/cart/block.js assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/test/block.tsx assets/js/blocks/checkout/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/mini-cart/frontend.ts assets/js/blocks/product-query/constants.ts assets/js/data/payment/check-payment-methods.ts assets/js/types/type-defs/payment-method-interface.ts packages/checkout/blocks-registry/get-registered-blocks.ts packages/checkout/blocks-registry/index.ts packages/checkout/blocks-registry/register-checkout-block.ts packages/checkout/components/index.js packages/checkout/components/order-meta/index.js packages/checkout/components/totals/index.js packages/checkout/index.js packages/checkout/slot/index.js packages/checkout/utils/index.js |
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the |
| @@ -87,8 +90,10 @@ const Block = ( { attributes, children, scrollToTop } ) => ( | |||
| <StoreNoticesContainer context="wc/cart" /> | |||
| <SlotFillProvider> | |||
| <CartProvider> | |||
There was a problem hiding this comment.
I'm wondering if we should combine Cart and CartEvents providers? At the moment, the Cart provider just passed the children down and has a redirectUrl
There was a problem hiding this comment.
Please see Mike's comment below
opr
force-pushed
the
remove/auto-quantity-update
branch
from
f7e86c8 to
7a554d8
Compare
opr
force-pushed
the
add/cart-events-context
branch
from
93781db to
ab88dfe
Compare
opr
force-pushed
the
add/cart-events-context
branch
from
4c30af1 to
bddf8f6
Compare
github-actions
bot
added
status: ready to merge
and removed
status: needs review
labels
This PR adds a new context called
CartEventsContextit currently has two functions as its value:onProceedToCheckoutanddispatchOnProceedToCheckoutIt uses the same pattern as the
CheckoutEventsContexthowever I opted to create this new context to keep the concerns separated.In this PR, we also call
dispatchOnProceedToCheckoutwhen the proceed to checkout button is clicked, and if any observers throw an error, or return an object with a type of error causing the process to stop and the user will not proceed to checkout.The
QuantitySelectorcomponent subscribes to this event, and if the quantity does not satisfy the validation criteria then it focuses the input, returns the error object and stops the cart -> checkout flow.Two tests are also included in this PR, one to check the event is dispatched and correctly handled by observers when pressing the button, and one to check unsubscribing from observers works correctly.
This PR is based on
remove/auto-quantity-update(#7606).Accessibility
prefers-reduced-motionOther Checks
Screenshots
https://www.loom.com/share/5445f3a871204aa7a6b89fbed6800889
Testing
Automated Tests
User Facing Testing
WooCommerce Visibility
Performance Impact
Changelog