Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shopping cart: Update StaleCartItemsNotice to use useShoppingCart #47970

Merged
merged 3 commits into from
Dec 3, 2020

Conversation

sirbrillig
Copy link
Member

Changes proposed in this Pull Request

As part of the effort to remove the deprecated CartStore, this PR updates the StaleCartItemsNotice component so that it now uses useShoppingCart (part of the @automattic/shopping-cart package).

Screenshots

Screen Shot 2020-12-02 at 2 11 07 PM

Testing instructions

  • Visit the plans page for a site which has had items in its cart for more than 10 minutes.
  • Verify that you see the above notice.
  • Verify that clicking on the link in the notice opens the cart.
  • Without reloading the page, return to the plans page (navigate to a different page first if you haven't already done so).
  • Verify that the notice does not get displayed.

This lets use use useEffect to postpone the notice display functionality
until after render, preventing warnings that we cannot render while
other renders are in-progress.
@matticbot
Copy link
Contributor

@sirbrillig sirbrillig self-assigned this Dec 2, 2020
@sirbrillig sirbrillig added [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. [Feature] Shopping Cart Anything related to the shopping cart in Calypso, like adding items to the cart, the mini-cart, etc. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 2, 2020
@sirbrillig sirbrillig requested a review from a team December 2, 2020 19:15
@matticbot
Copy link
Contributor

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~20 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest        +84 B  (+0.1%)      +20 B  (+0.1%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~45 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                   +28 B  (+0.0%)      +15 B  (+0.0%)
entry-login                  +28 B  (+0.0%)      +10 B  (+0.0%)
entry-gutenboarding          +28 B  (+0.0%)      +10 B  (+0.0%)
entry-domains-landing        +28 B  (+0.0%)      +10 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~564 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
zoninator                    +173 B  (+0.1%)      +10 B  (+0.0%)
wp-super-cache               +173 B  (+0.1%)      +10 B  (+0.0%)
themes                       +173 B  (+0.0%)      +10 B  (+0.0%)
theme                        +173 B  (+0.1%)      +10 B  (+0.0%)
stats                        +173 B  (+0.0%)      +10 B  (+0.0%)
sites                        +173 B  (+0.2%)      +10 B  (+0.0%)
settings-writing             +173 B  (+0.0%)      +10 B  (+0.0%)
settings-security            +173 B  (+0.1%)      +10 B  (+0.0%)
settings-jetpack             +173 B  (+0.1%)      +10 B  (+0.0%)
settings-discussion          +173 B  (+0.1%)      +10 B  (+0.0%)
settings                     +173 B  (+0.0%)       +9 B  (+0.0%)
sensei                       +173 B  (+0.1%)      +10 B  (+0.0%)
scan                         +173 B  (+0.0%)      +10 B  (+0.0%)
preview                      +173 B  (+0.1%)      +10 B  (+0.0%)
posts-custom                 +173 B  (+0.0%)      +11 B  (+0.0%)
posts                        +173 B  (+0.0%)      +11 B  (+0.0%)
plugins                      +173 B  (+0.0%)      +11 B  (+0.0%)
people                       +173 B  (+0.0%)      +11 B  (+0.0%)
pages                        +173 B  (+0.1%)      +11 B  (+0.0%)
migrate                      +173 B  (+0.1%)      +10 B  (+0.0%)
media                        +173 B  (+0.0%)      +11 B  (+0.0%)
jetpack-search               +173 B  (+0.1%)      +10 B  (+0.0%)
jetpack-cloud-settings       +173 B  (+0.1%)      +10 B  (+0.0%)
jetpack-cloud                +173 B  (+0.2%)      +10 B  (+0.0%)
import                       +173 B  (+0.1%)      +11 B  (+0.0%)
hosting                      +173 B  (+0.1%)      +10 B  (+0.0%)
home                         +173 B  (+0.0%)      -38 B  (-0.0%)
hello-dolly                  +173 B  (+0.1%)      +10 B  (+0.0%)
gutenberg-editor             +173 B  (+0.0%)      +22 B  (+0.0%)
google-my-business           +173 B  (+0.1%)      +10 B  (+0.0%)
earn                         +173 B  (+0.1%)      +10 B  (+0.0%)
concierge                    +173 B  (+0.1%)      +10 B  (+0.0%)
comments                     +173 B  (+0.0%)      +11 B  (+0.0%)
backup                       +173 B  (+0.0%)      +10 B  (+0.0%)
woocommerce                   +93 B  (+0.0%)      +17 B  (+0.0%)
site-purchases                +93 B  (+0.0%)      +17 B  (+0.0%)
settings-performance          +93 B  (+0.0%)      +17 B  (+0.0%)
purchases                     +93 B  (+0.0%)      +17 B  (+0.0%)
plans                         +93 B  (+0.0%)      +17 B  (+0.0%)
marketing                     +93 B  (+0.0%)      +17 B  (+0.0%)
jetpack-connect               +93 B  (+0.0%)      +17 B  (+0.0%)
jetpack-cloud-pricing         +93 B  (+0.0%)      +17 B  (+0.0%)
export                        +93 B  (+0.0%)      +17 B  (+0.0%)
email                         +93 B  (+0.0%)      +17 B  (+0.0%)
domains                       +93 B  (+0.0%)      +17 B  (+0.0%)
customize                     +93 B  (+0.0%)      +17 B  (+0.0%)
checkout                      +93 B  (+0.0%)      +18 B  (+0.0%)
activity                      +93 B  (+0.0%)      +17 B  (+0.0%)
signup                        -80 B  (-0.0%)       +7 B  (+0.0%)
purchase-product              -80 B  (-0.0%)       +7 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~3825 bytes removed 📉 [gzipped])

name                                                              parsed_size            gzip_size
async-load-calypso-my-sites-current-site-stale-cart-items-notice     -39895 B  (-45.5%)   -14369 B  (-55.5%)
async-load-calypso-my-sites-sidebar-unified                          +11713 B  (+22.4%)    +4165 B  (+28.7%)
async-load-calypso-my-sites-sidebar                                  +11571 B   (+7.6%)    +3019 B   (+7.4%)
async-load-calypso-components-jetpack-sidebar                        +11571 B  (+49.5%)    +3359 B  (+49.3%)
async-load-design-blocks                                                -80 B   (-0.0%)       -5 B   (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                         -80 B   (-0.0%)       +6 B   (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

Copy link
Contributor

@nbloomf nbloomf left a comment

Choose a reason for hiding this comment

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

I carried out the testing instructions; everything worked as expected and I saw no errors. Nice work!

@nbloomf nbloomf added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 2, 2020
@sirbrillig sirbrillig merged commit ecbd364 into trunk Dec 3, 2020
@sirbrillig sirbrillig deleted the update/stale-cart-items-notice-use-shopping-cart branch December 3, 2020 17:02
@sirbrillig sirbrillig mentioned this pull request Dec 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Estimate] 2 [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. [Feature] Shopping Cart Anything related to the shopping cart in Calypso, like adding items to the cart, the mini-cart, etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants