Update EditorCheckoutModal to use ShoppingCartProvider

[tjcafferkey]

Changes proposed in this Pull Request

• Update the EditorCheckoutModal component to use the ShoppingCartProvider which is needed as the sub-components within this checkout modal make use of useShoppingCart which need the provider.

Testing instructions

• Select a site that is on the free plan
• Open the editor on this site via a page/post
• Open DevTools > Console.
• Add a Premium block (e.g. Premium Content)
• Click "Upgrade" banner on the block
• A modal should appear over the post and the below error should not be present in your console.
• You should be able to edit/update your order and check out successfully via any of the available methods before being returned back into your post.

[matticbot]

Test live: https://calypso.live/?branch=update/editor-checkout-modal-provider

[tjcafferkey]

The function getCartKey expects waitForOtherCartUpdates but whether we need it or not I am unsure. I am also not too sure what this value is for, or if we can safely assume it's value is going to be false.

It's also used in this file to reference but could use another opinion on this.

[alshakero]

I think we'll have to ask @sirbrillig for this one.

[sirbrillig]

There are two situations where the ShoppingCartProvider needs to wait for the old CartStore in new checkout. I'm not sure if either of them apply to your use-case.

1. If some other page has added a product to the cart and then redirected to checkout without waiting for the cart transaction to complete. This creates a race condition between the two cart managers, since ShoppingCartProvider might query the cart before the change request completes, causing it to get the wrong version of the cart. This should really be fixed on the other end by waiting before the page redirects, but that requires finding everywhere that might modify the cart in calypso and I haven't had the time yet. So waitForOtherCartUpdates is true if the CartStore is pending updates.
2. The Registrationless checkout flow uses localStorage to keep a list of products for the cart which are loaded by the CartStore during signup. We need to make sure that when the ShoppingCartProvider loads the cart, that those changes have completed and that we pull them in from the CartStore properly. Ultimately, we should be solving this by making the ShoppingCartProvider capable of dealing with localStorage instead of the CartStore, but I haven't had time for that yet.

[matticbot]

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

Sections (~48 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
checkout       +377 B  (+0.0%)      -48 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 (~3114 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal     +10602 B  (+1.0%)    +3114 B  (+1.2%)

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.

[razvanpapadopol]

Updating cart isn't working as can be seen in https://cloudup.com/cmgW2kDO5yC

[sirbrillig]

🤔 It's missing the arguments and is also not actually calling the endpoint. Here's the types for these two functions:

	setCart: ( cartKey: string, requestCart: RequestCart ) => Promise< ResponseCart >;
	getCart: ( cartKey: string ) => Promise< ResponseCart >;

[alshakero]

Reviewed and tested. LGTM!

[alshakero]

I think we'll have to ask @sirbrillig for this one.

[razvanpapadopol]

We should maintain the capability to update cart items. See #46860 (comment).

[sirbrillig]

The following changes would fix the setCart functionality, but it would ignore the cartData prop that's passed into EditorCheckoutModal. I'm trying to understand where that comes from and what it represents 🤔

diff --git a/client/blocks/editor-checkout-modal/index.tsx b/client/blocks/editor-checkout-modal/index.tsx
index 6581e4394f..2bdaadd8de 100644
--- a/client/blocks/editor-checkout-modal/index.tsx
+++ b/client/blocks/editor-checkout-modal/index.tsx
@@ -7,7 +7,7 @@ import wp from 'calypso/lib/wp';
 import classnames from 'classnames';
 import { Button } from '@wordpress/components';
 import { Icon, close, wordpress } from '@wordpress/icons';
-import { ShoppingCartProvider } from '@automattic/shopping-cart';
+import { ShoppingCartProvider, RequestCart } from '@automattic/shopping-cart';

 /**
  * Internal dependencies
@@ -17,9 +17,8 @@ import { fetchStripeConfiguration } from 'calypso/my-sites/checkout/composite-ch
 import CompositeCheckout from 'calypso/my-sites/checkout/composite-checkout/composite-checkout';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import getCartKey from 'calypso/my-sites/checkout/get-cart-key';
-import type { SiteData } from 'calypso/state/ui/selectors/site-data';
 import userFactory from 'calypso/lib/user';
-import type { CartData, Props } from './types';
+import type { Props } from './types';

 /**
  * Style dependencies
@@ -27,14 +26,9 @@ import type { CartData, Props } from './types';
 import './style.scss';

 const wpcom = wp.undocumented();
-
-async function getCart( site: SiteData, cartData: CartData ) {
-       try {
-               return await wpcom.setCart( site.ID, cartData );
-       } catch {
-               return;
-       }
-}
+const wpcomGetCart = ( cartKey: string ) => wpcom.getCart( cartKey );
+const wpcomSetCart = ( cartKey: string, requestCart: RequestCart ) =>
+       wpcom.setCart( cartKey, requestCart );

 function fetchStripeConfigurationWpcom( args: Record< string, unknown > ) {
        return fetchStripeConfiguration( args, wpcom );
@@ -71,18 +65,9 @@ const EditorCheckoutModal = ( props: Props ) => {
                                        <Icon icon={ close } size={ 24 } />
                                </Button>
                        </div>
-                       <ShoppingCartProvider
-                               cartKey={ cartKey }
-                               getCart={ () => getCart( site, cartData ) }
-                               setCart={ () => getCart( site, cartData ) }
-                       >
+                       <ShoppingCartProvider cartKey={ cartKey } getCart={ wpcomGetCart } setCart={ wpcomSetCart }>
                                <StripeHookProvider fetchStripeConfiguration={ fetchStripeConfigurationWpcom }>
-                                       <CompositeCheckout
-                                               isInEditor
-                                               siteId={ site.ID }
-                                               siteSlug={ site.slug }
-                                               getCart={ () => getCart( site, cartData ) }
-                                       />
+                                       <CompositeCheckout isInEditor siteId={ site.ID } siteSlug={ site.slug } />
                                </StripeHookProvider>
                        </ShoppingCartProvider>
                </div>

[sirbrillig]

Ah, it comes from CalypsoifyIframe. I guess you're using that component's state as a temporary store for cart products before checkout loads. I'd suggest one of two options:

1. As a side effect before checkout loads (in either CalypsoifyIframe or EditorCheckoutModal), POST the new products to the shopping cart endpoint (and wait for it to finish).
2. This might be simpler: allow CompositeCheckout to add the products to the cart for you by providing them as a comma-separated list of slugs in the productAliasFromUrl prop. I'd be more specific, but I can't find where the OpenCheckoutModal action is called.

I might also be misunderstanding this! In which case, just ignore me, but I'm happy to help fix this in any way I can. Sorry for the breakage caused by #46532! I totally forgot that there was another consumer of CompositeCheckout.

[sirbrillig]

I might have found where that action gets triggered from some JS on the back-end. It looks like the value of this might only be a plan slug. I'm not sure if you can use the slugs raw or not, but I think it should work.

These changes have been implemented.

[alshakero]

Tested editing the cart and continued the checkout. Works as expected.