Checkout: create shopping-cart package and ShoppingCartProvider

[sirbrillig]

Changes proposed in this Pull Request

This creates a new wrapper component, ShoppingCartProvider, which can be used along with its hook, useShoppingCart to provide access to the shopping cart to any component in calypso (assuming the provider is used on that route). This PR only wraps checkout in the provider, but it can be used on other routes in the future to replace the CartData provider.

For components which cannot use hooks, this also adds a withShoppingCart HOC that provides the same data.

This also creates a new package in the monorepo for the above and the rest of the shopping-cart functions and types called @automattic/shopping-cart.

Testing instructions

This is a big change for new checkout, but the shopping cart is so heavily interwoven into all aspects of checkout, if anything works, it's very likely that everything will work. The API of the shopping cart manager has not changed with this PR (except for adding a way to reload the cart). This PR really just moves where the functions are defined and where they are created at runtime.

Reviewing this PR is probably most easily done commit-by-commit.

Notable things that have changed and should be verified:

• If the cart key changes, we reload the cart from scratch. This should probably have been done sooner, but previously it was unlikely that the cart key would change after checkout had loaded. Since we now have the provider being rendered at the top of a route, it's possible that something might cause the cart key to change (eg: switching to a different site without loading a new page). This is new behavior and we aren't using it currently, so I'm not very concerned.
• The shopping cart manager now requires the cart key to be set as an argument. That was mostly true before, but previously if it was falsy, the 'no-site' cart key would be used. Now the 'no-site' cart key should be provided explicitly if needed and a falsy cart key means that the cart is not ready to be loaded. This should work correctly, but it's worth testing the no-site behavior explicitly (this is done by the domain-only singup e2e tests).
• I don't know how to test the isLoggedOutCart and isNoSiteCart behaviors, but they are moved around by this change so they should be tested. We may be able to learn more by using the test instructions in Registrationless checkout: Integration PR #44206

[matticbot]

Test live: https://calypso.live/?branch=try/create-shopping-cart-provider

[matticbot]

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

Sections (~383 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +1990 B  (+0.1%)     +383 B  (+0.1%)

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 (~2710 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal      -8415 B  (-0.8%)    -2710 B  (-1.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.

[sirbrillig]

It looks as though the CartStore begins polling as soon as the application loads when CartStore.setSelectedSiteId is called.

[sirbrillig]

Things that would need to be internalized or injected if we want to move this to its own package:

• client/lib/shopping-cart/shopping-cart-endpoint.ts uses GSuiteProductUser and DomainContactDetails

[wp-desktop]

WordPress Desktop CI Failure for job "wp-desktop-mac".

@sirbrillig please inspect this job's build steps for breaking changes at this link. For temporal failures, you may try to "Rerun Workflow from Failed".

Please also ensure this branch is rebased off latest Calypso.

wp-desktop ci passing, closing review

[sirbrillig]

@nbloomf At some point in the near future, I'd love your help figuring out a useful test plan for this, given the notes I wrote in the description.

[sirbrillig]

Ah, I realized a bug: we need to know when the CartStore has finished updating in order to continue after we wait for a race condition to resolve. That's what's causing the tests to fail. To reproduce: add a domain to your cart. 😩 I wish we could remove this dependency on the CartStore but I guess we can't just yet.

[nbloomf]

Update: Disregard this; I forgot to yarn install as usual.

This may be a problem local to me, but even after restarting calypso I'm getting errors like this:

ERROR in ./my-sites/checkout/composite-checkout/payment-methods/credit-card/credit-card-pay-button.js
Module not found: Error: Can't resolve '@automattic/shopping-cart' in '/Users/nathan/code/local-a8c/wp-calypso/client/my-sites/checkout/composite-checkout/payment-methods/credit-card'

and similar console errors:

[nbloomf]

I tried testing the userless checkout flow and ran into some bugs. I was able to reproduce this behavior with both this branch and master, but not in production; i'm not sure what is causing this yet but it appears to be vaguely cart related. Here are my steps to reproduce.

• Since this creates a new package, yarn install && yarn start after checking out this branch.
• Make sure you are logged out of wpcom. Open calypso and manually put yourself in the variantUserless bucket of the userlessCheckout test.
• Navigate to /start. This should redirect to /start/onboarding-registrationless/domains.
• Select a domain (the free subdomain option is not available here.) This redirects to /start/onboarding-registrationless/plans-new.
• Select a plan. At this point we should redirect to checkout, but instead this reloads /start/onboarding-registrationless/plans-new.
• Attempting to select a plan a second time redirects back to /start/onboarding-registrationless/domains with an error notification and the component width appears to be off.

[sirbrillig]

For later reference, the race condition I observed (and there may be others) is triggered when the domain purchase button is clicked. Ideally, it would wait for the cart update to complete before running the redirect.

[sirbrillig]

It turns out there were actually two race conditions: the one with the CartStore (fixed by restoring the dependency for now) and another between useReloadCartIfCartKeyChanges and useInitializeCartFromServer. The cart had never been designed to be loaded more than once before, so some things had to be adjusted to allow for that.

[sirbrillig]

The Sign up for a domain only purchase coming in from wordpress.com/domains e2e tests are failing and I'm not sure why. I've probably broken something about how the cart is fetched from localStorage, but I don't know enough about how that's supposed to work. I'll keep looking, but I may need your help, @niranjan-uma-shankar, to solve this mystery.

[sirbrillig]

There we go, I figured it out. It was because the no-site cart key needs to be returned even if isLoggedOutCart and isNoSiteCart are false if there's no selected site.

[sirbrillig]

Rebased to fix a conflict, as well as to squash some of the refactors down into more atomic commits. Reviewing each commit should be more reasonable now.

[nbloomf]

We went over the code changes in a pair session, and I did some testing to make sure I was able to complete checkout in the new-site flow as well as userless. I didn't see any problems and the code looks good. Nice work!