Add useStoreCartApiHydration HOC (https://github.com/woocommerce/woocommerce-blocks/pull/1845)

* Add useStoreCartApiHydration hoc

* comment

* indenting

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/frontend.js

@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
+import {
+	withRestApiHydration,
+	withStoreCartApiHydration,
+} from '@woocommerce/block-hocs';
 import { useStoreCart } from '@woocommerce/base-hooks';
 import { RawHTML } from '@wordpress/element';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
@@ -59,6 +62,6 @@ const getProps = ( el ) => ( {
 
 renderFrontend(
 	'.wp-block-woocommerce-cart',
-	withRestApiHydration( CartFrontend ),
+	withStoreCartApiHydration( withRestApiHydration( CartFrontend ) ),
 	getProps
 );

plugins/woocommerce-blocks/assets/js/hocs/index.js

@@ -7,3 +7,4 @@ export { default as withProductVariations } from './with-product-variations';
 export { default as withSearchedProducts } from './with-searched-products';
 export { default as withTransformSingleSelectToMultipleSelect } from './with-transform-single-select-to-multiple-select';
 export { default as withRestApiHydration } from './with-rest-api-hydration';
+export { default as withStoreCartApiHydration } from './with-store-cart-api-hydration';

plugins/woocommerce-blocks/assets/js/hocs/with-store-cart-api-hydration.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { getSetting } from '@woocommerce/settings';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Hydrate Cart API data.
+ *
+ * Makes cart data available without an API request to wc/store/cart/.
+ */
+const useStoreCartApiHydration = () => {
+	const cartData = useRef( getSetting( 'cartData' ) );
+
+	useSelect( ( select, registry ) => {
+		if ( ! cartData.current ) {
+			return;
+		}
+
+		const { isResolving, hasFinishedResolution } = select( CART_STORE_KEY );
+		const {
+			receiveCart,
+			startResolution,
+			finishResolution,
+		} = registry.dispatch( CART_STORE_KEY );
+
+		if (
+			! isResolving( 'getCartData', [] ) &&
+			! hasFinishedResolution( 'getCartData', [] )
+		) {
+			startResolution( 'getCartData', [] );
+			receiveCart( cartData.current );
+			finishResolution( 'getCartData', [] );
+		}
+	}, [] );
+};
+
+/**
+ * HOC that calls the useStoreCartApiHydration hook.
+ *
+ * @param {Function} OriginalComponent Component being wrapped.
+ */
+const withStoreCartApiHydration = ( OriginalComponent ) => {
+	return ( props ) => {
+		useStoreCartApiHydration();
+		return <OriginalComponent { ...props } />;
+	};
+};
+
+export default withStoreCartApiHydration;

plugins/woocommerce-blocks/src/BlockTypes/Cart.php

@@ -61,6 +61,9 @@ class Cart extends AbstractBlock {
 		if ( ! $data_registry->exists( 'defaultAddressFields' ) ) {
 			$data_registry->add( 'defaultAddressFields', WC()->countries->get_default_address_fields() );
 		}
+		if ( ! $data_registry->exists( 'cartData' ) ) {
+			$data_registry->add( 'cartData', WC()->api->get_endpoint_data( '/wc/store/cart' ) );
+		}
 		\Automattic\WooCommerce\Blocks\Assets::register_block_script(
 			$this->block_name . '-frontend',
 			$this->block_name . '-block-frontend'