Open Mini Cart block when adding a product to cart via an AJAX call (#4666)

Author: Aljullu

assets/js/base/components/drawer/index.tsx

@@ -12,6 +12,7 @@ import './style.scss';
 
 interface DrawerProps {
 	children: JSX.Element;
+	className?: string;
 	isOpen: boolean;
 	onClose: () => void;
 	slideIn?: boolean;
@@ -21,6 +22,7 @@ interface DrawerProps {
 
 const Drawer = ( {
 	children,
+	className,
 	isOpen,
 	onClose,
 	slideIn = true,
@@ -39,7 +41,7 @@ const Drawer = ( {
 			title={ title }
 			focusOnMount={ true }
 			onRequestClose={ onClose }
-			className="wc-block-components-drawer"
+			className={ classNames( className, 'wc-block-components-drawer' ) }
 			overlayClassName={ classNames(
 				'wc-block-components-drawer__screen-overlay',
 				{

assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -87,7 +87,7 @@ table.wc-block-cart-items {
 
 // Loading placeholder state.
 .wc-block-cart--is-loading,
-.wc-block-mini-cart.is-loading {
+.wc-block-mini-cart__drawer.is-loading {
 	th span,
 	h2 span {
 		@include placeholder();
@@ -98,45 +98,34 @@ table.wc-block-cart-items {
 	h2 span {
 		min-width: 33%;
 	}
-	.wc-block-cart-item__price,
-	.wc-block-cart-item__individual-price,
-	.wc-block-cart-item__product-metadata,
-	.wc-block-cart-item__image > *,
+	.wc-block-components-product-price,
+	.wc-block-components-product-metadata,
 	.wc-block-components-quantity-selector {
 		@include placeholder();
 	}
-	.wc-block-cart-item__product-name {
+	.wc-block-components-product-name {
 		@include placeholder();
 		@include force-content();
 		min-width: 84px;
 		display: inline-block;
 	}
-	.wc-block-cart-item__product-metadata {
+	.wc-block-components-product-metadata {
 		margin-top: 0.25em;
 		min-width: 8em;
 	}
 	.wc-block-cart-item__remove-link {
 		visibility: hidden;
 	}
-	.wc-block-cart-item__image a {
+	.wc-block-cart-item__image > a {
+		@include placeholder();
 		display: block;
 	}
-	.wc-block-cart-item__individual-price {
+	.wc-block-components-product-price {
 		@include force-content();
 		max-width: 3em;
 		display: block;
 		margin-top: 0.25em;
 	}
-	.wc-block-cart-item__total {
-		> span,
-		> div {
-			display: none;
-		}
-		.wc-block-cart-item__price {
-			@include force-content();
-			display: block;
-		}
-	}
 	.wc-block-cart__sidebar .components-card {
 		@include placeholder();
 		@include force-content();

assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx

@@ -1,27 +1,32 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { renderFrontend } from '@woocommerce/base-utils';
+import { useState, useEffect } from '@wordpress/element';
+import { dispatch } from '@wordpress/data';
+import {
+	translateJQueryEventToNative,
+	renderFrontend,
+} from '@woocommerce/base-utils';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import Drawer from '@woocommerce/base-components/drawer';
-import {
-	withStoreCartApiHydration,
-	withRestApiHydration,
-} from '@woocommerce/block-hocs';
+import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
  */
 import CartLineItemsTable from '../cart/full-cart/cart-line-items-table';
+import withMiniCartConditionalHydration from './with-mini-cart-conditional-hydration';
 import './style.scss';
 
-interface MiniCartBlock {
+interface MiniCartBlockProps {
 	isPlaceholderOpen?: boolean;
 }
 
-const MiniCartBlock = ( { isPlaceholderOpen = false } ): JSX.Element => {
+const MiniCartBlock = ( {
+	isPlaceholderOpen = false,
+}: MiniCartBlockProps ): JSX.Element => {
 	const { cartItems, cartItemsCount, cartIsLoading } = useStoreCart();
 	const [ isOpen, setIsOpen ] = useState< boolean >( isPlaceholderOpen );
 	// We already rendered the HTML drawer placeholder, so we want to skip the
@@ -30,16 +35,42 @@ const MiniCartBlock = ( { isPlaceholderOpen = false } ): JSX.Element => {
 		isPlaceholderOpen
 	);
 
+	useEffect( () => {
+		const openMiniCartAndRefreshData = () => {
+			dispatch( storeKey ).invalidateResolutionForStore();
+			setSkipSlideIn( false );
+			setIsOpen( true );
+		};
+
+		// Make it so we can read jQuery events triggered by WC Core elements.
+		const removeJQueryAddedToCartEvent = translateJQueryEventToNative(
+			'added_to_cart',
+			'wc-blocks_added_to_cart'
+		);
+
+		document.body.addEventListener(
+			'wc-blocks_added_to_cart',
+			openMiniCartAndRefreshData
+		);
+
+		return () => {
+			removeJQueryAddedToCartEvent();
+
+			document.body.removeEventListener(
+				'wc-blocks_added_to_cart',
+				openMiniCartAndRefreshData
+			);
+		};
+	}, [] );
+
 	const contents =
-		cartItems.length === 0 ? (
+		! cartIsLoading && cartItems.length === 0 ? (
 			<>{ __( 'Cart is empty', 'woo-gutenberg-products-block' ) }</>
 		) : (
-			<div className="is-mobile">
-				<CartLineItemsTable
-					lineItems={ cartItems }
-					isLoading={ cartIsLoading }
-				/>
-			</div>
+			<CartLineItemsTable
+				lineItems={ cartItems }
+				isLoading={ cartIsLoading }
+			/>
 		);
 
 	return (
@@ -65,6 +96,13 @@ const MiniCartBlock = ( { isPlaceholderOpen = false } ): JSX.Element => {
 				) }
 			</button>
 			<Drawer
+				className={ classNames(
+					'wc-block-mini-cart__drawer',
+					'is-mobile',
+					{
+						'is-loading': cartIsLoading,
+					}
+				) }
 				title={ sprintf(
 					/* translators: %d is the count of items in the cart. */
 					_n(
@@ -105,10 +143,9 @@ const renderMiniCartFrontend = () => {
 
 	renderFrontend( {
 		selector: '.wc-block-mini-cart',
-		Block: withStoreCartApiHydration(
-			withRestApiHydration( MiniCartBlock )
-		),
+		Block: withMiniCartConditionalHydration( MiniCartBlock ),
 		getProps: ( el: HTMLElement ) => ( {
+			isDataOutdated: el.dataset.isDataOutdated,
 			isPlaceholderOpen: el.dataset.isPlaceholderOpen,
 		} ),
 	} );

assets/js/blocks/cart-checkout/mini-cart/frontend.ts

@@ -4,6 +4,7 @@
 import { getSetting } from '@woocommerce/settings';
 import preloadScript from '@woocommerce/base-utils/preload-script';
 import lazyLoadScript from '@woocommerce/base-utils/lazy-load-script';
+import { translateJQueryEventToNative } from '@woocommerce/base-utils/legacy-events';
 
 interface dependencyData {
 	src: string;
@@ -16,6 +17,7 @@ interface dependencyData {
 // eslint-disable-next-line @wordpress/no-global-event-listener
 window.onload = () => {
 	const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
+	let wasLoadScriptsCalled = false;
 
 	if ( miniCartBlocks.length === 0 ) {
 		return;
@@ -35,7 +37,31 @@ window.onload = () => {
 		} );
 	}
 
+	// Make it so we can read jQuery events triggered by WC Core elements.
+	const removeJQueryAddingToCartEvent = translateJQueryEventToNative(
+		'adding_to_cart',
+		'wc-blocks_adding_to_cart'
+	);
+	const removeJQueryAddedToCartEvent = translateJQueryEventToNative(
+		'added_to_cart',
+		'wc-blocks_added_to_cart'
+	);
+
 	const loadScripts = async () => {
+		// Ensure we only call loadScripts once.
+		if ( wasLoadScriptsCalled ) {
+			return;
+		}
+		wasLoadScriptsCalled = true;
+
+		// Remove adding to cart event handler.
+		document.body.removeEventListener(
+			'wc-blocks_adding_to_cart',
+			loadScripts
+		);
+		removeJQueryAddingToCartEvent();
+
+		// Lazy load scripts.
 		for ( const dependencyHandle in dependencies ) {
 			const dependency = dependencies[ dependencyHandle ];
 			await lazyLoadScript( {
@@ -45,7 +71,9 @@ window.onload = () => {
 		}
 	};
 
-	miniCartBlocks.forEach( ( miniCartBlock ) => {
+	document.body.addEventListener( 'wc-blocks_adding_to_cart', loadScripts );
+
+	miniCartBlocks.forEach( ( miniCartBlock, i ) => {
 		if ( ! ( miniCartBlock instanceof HTMLElement ) ) {
 			return;
 		}
@@ -63,17 +91,37 @@ window.onload = () => {
 		}
 
 		const showContents = () => {
+			document.body.removeEventListener(
+				'wc-blocks_added_to_cart',
+				// eslint-disable-next-line @typescript-eslint/no-use-before-define
+				showContentsAndUpdate
+			);
 			miniCartBlock.dataset.isPlaceholderOpen = 'true';
 			miniCartDrawerPlaceholderOverlay.classList.add(
 				'wc-block-components-drawer__screen-overlay--with-slide-in'
 			);
 			miniCartDrawerPlaceholderOverlay.classList.remove(
 				'wc-block-components-drawer__screen-overlay--is-hidden'
 			);
+			removeJQueryAddedToCartEvent();
+		};
+
+		const showContentsAndUpdate = () => {
+			miniCartBlock.dataset.isDataOutdated = 'true';
+			showContents();
 		};
 
 		miniCartButton.addEventListener( 'mouseover', loadScripts );
 		miniCartButton.addEventListener( 'focus', loadScripts );
 		miniCartButton.addEventListener( 'click', showContents );
+
+		// There might be more than one Mini Cart block in the page. Make sure
+		// only one opens when adding a product to the cart.
+		if ( i === 0 ) {
+			document.body.addEventListener(
+				'wc-blocks_added_to_cart',
+				showContentsAndUpdate
+			);
+		}
 	} );
 };

assets/js/blocks/cart-checkout/mini-cart/style.scss

@@ -1,3 +1,8 @@
 .modal-open .wc-block-mini-cart__button {
 	pointer-events: none;
 }
+
+// Reset font size so it doesn't depend on drawer's ancestors.
+.wc-block-mini-cart__drawer {
+	font-size: 1rem;
+}

assets/js/blocks/cart-checkout/mini-cart/with-mini-cart-conditional-hydration.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import {
+	withStoreCartApiHydration,
+	withRestApiHydration,
+} from '@woocommerce/block-hocs';
+
+interface MiniCartBlockInterface {
+	// Signals whether the cart data is outdated. That happens when
+	// opening the mini cart after adding a product to the cart.
+	isDataOutdated?: boolean;
+	// Signals that the HTML placeholder drawer has been opened. Needed
+	// to know whether we have to skip the slide in animation.
+	isPlaceholderOpen?: boolean;
+}
+
+// Custom HOC to conditionally hydrate API data depending on the isDataOutdated
+// prop.
+export default (
+	OriginalComponent: ( component: MiniCartBlockInterface ) => JSX.Element
+) => {
+	return ( {
+		isDataOutdated,
+		...props
+	}: MiniCartBlockInterface ): JSX.Element => {
+		const Component = isDataOutdated
+			? OriginalComponent
+			: withStoreCartApiHydration(
+					withRestApiHydration( OriginalComponent )
+			  );
+		return <Component { ...props } />;
+	};
+};