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

Remove old cart notices before showing new ones #7363

Merged
merged 5 commits into from
Jan 12, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Oct 11, 2022

This PR will change the Filled Cart Block so that it will clear out previous errors before showing new ones. This is because in #5838 we noticed that even though old errors had been fixed and were no longer present in the API response, they were not removed from the UI.

Fixes #5838

Testing

Automated Tests

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

User Facing Testing

  1. Add two items to your cart, item A and item B.
  2. Go to the Cart block, and ensure you see no errors.
  3. Open a new tab, and edit product A. Set it to be out of stock.
  4. Without reloading the page return to the Cart block, and increase the quantity of any product. Ensure an error appears.
  5. Edit product A again, and set it to be in stock.
  6. Without reloading the page return to the Cart block, and increase the quantity of any product. Ensure the previous error is removed.
  7. In separate tabs, edit product A and B. Set them both to be out of stock.
  8. Without reloading the page return to the Cart block, and increase the quantity of any product. Ensure an error appears showing both products are out of stock.
  9. Edit only one product, set it back to in stock.
  10. Without reloading the page return to the Cart block, and increase the quantity of any product. Ensure the error stays, but that it only shows that one of the products is out of stock.
  11. Add the Mini Cart block to a page and repeat the above steps using the Mini Cart instead.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

This will have a very slight, pretty much negligible, negative performance impact after receiving the cart from the API. This change will cause the Cart block to dispatch n actions to the core/notices store, where n is the number of notices currently displayed every time the cart updates. I am noting this anyway just so it's on the record, despite it being negligible.

Changelog

Fixed an issue where error notices that had been fixed would not be correctly removed from the Cart block.

@opr opr added status: needs review type: bug The issue/PR concerns a confirmed bug. focus: blocks Specific work involving or impacting how blocks behave. block: cart Issues related to the cart block. labels Oct 11, 2022
@opr opr self-assigned this Oct 11, 2022
@rubikuserbot rubikuserbot requested review from a team and nielslange and removed request for a team October 11, 2022 11:33
@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-7363.zip

@github-actions
Copy link
Contributor

github-actions bot commented Oct 11, 2022

Size Change: +156 B (0%)

Total Size: 1.02 MB

Filename Size Change
build/cart-blocks/filled-cart-frontend.js 862 B +79 B (+10%) ⚠️
build/cart-frontend.js 28.1 kB -1 B (0%)
build/mini-cart-contents-block/filled-cart-frontend.js 467 B +78 B (+20%) 🚨
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.73 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.31 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.7 kB
build/attribute-filter-wrapper-frontend.js 7.69 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 39.5 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-cross-sells-products-frontend.js 9.61 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 716 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.33 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 322 B
build/cart-blocks/empty-cart-frontend.js 344 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.77 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.5 kB
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.24 kB
build/cart.js 46.9 kB
build/checkout-blocks/actions-frontend.js 1.86 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.86 kB
build/checkout-blocks/billing-address-frontend.js 1.12 kB
build/checkout-blocks/contact-information-frontend.js 2 kB
build/checkout-blocks/express-payment-frontend.js 1.14 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.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.93 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.3 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.6 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.34 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/shipping-methods-frontend.js 4.55 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 29.4 kB
build/checkout.js 40.9 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.3 kB
build/filter-wrapper-frontend.js 13.8 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 7.22 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 27.4 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/footer-frontend.js 2.81 kB
build/mini-cart-contents-block/items-frontend.js 236 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 312 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.7 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.26 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.39 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 6.71 kB
build/product-add-to-cart.js 8.48 kB
build/product-best-sellers.js 7.58 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 258 B
build/product-button-frontend.js 2.14 kB
build/product-button.js 3.84 kB
build/product-categories.js 2.37 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-category.js 8.57 kB
build/product-image-frontend.js 2.14 kB
build/product-image.js 3.93 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.9 kB
build/product-price-frontend.js 2.18 kB
build/product-price.js 1.54 kB
build/product-query.js 5.9 kB
build/product-rating-frontend.js 1.58 kB
build/product-rating.js 920 B
build/product-sale-badge-frontend.js 1.37 kB
build/product-sale-badge.js 815 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 1.14 kB
build/product-tag-list.js 495 B
build/product-tag.js 8.06 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.31 kB
build/product-top-rated.js 7.81 kB
build/products-by-attribute.js 8.5 kB
build/rating-filter-frontend.js 21.2 kB
build/rating-filter-wrapper-frontend.js 6.22 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 6.89 kB
build/single-product-frontend.js 17.4 kB
build/single-product.js 9.96 kB
build/stock-filter-frontend.js 20.9 kB
build/stock-filter-wrapper-frontend.js 5.89 kB
build/stock-filter.js 8.16 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--237ee43d-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 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.83 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.2 kB
build/wc-blocks-editor-style-rtl.css 5.4 kB
build/wc-blocks-editor-style.css 5.4 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.8 kB
build/wc-blocks-style.css 24.7 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 62.7 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

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

