Update EditorCheckoutModal to use ShoppingCartProvider (#46860)

* Update EditorCheckoutModal to use ShoppingCartProvider * Pass in productSlugs to CompositeCheckout to load products into users cart prior to opening modal. * Replace CartData type with RequestCart type from @automattic/shopping-cart * Add type to import statement of RequestCart interface from `@automattic/shopping-cart`
Automattic · Oct 29, 2020 · ff95237 · ff95237
1 parent 0a9c81f
commit ff95237
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 55 deletions.
diff --git a/client/blocks/editor-checkout-modal/index.tsx b/client/blocks/editor-checkout-modal/index.tsx
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import React, { Component } from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import wp from 'calypso/lib/wp';
 import classnames from 'classnames';
 import { Button } from '@wordpress/components';
 import { Icon, close, wordpress } from '@wordpress/icons';
+import { ShoppingCartProvider, RequestCart } from '@automattic/shopping-cart';
 
 /**
  * Internal dependencies
@@ -15,6 +16,9 @@ import { StripeHookProvider } from 'calypso/lib/stripe';
 import { fetchStripeConfiguration } from 'calypso/my-sites/checkout/composite-checkout/payment-method-helpers';
 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';
 
 /**
  * Style dependencies
@@ -23,74 +27,79 @@ import './style.scss';
 
 const wpcom = wp.undocumented();
 
-type Site = {
-	ID: number;
-	slug: string;
-};
+const wpcomGetCart = ( cartKey: string ) => wpcom.getCart( cartKey );
+const wpcomSetCart = ( cartKey: string, requestCart: RequestCart ) =>
+	wpcom.setCart( cartKey, requestCart );
 
-export interface CartData {
-	products: Array< {
-		product_id: number;
-		product_slug: string;
-	} >;
+function fetchStripeConfigurationWpcom( args: Record< string, unknown > ) {
+	return fetchStripeConfiguration( args, wpcom );
 }
 
-type Props = {
-	site: Site;
-	cartData: CartData;
-	onClose: () => void;
-	isOpen: boolean;
-};
-
-class EditorCheckoutModal extends Component< Props > {
-	static defaultProps = {
-		isOpen: false,
-		onClose: () => null,
-		cartData: {},
-	};
-
-	async getCart() {
-		// Important: If getCart or cartData is empty, it will redirect to the plans page in customer home.
-		const { site, cartData } = this.props;
+const EditorCheckoutModal = ( props: Props ) => {
+	const { site, isOpen, onClose, cartData } = props;
+	const hasEmptyCart = ! cartData.products || cartData.products.length < 1;
 
-		try {
-			return await wpcom.setCart( site.ID, cartData );
-		} catch {
-			return;
-		}
-	}
+	const user = userFactory();
+	const isLoggedOutCart = ! user?.get();
+	const waitForOtherCartUpdates = false;
+	// We can assume if they're accessing the checkout in an editor that they have a site.
+	const isNoSiteCart = false;
 
-	render() {
-		const { site, isOpen, onClose, cartData } = this.props;
+	const cartKey = useMemo(
+		() =>
+			getCartKey( {
+				selectedSite: site,
+				isLoggedOutCart,
+				isNoSiteCart,
+				waitForOtherCartUpdates,
+			} ),
+		[ waitForOtherCartUpdates, site, isLoggedOutCart, isNoSiteCart ]
+	);
 
-		const hasEmptyCart = ! cartData.products || cartData.products.length < 1;
+	// We need to pass in a comma separated list of product
+	// slugs to be set in the cart otherwise we will be
+	// redirected to the plans page due to an empty cart
+	const productSlugs = hasEmptyCart
+		? null
+		: cartData.products.map( ( product ) => product.product_slug );
+	const commaSeparatedProductSlugs = productSlugs?.join( ',' ) || null;
 
-		return hasEmptyCart ? null : (
-			<div className={ classnames( 'editor-checkout-modal', isOpen ? 'is-open' : '' ) }>
-				<div className="editor-checkout-modal__header">
-					<div className="editor-checkout-modal__wp-logo">
-						<Icon icon={ wordpress } size={ 36 } />
-					</div>
-					<Button isLink className="editor-checkout-modal__close-button" onClick={ onClose }>
-						<Icon icon={ close } size={ 24 } />
-					</Button>
+	return hasEmptyCart ? null : (
+		<div className={ classnames( 'editor-checkout-modal', isOpen ? 'is-open' : '' ) }>
+			<div className="editor-checkout-modal__header">
+				<div className="editor-checkout-modal__wp-logo">
+					<Icon icon={ wordpress } size={ 36 } />
 				</div>
+				<Button isLink className="editor-checkout-modal__close-button" onClick={ onClose }>
+					<Icon icon={ close } size={ 24 } />
+				</Button>
+			</div>
+			<ShoppingCartProvider cartKey={ cartKey } getCart={ wpcomGetCart } setCart={ wpcomSetCart }>
 				<StripeHookProvider fetchStripeConfiguration={ fetchStripeConfigurationWpcom }>
 					<CompositeCheckout
 						isInEditor
 						siteId={ site.ID }
 						siteSlug={ site.slug }
-						getCart={ this.getCart.bind( this ) }
+						productAliasFromUrl={ commaSeparatedProductSlugs }
 					/>
 				</StripeHookProvider>
-			</div>
-		);
-	}
-}
+			</ShoppingCartProvider>
+		</div>
+	);
+};
 
-function fetchStripeConfigurationWpcom( args: Record< string, unknown > ) {
-	return fetchStripeConfiguration( args, wpcom );
-}
+type Props = {
+	site: SiteData;
+	cartData: RequestCart;
+	onClose: () => void;
+	isOpen: boolean;
+};
+
+EditorCheckoutModal.defaultProps = {
+	isOpen: false,
+	onClose: () => null,
+	cartData: {},
+};
 
 export default connect( ( state ) => ( {
 	site: getSelectedSite( state ),

diff --git a/client/gutenberg/editor/calypsoify-iframe.tsx b/client/gutenberg/editor/calypsoify-iframe.tsx
@@ -58,7 +58,7 @@ import { REASON_BLOCK_EDITOR_UNKOWN_IFRAME_LOAD_FAILURE } from 'calypso/state/de
 import { setMediaLibrarySelectedItems } from 'calypso/state/media/actions';
 import { fetchMediaItem, getMediaItem } from 'calypso/state/media/thunks';
 import Iframe from './iframe';
-import type { CartData } from 'calypso/client/blocks/editor-checkout-modal';
+import type { RequestCart } from '@automattic/shopping-cart';
 
 /**
  * Types
@@ -96,7 +96,7 @@ interface State {
 	multiple?: any;
 	postUrl?: T.URL;
 	previewUrl: T.URL;
-	cartData?: CartData;
+	cartData?: RequestCart;
 }
 /* eslint-enable @typescript-eslint/no-explicit-any */