Works as expected, @opr! Let's ⛴ it!

@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 Oct 22, 2022
@nielslange nielslange removed the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 24, 2022
@opr
Copy link
Contributor Author

opr commented Oct 24, 2022

cc @nielslange, @jimjasson and @PanosSynetos @manospsyx - I am going to close this PR without merging until we get further progress and a decision on pca54o-4vF-p2. I feel the new UX here, where old notices get removed before the shopper has a chance to see them is too poor.

Let me know if you really disagree and we can look into reopening it.

@opr opr closed this Oct 24, 2022
@jimjasson
Copy link

Hey @opr, thank you for the update!

My only concern is that this issue is a blocker for peapX7-KN-p2.

@PanosSynetos
Copy link
Contributor

PanosSynetos commented Oct 25, 2022

@opr what you describe pca54o-4vF-p2 in your example is very much of an edge case.

Let me give a more “sensible” example, with a screenshot (coming straight from MMQ)

image

When the user adjusts the quantity and sets it to 5, the error message should go away, shouldn’t it? Well... it doesn't ;)

I'm afraid we cannot default the cart/checkout blocks on wpcom/ecommerce plans without this fix, MMQ is one of the crucial plugins of this plan

@opr opr reopened this Oct 25, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 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 2, 2022

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 Nov 2, 2022
@nielslange nielslange removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 2, 2022
@opr opr force-pushed the fix/remove-errors-when-fixed branch from 5c9515a to 8a244d9 Compare November 7, 2022 17:05
@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

TypeScript Errors Report

Files with errors: 439
Total errors: 2096

🎉 🎉 This PR does not introduce new TS errors.

@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 Nov 27, 2022
@opr opr force-pushed the fix/remove-errors-when-fixed branch from bcc9f03 to 0d27967 Compare December 20, 2022 13:11
@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-7363.zip

@opr
Copy link
Contributor Author

opr commented Dec 20, 2022

Hey @PanosSynetos @jimjasson @mikejolley would you be able to try this one out again? I have rebased on trunk now, and given #7938 is merged and shows notices on quantity changes, it should be OK for the notices to be removed here.

Zip of changes:
woocommerce-gutenberg-products-block.zip

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 21, 2022
@opr opr force-pushed the fix/remove-errors-when-fixed branch from 0d27967 to 6f86b6f Compare January 9, 2023 11:36
@github-actions
Copy link
Contributor

github-actions bot commented Jan 9, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
single-product-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

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

TypeScript Errors Report

  • Files with errors: 473
  • Total errors: 2234

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@jimjasson
Copy link

Hey @opr 👋

I tested the zip file you shared and confirmed that errors get hidden when they are no longer valid. Moreover, I confirmed that the errors show up again if the user makes an invalid selection.

Here's a video of what I tried:

Screen.Capture.on.2023-01-10.at.17-00-48.mp4

In my example, the Minimum Order Quantity is 5 and the Maximum Order Quantity is 10.

@opr opr force-pushed the fix/remove-errors-when-fixed branch from 6f86b6f to 51aee45 Compare January 10, 2023 16:15
@PanosSynetos
Copy link
Contributor

Sorry @opr - I missed your message :( @jimjasson was your test results ok? Do you need me to test it out on my end? It might be a good idea to try it out on Atomic and see how it behaves

@jimjasson
Copy link

All good on a local site @PanosSynetos -- feel free to give this a try on an Atomic site if you have one available!

@PanosSynetos
Copy link
Contributor

I tested with https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7363.zip on an ecommerce Atomic site and works as expected in Cart with Minimum Order Quantity is 5 and the Maximum Order Quantity is 10

But, the same changes don't reflect into Mini Cart 🙈

I get an error that I need at least 5 items, but after I update the quanity, the error doesn't go away. If I reload and open the minicart, the error is gone

Screencast is with the Tsubaki theme , on an ecommerce plan site

Monosnap.screencast.2023-01-11.11-37-26.mp4

@opr opr force-pushed the fix/remove-errors-when-fixed branch from 51aee45 to 8fe3226 Compare January 12, 2023 09:56
@opr opr requested a review from gigitux January 12, 2023 10:44
@opr
Copy link
Contributor Author

opr commented Jan 12, 2023

@PanosSynetos please could you test again with the latest zip with the mini cart fixed 🤞🏼

woocommerce-gutenberg-products-block.zip

@PanosSynetos
Copy link
Contributor

All is good now, I tested both the cart and mini cart!

@opr opr mentioned this pull request Jan 12, 2023
10 tasks
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

LGTM!

@opr opr merged commit b65df7d into trunk Jan 12, 2023
@opr opr deleted the fix/remove-errors-when-fixed branch January 12, 2023 12: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. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Outdated error notices persist in the cart even after making valid configurations
6 participants