From cc476e6b483c2a4d6281e4248e3b05b4481fceaa Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Thu, 4 Aug 2022 15:40:48 +0200
Subject: [PATCH 01/14] Add hydration experiment to summary coupon, not working
 due to PHP error at pre-commit

---
 .../cart-order-summary-coupon-form/block.tsx  |  6 +++++
 .../cart/inner-blocks/register-components.ts  | 26 ++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 7983eae49..10d5f0b53 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -5,10 +5,13 @@ import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { useState } from '@wordpress/element';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
 
+	const [ count, setCount ] = useState( 0 );
+
 	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
 
 	if ( ! couponsEnabled ) {
@@ -21,6 +24,9 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 				onSubmit={ applyCoupon }
 				isLoading={ isApplyingCoupon }
 			/>
+			<button
+				onClick={ () => setCount( count + 1 ) }
+			>{ `Counter update: ${ count }` }</button>
 		</TotalsWrapper>
 	);
 };
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index bf4ac082f..3cea36833 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -9,6 +9,8 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
+import { registerBlockType } from '../../../base/utils/bhe-frontend';
+import CouponBlock from '../../cart/inner-blocks/cart-order-summary-coupon-form/frontend';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -157,16 +159,20 @@ registerCheckoutBlock( {
 	),
 } );
 
-registerCheckoutBlock( {
-	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
-	component: lazy(
-		() =>
-			import(
-				/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
-				'./cart-order-summary-coupon-form/frontend'
-			)
-	),
-} );
+registerBlockType(
+	'woocommerce/cart-order-summary-coupon-form-block',
+	CouponBlock
+);
+// registerCheckoutBlock( {
+// 	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
+// component: lazy(
+// 	() =>
+// 		import(
+// 			/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
+// 			'./cart-order-summary-coupon-form/frontend'
+// 		)
+// ),
+// } );
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,

From 9c0f8a1af8aeab7c25f3e2e18f52a1a449679250 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 5 Aug 2022 10:57:39 +0200
Subject: [PATCH 02/14] Add php block loader

---
 src/BlockTypesController.php | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index 79c0fe272..dab774d21 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -104,6 +104,10 @@ public function add_data_attributes( $content, $block ) {
 			return $content;
 		}
 
+		if ( 'woocommerce/cart-order-summary-coupon-form-block' === $block_name ) {
+			return $content;
+		}
+
 		$attributes              = (array) $block['attrs'];
 		$exclude_attributes      = [ 'className', 'align' ];
 		$escaped_data_attributes = [
@@ -143,6 +147,7 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			$block['blockName'],
 			array(
 				'woocommerce/all-products',
+				'woocommerce/cart-order-summary-coupon-form-block',
 			),
 			true
 		) ) {

From 6d504d44cd36a1fd3825e378fda4355e717e99e1 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 5 Aug 2022 11:16:27 +0200
Subject: [PATCH 03/14] Fix notices if blockType is null

---
 src/BlockTypesController.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index dab774d21..196ec51c1 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -155,7 +155,7 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 		}
 
 		$block_type       = $instance->block_type;
-		$attr_definitions = $block_type->attributes;
+		$attr_definitions = isset( $block_type ) ? $block_type->attributes : [];
 
 		$attributes         = array();
 		$sourced_attributes = array();
@@ -193,8 +193,8 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			'data-wp-block-props="%6$s" ' .
 			'data-wp-block-hydration="idle">',
 			esc_attr( $block['blockName'] ),
-			esc_attr( wp_json_encode( $block_type->uses_context ) ),
-			esc_attr( wp_json_encode( $block_type->provides_context ) ),
+			esc_attr( wp_json_encode( isset( $block_type ) ? $block_type->uses_context : [] ) ),
+			esc_attr( wp_json_encode( isset( $block_type ) ? $block_type->provides_context : [] ) ),
 			esc_attr( wp_json_encode( $attributes ) ),
 			esc_attr( wp_json_encode( $sourced_attributes ) ),
 			esc_attr( wp_json_encode( $block_supports_attributes ) )

From 0186e3283efe91f89b175645a9a12cb73d3cbac2 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 5 Aug 2022 12:49:14 +0200
Subject: [PATCH 04/14] Added explanatory comments

---
 .../cart/inner-blocks/cart-order-summary-coupon-form/block.tsx  | 2 ++
 assets/js/blocks/cart/inner-blocks/register-components.ts       | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 10d5f0b53..0be98ffe4 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -10,6 +10,7 @@ import { useState } from '@wordpress/element';
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
 
+	/* Added a temporary setState to easily check hydration */
 	const [ count, setCount ] = useState( 0 );
 
 	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
@@ -24,6 +25,7 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 				onSubmit={ applyCoupon }
 				isLoading={ isApplyingCoupon }
 			/>
+			{ /* Added a temporary button to easily check hydration */ }
 			<button
 				onClick={ () => setCount( count + 1 ) }
 			>{ `Counter update: ${ count }` }</button>
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index 3cea36833..ebc54cc10 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -159,10 +159,12 @@ registerCheckoutBlock( {
 	),
 } );
 
+// Hide registering the block the default way, using instead bhe-frontend.
 registerBlockType(
 	'woocommerce/cart-order-summary-coupon-form-block',
 	CouponBlock
 );
+
 // registerCheckoutBlock( {
 // 	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
 // component: lazy(

From 1e0dba798d8c7af32592097c57bc275954105a0c Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 9 Aug 2022 11:49:48 +0200
Subject: [PATCH 05/14] Fix duplication elements on block parsing

---
 assets/js/atomic/utils/render-parent-block.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
index bb6b2ecdf..72582e9bd 100644
--- a/assets/js/atomic/utils/render-parent-block.tsx
+++ b/assets/js/atomic/utils/render-parent-block.tsx
@@ -142,6 +142,18 @@ const renderInnerBlocks = ( {
 		return null;
 	}
 	return Array.from( children ).map( ( node: Node, index: number ) => {
+		/**
+		 * Do not process the node if its a `<wp-block>` element.
+		 */
+		if (
+			node instanceof HTMLElement &&
+			node instanceof window.customElements.get( 'wp-block' )
+		) {
+			const reactElement = parse( node.outerHTML );
+
+			if ( isValidElement( reactElement ) )
+				return cloneElement( reactElement );
+		}
 		/**
 		 * This will grab the blockName from the data- attributes stored in block markup. Without a blockName, we cannot
 		 * convert the HTMLElement to a React component.

From 1d422eff955be2569cf3f56637f711a95c494b7b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Wed, 10 Aug 2022 13:30:33 +0200
Subject: [PATCH 06/14] Server register inner coupon block

---
 .../cart-order-summary-heading/block.tsx          |  5 +++++
 src/BlockTypesController.php                      | 15 +++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
index 015c29f8f..96a7a43b5 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
@@ -3,6 +3,7 @@
  */
 import Title from '@woocommerce/base-components/title';
 import classnames from 'classnames';
+import { useState } from '@wordpress/element';
 
 const Block = ( {
 	className,
@@ -11,12 +12,16 @@ const Block = ( {
 	className: string;
 	content: string;
 } ): JSX.Element => {
+	const [ count, setCount ] = useState( 0 );
 	return (
 		<Title
 			headingLevel="2"
 			className={ classnames( className, 'wc-block-cart__totals-title' ) }
 		>
 			{ content }
+			<button
+				onClick={ () => setCount( count + 1 ) }
+			>{ `Counter: ${ count }` }</button>
 		</Title>
 	);
 };
diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index 196ec51c1..b60483004 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -8,6 +8,7 @@
 use Automattic\WooCommerce\Blocks\Integrations\IntegrationRegistry;
 use Automattic\WooCommerce\Blocks\BlockTypes\Cart;
 use Automattic\WooCommerce\Blocks\BlockTypes\Checkout;
+use Automattic\WooCommerce\StoreApi\Utilities\NoticeHandler;
 
 /**
  * BlockTypesController class.
@@ -154,8 +155,12 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			return $block_content;
 		}
 
-		$block_type       = $instance->block_type;
-		$attr_definitions = isset( $block_type ) ? $block_type->attributes : [];
+		$block_type = $instance->block_type;
+		if ( ! $block_type ) {
+			// We might use a better way to flag it here.
+			wc_add_notice( 'You need to make a server registration of ' . $block['blockName'], 'error' );
+		}
+		$attr_definitions = $block_type->attributes;
 
 		$attributes         = array();
 		$sourced_attributes = array();
@@ -193,8 +198,8 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			'data-wp-block-props="%6$s" ' .
 			'data-wp-block-hydration="idle">',
 			esc_attr( $block['blockName'] ),
-			esc_attr( wp_json_encode( isset( $block_type ) ? $block_type->uses_context : [] ) ),
-			esc_attr( wp_json_encode( isset( $block_type ) ? $block_type->provides_context : [] ) ),
+			esc_attr( wp_json_encode( $block_type->uses_context ) ),
+			esc_attr( wp_json_encode( $block_type->provides_context ) ),
 			esc_attr( wp_json_encode( $attributes ) ),
 			esc_attr( wp_json_encode( $sourced_attributes ) ),
 			esc_attr( wp_json_encode( $block_supports_attributes ) )
@@ -301,6 +306,7 @@ protected function get_block_types() {
 				[
 					'AllProducts',
 					'Cart',
+					'CartOrderSummaryCouponFormBlock',
 					'Checkout',
 				]
 			);
@@ -315,6 +321,7 @@ protected function get_block_types() {
 				[
 					'AllProducts',
 					'Cart',
+					'CartOrderSummaryCouponFormBlock',
 					'Checkout',
 				]
 			);

From d48d81aa638db7cc9fcb5d390d41be4f3cefa6a9 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 12 Aug 2022 15:21:47 +0200
Subject: [PATCH 07/14] Code cleaning

---
 assets/js/atomic/utils/render-parent-block.tsx           | 2 --
 .../cart-order-summary-coupon-form/block.tsx             | 8 --------
 .../inner-blocks/cart-order-summary-heading/block.tsx    | 5 -----
 src/BlockTypesController.php                             | 9 +--------
 4 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
index 72582e9bd..e1739e1a5 100644
--- a/assets/js/atomic/utils/render-parent-block.tsx
+++ b/assets/js/atomic/utils/render-parent-block.tsx
@@ -163,7 +163,6 @@ const renderInnerBlocks = ( {
 			...( node instanceof HTMLElement ? node.dataset : {} ),
 			className: node instanceof Element ? node?.className : '',
 		};
-
 		const InnerBlockComponent = getBlockComponentFromMap(
 			blockName,
 			blockMap
@@ -181,7 +180,6 @@ const renderInnerBlocks = ( {
 					node?.textContent ||
 					''
 			);
-
 			// Returns text nodes without manipulation.
 			if ( typeof parsedElement === 'string' && !! parsedElement ) {
 				return parsedElement;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 0be98ffe4..7983eae49 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -5,14 +5,10 @@ import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { TotalsWrapper } from '@woocommerce/blocks-checkout';
-import { useState } from '@wordpress/element';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
 
-	/* Added a temporary setState to easily check hydration */
-	const [ count, setCount ] = useState( 0 );
-
 	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
 
 	if ( ! couponsEnabled ) {
@@ -25,10 +21,6 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 				onSubmit={ applyCoupon }
 				isLoading={ isApplyingCoupon }
 			/>
-			{ /* Added a temporary button to easily check hydration */ }
-			<button
-				onClick={ () => setCount( count + 1 ) }
-			>{ `Counter update: ${ count }` }</button>
 		</TotalsWrapper>
 	);
 };
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
index 96a7a43b5..015c29f8f 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
@@ -3,7 +3,6 @@
  */
 import Title from '@woocommerce/base-components/title';
 import classnames from 'classnames';
-import { useState } from '@wordpress/element';
 
 const Block = ( {
 	className,
@@ -12,16 +11,12 @@ const Block = ( {
 	className: string;
 	content: string;
 } ): JSX.Element => {
-	const [ count, setCount ] = useState( 0 );
 	return (
 		<Title
 			headingLevel="2"
 			className={ classnames( className, 'wc-block-cart__totals-title' ) }
 		>
 			{ content }
-			<button
-				onClick={ () => setCount( count + 1 ) }
-			>{ `Counter: ${ count }` }</button>
 		</Title>
 	);
 };
diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index b60483004..dab774d21 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -8,7 +8,6 @@
 use Automattic\WooCommerce\Blocks\Integrations\IntegrationRegistry;
 use Automattic\WooCommerce\Blocks\BlockTypes\Cart;
 use Automattic\WooCommerce\Blocks\BlockTypes\Checkout;
-use Automattic\WooCommerce\StoreApi\Utilities\NoticeHandler;
 
 /**
  * BlockTypesController class.
@@ -155,11 +154,7 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			return $block_content;
 		}
 
-		$block_type = $instance->block_type;
-		if ( ! $block_type ) {
-			// We might use a better way to flag it here.
-			wc_add_notice( 'You need to make a server registration of ' . $block['blockName'], 'error' );
-		}
+		$block_type       = $instance->block_type;
 		$attr_definitions = $block_type->attributes;
 
 		$attributes         = array();
@@ -306,7 +301,6 @@ protected function get_block_types() {
 				[
 					'AllProducts',
 					'Cart',
-					'CartOrderSummaryCouponFormBlock',
 					'Checkout',
 				]
 			);
@@ -321,7 +315,6 @@ protected function get_block_types() {
 				[
 					'AllProducts',
 					'Cart',
-					'CartOrderSummaryCouponFormBlock',
 					'Checkout',
 				]
 			);

From 29df37cb76f985015d2b777e73725522f3789728 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 12 Aug 2022 16:01:48 +0200
Subject: [PATCH 08/14] Some more small refactors

---
 src/BlockTypesController.php | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index dab774d21..b7dbead04 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -100,11 +100,14 @@ public function add_data_attributes( $content, $block ) {
 			return $content;
 		}
 
-		if ( 'woocommerce/all-products' === $block_name ) {
-			return $content;
-		}
-
-		if ( 'woocommerce/cart-order-summary-coupon-form-block' === $block_name ) {
+		if ( in_array(
+			$block_name,
+			array(
+				'woocommerce/all-products',
+				'woocommerce/cart-order-summary-coupon-form-block',
+			),
+			true
+		) ) {
 			return $content;
 		}
 

From 895c21a3dec1f55241f73412e3429e9b340a66cc Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 16 Aug 2022 13:43:15 +0200
Subject: [PATCH 09/14] Update with frontend bhe registration

---
 assets/js/base/utils/bhe-blocks.tsx           | 35 +++++++++++++++++++
 .../cart-order-summary-coupon-form/edit.tsx   |  4 ---
 .../frontend.tsx                              |  1 +
 .../cart-order-summary-coupon-form/index.tsx  | 32 ++++++++---------
 4 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 assets/js/base/utils/bhe-blocks.tsx

diff --git a/assets/js/base/utils/bhe-blocks.tsx b/assets/js/base/utils/bhe-blocks.tsx
new file mode 100644
index 000000000..50c00b57a
--- /dev/null
+++ b/assets/js/base/utils/bhe-blocks.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { registerBlockType as gutenbergRegisterBlockType } from '@wordpress/blocks';
+import { Fragment } from '@wordpress/element';
+
+const save =
+	( name, Comp ) =>
+	( { attributes } ) => {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save();
+
+		return (
+			<Fragment>
+				<Comp blockProps={ blockProps } attributes={ attributes }>
+					<gutenberg-inner-blocks { ...innerBlocksProps } />
+				</Comp>
+				{ /* Render InnerBlocks inside a template, to avoid losing them
+            if Comp doesn't render them. */ }
+				<template
+					className="gutenberg-inner-blocks"
+					{ ...innerBlocksProps }
+				/>
+			</Fragment>
+		);
+	};
+
+export const registerBlockType = ( name, { frontend, edit, ...rest } ) => {
+	gutenbergRegisterBlockType( name, {
+		edit,
+		save: save( name, frontend ),
+		...rest,
+	} );
+};
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
index 9a85bfb01..a5575bcf9 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
@@ -27,7 +27,3 @@ export const Edit = ( {
 		</div>
 	);
 };
-
-export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() } />;
-};
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
index 4fc9ad289..32906bb7a 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+
 import Block from './block';
 
 export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
index 1f926b2ac..963e94c7f 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
@@ -2,25 +2,23 @@
  * External dependencies
  */
 import { Icon, tag } from '@wordpress/icons';
-import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+import { registerBlockType } from 'assets/js/base/utils/bhe-blocks';
 
 /**
  * Internal dependencies
  */
-import { Edit, Save } from './edit';
+import { Edit } from './edit';
+import Frontend from './block';
 
-registerFeaturePluginBlockType(
-	'woocommerce/cart-order-summary-coupon-form-block',
-	{
-		icon: {
-			src: (
-				<Icon
-					icon={ tag }
-					className="wc-block-editor-components-block-icon"
-				/>
-			),
-		},
-		edit: Edit,
-		save: Save,
-	}
-);
+registerBlockType( 'woocommerce/cart-order-summary-coupon-form', {
+	frontend: Frontend,
+	edit: Edit,
+	icon: {
+		src: (
+			<Icon
+				icon={ tag }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+} );

From d8bad910343db8770f6750dd5d855e2753363aa3 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 16 Aug 2022 16:02:54 +0200
Subject: [PATCH 10/14] Remove not needed save js

---
 .../cart-order-summary-coupon-form/block.tsx  | 28 -------------------
 .../frontend.tsx                              | 25 +++++++++++++++--
 2 files changed, 23 insertions(+), 30 deletions(-)
 delete mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
deleted file mode 100644
index 7983eae49..000000000
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
-import { getSetting } from '@woocommerce/settings';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
-
-const Block = ( { className }: { className: string } ): JSX.Element | null => {
-	const couponsEnabled = getSetting( 'couponsEnabled', true );
-
-	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
-
-	if ( ! couponsEnabled ) {
-		return null;
-	}
-
-	return (
-		<TotalsWrapper className={ className }>
-			<TotalsCoupon
-				onSubmit={ applyCoupon }
-				isLoading={ isApplyingCoupon }
-			/>
-		</TotalsWrapper>
-	);
-};
-
-export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
index 32906bb7a..7983eae49 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
@@ -1,7 +1,28 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
+import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
-import Block from './block';
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const couponsEnabled = getSetting( 'couponsEnabled', true );
+
+	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
+
+	if ( ! couponsEnabled ) {
+		return null;
+	}
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
+	);
+};
 
 export default Block;

From 2ff2a200ec313dfb5f3200399b2d92161f1b28b3 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Tue, 16 Aug 2022 17:16:33 +0200
Subject: [PATCH 11/14] Fix bad registration

---
 assets/js/base/utils/bhe-blocks.tsx                         | 2 +-
 .../inner-blocks/cart-order-summary-coupon-form/edit.tsx    | 2 +-
 .../inner-blocks/cart-order-summary-coupon-form/index.tsx   | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/js/base/utils/bhe-blocks.tsx b/assets/js/base/utils/bhe-blocks.tsx
index 50c00b57a..b72dbef96 100644
--- a/assets/js/base/utils/bhe-blocks.tsx
+++ b/assets/js/base/utils/bhe-blocks.tsx
@@ -26,7 +26,7 @@ const save =
 		);
 	};
 
-export const registerBlockType = ( name, { frontend, edit, ...rest } ) => {
+export const registerBHEBlockType = ( name, { frontend, edit, ...rest } ) => {
 	gutenbergRegisterBlockType( name, {
 		edit,
 		save: save( name, frontend ),
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
index a5575bcf9..62f7032a7 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
@@ -7,7 +7,7 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
 /**
  * Internal dependencies
  */
-import Block from './block';
+import Block from './frontend';
 
 export const Edit = ( {
 	attributes,
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
index 963e94c7f..ca3eef933 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
@@ -2,15 +2,15 @@
  * External dependencies
  */
 import { Icon, tag } from '@wordpress/icons';
-import { registerBlockType } from 'assets/js/base/utils/bhe-blocks';
 
 /**
  * Internal dependencies
  */
 import { Edit } from './edit';
-import Frontend from './block';
+import Frontend from './frontend';
+import { registerBHEBlockType } from '../../../../base/utils/bhe-blocks';
 
-registerBlockType( 'woocommerce/cart-order-summary-coupon-form', {
+registerBHEBlockType( 'woocommerce/cart-order-summary-coupon-form-block', {
 	frontend: Frontend,
 	edit: Edit,
 	icon: {

From 4c6e63f6535e41707105608d082a8773d9972f1a Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Thu, 18 Aug 2022 13:45:51 +0200
Subject: [PATCH 12/14] Update bhe functions and fix cart error due to hooks

---
 assets/js/base/utils/bhe-blocks.tsx           |  38 ++-
 assets/js/base/utils/bhe-element.tsx          |  66 ++++-
 assets/js/base/utils/bhe-frontend.tsx         | 267 +++++++++++-------
 assets/js/base/utils/bhe-react-context.tsx    |  78 +++++
 assets/js/base/utils/utils.ts                 |  10 +
 .../frontend.tsx                              |  19 +-
 6 files changed, 339 insertions(+), 139 deletions(-)
 create mode 100644 assets/js/base/utils/bhe-react-context.tsx

diff --git a/assets/js/base/utils/bhe-blocks.tsx b/assets/js/base/utils/bhe-blocks.tsx
index b72dbef96..82551f62b 100644
--- a/assets/js/base/utils/bhe-blocks.tsx
+++ b/assets/js/base/utils/bhe-blocks.tsx
@@ -1,35 +1,31 @@
 /**
  * External dependencies
  */
+import { ReactElement } from 'react';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { registerBlockType as gutenbergRegisterBlockType } from '@wordpress/blocks';
-import { Fragment } from '@wordpress/element';
 
-const save =
-	( name, Comp ) =>
-	( { attributes } ) => {
-		const blockProps = useBlockProps.save();
-		const innerBlocksProps = useInnerBlocksProps.save();
-
-		return (
-			<Fragment>
-				<Comp blockProps={ blockProps } attributes={ attributes }>
-					<gutenberg-inner-blocks { ...innerBlocksProps } />
+const Wrapper =
+	( Comp: ReactElement ) =>
+	( { attributes } ) =>
+		(
+			<>
+				{ /* Block Context is not available during save
+				https://wordpress.slack.com/archives/C02QB2JS7/p1649347999484329 */ }
+				<Comp
+					blockProps={ useBlockProps.save() }
+					attributes={ attributes }
+					context={ {} }
+				>
+					<wp-inner-blocks { ...useInnerBlocksProps.save() } />
 				</Comp>
-				{ /* Render InnerBlocks inside a template, to avoid losing them
-            if Comp doesn't render them. */ }
-				<template
-					className="gutenberg-inner-blocks"
-					{ ...innerBlocksProps }
-				/>
-			</Fragment>
+			</>
 		);
-	};
 
-export const registerBHEBlockType = ( name, { frontend, edit, ...rest } ) => {
+export const registerBHEBlockType = ( name, { edit, view, ...rest } ) => {
 	gutenbergRegisterBlockType( name, {
 		edit,
-		save: save( name, frontend ),
+		save: Wrapper( view ),
 		...rest,
 	} );
 };
diff --git a/assets/js/base/utils/bhe-element.tsx b/assets/js/base/utils/bhe-element.tsx
index fa1397bbb..4554d52da 100644
--- a/assets/js/base/utils/bhe-element.tsx
+++ b/assets/js/base/utils/bhe-element.tsx
@@ -1,23 +1,59 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
 /**
  * External dependencies
  */
+import {
+	createContext,
+	useContext as useReactContext,
+	useEffect as useReactEffect,
+	useState as useReactState,
+} from '@wordpress/element';
 import { hydrate as ReactHydrate } from 'react-dom';
-import { ReactElement } from 'react';
 
-type HydrateOptions = {
-	technique?: 'media' | 'view' | 'idle';
-	media?: string;
+export const EnvContext = createContext( null );
+
+/**
+ * A React hook that returns the name of the environment.
+ *
+ * This is still a bit hacky. Ideally, Save components should support React
+ * hooks and all the environments (Edit, Save and Frontend) should populate a
+ * normal context. Also, more environments could be added in the future.
+ *
+ * @return A string with the environment the component is loaded, can be {"edit" | "save" | "frontend"}
+ */
+export const useBlockEnvironment = () => {
+	try {
+		const env = useReactContext( EnvContext );
+		if ( env === 'frontend' ) {
+			return 'frontend';
+		}
+		return 'edit';
+	} catch ( e ) {
+		return 'save';
+	}
 };
 
-export const hydrate = (
-	element: ReactElement,
-	container: Element,
-	hydrationOptions: HydrateOptions = {}
-) => {
-	const { technique, media } = hydrationOptions;
+const noop = () => null;
+
+export const useState = ( init ) =>
+	useBlockEnvironment() !== 'save' ? useReactState( init ) : [ init, noop ];
+
+export const useEffect = ( ...args ) =>
+	useBlockEnvironment() !== 'save' ? useReactEffect( ...args ) : noop;
+
+export const useContext = ( Context ) =>
+	useBlockEnvironment() !== 'save'
+		? useReactContext( Context )
+		: Context._currentValue;
+
+export const hydrate = ( element, container, hydrationOptions ) => {
+	const { technique, media } = hydrationOptions || {};
+
 	const cb = () => {
 		ReactHydrate( element, container );
 	};
+
 	switch ( technique ) {
 		case 'media':
 			if ( media ) {
@@ -29,8 +65,10 @@ export const hydrate = (
 				}
 			}
 			break;
+
 		// Hydrate the element when is visible in the viewport.
 		// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
 		case 'view':
 			try {
 				const io = new IntersectionObserver( ( entries ) => {
@@ -41,7 +79,7 @@ export const hydrate = (
 						// As soon as we hydrate, disconnect this IntersectionObserver.
 						io.disconnect();
 						cb();
-						break; // break loop on first match
+						break; // Break loop on first match.
 					}
 				} );
 				io.observe( container.children[ 0 ] );
@@ -49,15 +87,19 @@ export const hydrate = (
 				cb();
 			}
 			break;
+
 		case 'idle':
-			// Safari does not support requestIdleCalback, we use a timeout instead. https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+			// Safari does not support requestIdleCalback, we use a timeout instead.
+			// https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
 			if ( 'requestIdleCallback' in window ) {
 				window.requestIdleCallback( cb );
 			} else {
 				setTimeout( cb, 200 );
 			}
 			break;
+
 		// Hydrate this component immediately.
+
 		default:
 			cb();
 	}
diff --git a/assets/js/base/utils/bhe-frontend.tsx b/assets/js/base/utils/bhe-frontend.tsx
index 649d55a78..57161d228 100644
--- a/assets/js/base/utils/bhe-frontend.tsx
+++ b/assets/js/base/utils/bhe-frontend.tsx
@@ -7,8 +7,9 @@ import { unmountComponentAtNode } from 'react-dom';
 /**
  * Internal dependencies
  */
-import { matcherFromSource, pickKeys } from './utils';
-import { hydrate } from './bhe-element';
+import { Consumer, createProvider } from './bhe-react-context';
+import { createGlobal, matcherFromSource } from './utils';
+import { EnvContext, hydrate } from './bhe-element';
 
 declare global {
 	interface Window {
@@ -29,126 +30,188 @@ declare global {
 	}
 }
 
-// We assign `blockTypes` to window to make sure it's a global singleton.
-//
-// Have to do this because of the way we are currently bundling the code
-// in this repo, each block gets its own copy of this file.
-//
-// We COULD fix this by doing some webpack magic to spit out the code in
-// `gutenberg-packages` to a shared chunk but assigning `blockTypes` to window
-// is a cheap hack for now that will be fixed once we can merge this code into Gutenberg.
-if ( typeof window.blockTypes === 'undefined' ) {
-	window.blockTypes = new Map();
-}
+const blockTypes = createGlobal( 'wpBlockTypes', new Map() );
 
-export const registerBlockType = ( name: string, Comp: ReactElement ) => {
-	window.blockTypes.set( name, Comp );
+export const registerBlockType = (
+	name: string,
+	Component: ReactElement,
+	options
+) => {
+	blockTypes.set( name, { Component, options } );
 };
 
-const Children = ( { value, providedContext } ) => {
-	if ( ! value ) {
-		return null;
-	}
-	return (
-		<wp-inner-blocks
-			ref={ ( el ) => {
-				if ( el !== null ) {
-					// listen for the ping from the child
-					el.addEventListener( 'wp-block-context', ( event ) => {
-						// We have to also destructure `event.detail.context` because there can
-						// already exist a property in the context with the same name.
-						event.detail.context = {
-							...providedContext,
-							...event?.detail?.context,
-						};
-					} );
-				}
-			} }
-			suppressHydrationWarning={ true }
-			dangerouslySetInnerHTML={ { __html: value } }
-		/>
-	);
-};
+const Children = ( { value } ) => (
+	<wp-inner-blocks
+		suppressHydrationWarning={ true }
+		dangerouslySetInnerHTML={ { __html: value } }
+	/>
+);
 Children.shouldComponentUpdate = () => false;
 
+const Wrappers = ( { wrappers, children } ) => {
+	let result = children;
+	wrappers.forEach( ( wrapper ) => {
+		result = wrapper( { children: result } );
+	} );
+	return result;
+};
+
 class WpBlock extends HTMLElement {
 	connectedCallback() {
 		setTimeout( () => {
-			// ping the parent for the context
-			const event = new CustomEvent( 'wp-block-context', {
-				detail: {},
-				bubbles: true,
-				cancelable: true,
-			} );
-			this.dispatchEvent( event );
-
-			const usesContext = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-uses-block-context'
-				) as string
-			);
-			const providesContext = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-provides-block-context'
-				) as string
-			);
+			// Get the block attributes.
 			const attributes = JSON.parse(
-				this.getAttribute( 'data-wp-block-attributes' ) as string
+				this.getAttribute( 'data-wp-block-attributes' )
 			);
+
+			// Add the sourced attributes to the attributes object.
 			const sourcedAttributes = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-sourced-attributes'
-				) as string
+				this.getAttribute( 'data-wp-block-sourced-attributes' )
 			);
-
 			for ( const attr in sourcedAttributes ) {
 				attributes[ attr ] = matcherFromSource(
 					sourcedAttributes[ attr ]
 				)( this );
 			}
 
-			// pass the context to children if needed
-			const providedContext =
-				providesContext &&
-				pickKeys( attributes, Object.keys( providesContext ) );
-
-			// select only the parts of the context that the block declared in
-			// the `usesContext` of its block.json
-			const context = pickKeys( event.detail.context, usesContext );
-
-			const blockType = this.getAttribute( 'data-wp-block-type' );
-			const blockProps = {
-				className: this.children[ 0 ].className,
-				style: this.children[ 0 ].style,
-			};
-
-			const innerBlocks = this.querySelector( 'wp-inner-blocks' );
-			const Comp = window.blockTypes.get( blockType );
-			const technique = this.getAttribute( 'data-wp-block-hydrate' );
-			const media = this.getAttribute( 'data-wp-block-media' );
-			const hydrationOptions = { technique, media };
-			hydrate(
-				<>
-					<Comp
-						attributes={ attributes }
-						blockProps={ blockProps }
-						suppressHydrationWarning={ true }
-						context={ context }
-					>
-						<Children
-							value={ innerBlocks && innerBlocks.innerHTML }
+			// Get the Block Context from their parents.
+			const blockContext = {};
+			const usesBlockContext = JSON.parse(
+				this.getAttribute( 'data-wp-block-uses-block-context' )
+			);
+			if ( usesBlockContext ) {
+				const event = new CustomEvent( 'wp-block-context', {
+					detail: { context: {} },
+					bubbles: true,
+					cancelable: true,
+				} );
+				this.dispatchEvent( event );
+
+				// Select only the parts of the context that the block declared in the
+				// `usesContext` of its block.json.
+				usesBlockContext.forEach(
+					( key ) =>
+						( blockContext[ key ] = event.detail.context[ key ] )
+				);
+			}
+
+			// Share the Block Context with their children.
+			const providesBlockContext = JSON.parse(
+				this.getAttribute( 'data-wp-block-provides-block-context' )
+			);
+			if ( providesBlockContext ) {
+				this.addEventListener( 'wp-block-context', ( event ) => {
+					// Select only the parts of the context that the block declared in
+					// the `providesContext` of its block.json.
+					Object.entries( providesBlockContext ).forEach(
+						( [ key, attribute ] ) => {
+							if ( ! event.detail.context[ key ] ) {
+								event.detail.context[ key ] =
+									attributes[ attribute ];
+							}
+						}
+					);
+				} );
+			}
+
+			// Hydrate the interactive blocks.
+			const hydration = this.getAttribute( 'data-wp-block-hydration' );
+
+			if ( hydration ) {
+				const Providers = [];
+
+				// Get the block type, block props (class and style), inner blocks,
+				// frontend component and options.
+				const blockType = this.getAttribute( 'data-wp-block-type' );
+				const innerBlocks = this.querySelector( 'wp-inner-blocks' );
+				const { Component, options } = blockTypes.get( blockType );
+				const { class: className, style } = JSON.parse(
+					this.getAttribute( 'data-wp-block-props' )
+				);
+				// Temporary element to translate style strings to style objects.
+				const el = document.createElement( 'div' );
+				el.style.cssText = style;
+				const blockProps = { className, style: el.style };
+				el.remove();
+
+				// Get the React Context from their parents.
+				options?.usesContext?.forEach( ( context ) => {
+					const event = new CustomEvent( 'wp-react-context', {
+						detail: { context },
+						bubbles: true,
+						cancelable: true,
+					} );
+					this.dispatchEvent( event );
+					if ( typeof event.detail.Provider === 'function' ) {
+						Providers.push( event.detail.Provider );
+					}
+				} );
+
+				// Share the React Context with their children.
+				if ( options?.providesContext?.length > 0 ) {
+					this.addEventListener( 'wp-react-context', ( event ) => {
+						for ( const context of options.providesContext ) {
+							// We compare the provided context with the received context.
+							if ( event.detail.context === context ) {
+								// If there's a match, we stop propagation.
+								event.stopPropagation();
+
+								// We return a Provider that is subscribed to the parent Provider.
+								event.detail.Provider = createProvider( {
+									element: this,
+									context,
+								} );
+
+								// We can stop the iteration.
+								break;
+							}
+						}
+					} );
+				}
+
+				const media = this.getAttribute(
+					'data-wp-block-hydration-media'
+				);
+
+				hydrate(
+					<EnvContext.Provider value="frontend">
+						{ /* Wrap the component with all the React Providers */ }
+						<Wrappers wrappers={ Providers }>
+							<Component
+								attributes={ attributes }
+								blockProps={ blockProps }
+								context={ blockContext }
+							>
+								{ /* Update the value each time one of the React Contexts changes */ }
+								{ options?.providesContext?.map(
+									( context, index ) => (
+										<Consumer
+											key={ index }
+											element={ this }
+											context={ context }
+										/>
+									)
+								) }
+
+								{ /* Render the inner blocks */ }
+								{ innerBlocks && (
+									<Children
+										value={ innerBlocks.innerHTML }
+										suppressHydrationWarning={ true }
+									/>
+								) }
+							</Component>
+						</Wrappers>
+
+						<template
+							className="wp-inner-blocks"
 							suppressHydrationWarning={ true }
-							providedContext={ providedContext }
 						/>
-					</Comp>
-					<template
-						className="wp-inner-blocks"
-						suppressHydrationWarning={ true }
-					/>
-				</>,
-				this,
-				hydrationOptions
-			);
+					</EnvContext.Provider>,
+					this,
+					{ technique: hydration, media }
+				);
+			}
 		} );
 	}
 
diff --git a/assets/js/base/utils/bhe-react-context.tsx b/assets/js/base/utils/bhe-react-context.tsx
new file mode 100644
index 000000000..cc19e0917
--- /dev/null
+++ b/assets/js/base/utils/bhe-react-context.tsx
@@ -0,0 +1,78 @@
+/**
+ * Internal dependencies
+ */
+import { createGlobal } from './utils';
+import { useEffect, useState } from './bhe-element';
+
+const subscribers = createGlobal( 'reactContextSubscribers', new WeakMap() );
+const values = createGlobal( 'reactContextValues', new WeakMap() );
+
+const updateValue = ( { element, context, value } ) => {
+	if ( ! values.has( element ) ) {
+		values.set( element, new WeakMap() );
+	}
+	values.get( element ).set( context, value );
+};
+
+const getValue = ( { element, context } ) => {
+	if ( values.has( element ) ) {
+		return values.get( element ).get( context );
+	}
+};
+
+const subscribe = ( { element, context, callback } ) => {
+	if ( ! subscribers.has( element ) ) {
+		subscribers.set( element, new WeakMap() );
+	}
+	if ( ! subscribers.get( element ).has( context ) ) {
+		subscribers.get( element ).set( context, new Set() );
+	}
+	subscribers.get( element ).get( context ).add( callback );
+};
+
+const unsubscribe = ( { element, context, callback } ) => {
+	subscribers.get( element ).get( context ).delete( callback );
+};
+
+const updateProvider = ( { element, context, value } ) => {
+	updateValue( { element, context, value } );
+
+	if (
+		subscribers.has( element ) &&
+		subscribers.get( element ).has( context )
+	) {
+		// This setTimeout prevents a React warning about calling setState inside a
+		// render() function, which is misleading because the render() function
+		// belongs to a different React application. It may not happen in React 18.
+		setTimeout( () => {
+			subscribers
+				.get( element )
+				.get( context )
+				.forEach( ( callback ) => callback( value ) );
+		} );
+	}
+};
+
+export const createProvider =
+	( { element, context } ) =>
+	( { children } ) => {
+		const [ value, setValue ] = useState(
+			getValue( { element, context } )
+		);
+
+		useEffect( () => {
+			subscribe( { element, context, callback: setValue } );
+			return () =>
+				unsubscribe( { element, context, callback: setValue } );
+		}, [] );
+
+		return (
+			<context.Provider value={ value }>{ children }</context.Provider>
+		);
+	};
+
+export const Consumer = ( { element, context } ) => (
+	<context.Consumer>
+		{ ( value ) => updateProvider( { element, context, value } ) }
+	</context.Consumer>
+);
diff --git a/assets/js/base/utils/utils.ts b/assets/js/base/utils/utils.ts
index c89a81b41..36c8e601f 100644
--- a/assets/js/base/utils/utils.ts
+++ b/assets/js/base/utils/utils.ts
@@ -31,3 +31,13 @@ export const matcherFromSource = ( sourceConfig ) => {
 			return text( sourceConfig.selector );
 	}
 };
+
+// We have to do this because of the way we are currently bundling the code in
+// this repo, each block gets its own copy of this file, but this won't happen
+// if/when we do this in Gutenberg.
+export const createGlobal = ( name, initialValue ) => {
+	if ( typeof window[ name ] === 'undefined' ) {
+		window[ name ] = initialValue;
+	}
+	return window[ name ];
+};
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
index 7983eae49..17b02edc5 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
@@ -2,15 +2,26 @@
  * External dependencies
  */
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEnvironment } from '../../../../base/utils/bhe-element';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
-
-	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons( 'wc/cart' );
-
+	const environment = useBlockEnvironment();
+	const { applyCoupon, isApplyingCoupon } =
+		environment === 'frontend'
+			? // eslint-disable-next-line
+			  useStoreCartCoupons( 'wc/cart' )
+			: {
+					applyCoupon: () => null,
+					isApplyingCoupon: false,
+			  };
 	if ( ! couponsEnabled ) {
 		return null;
 	}

From 52f9c6b75ebb9c82a61ee5a0922f6c2ea14f8cac Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Thu, 18 Aug 2022 13:55:24 +0200
Subject: [PATCH 13/14] Remove not needed rename

---
 assets/js/base/utils/bhe-blocks.tsx                           | 2 +-
 .../inner-blocks/cart-order-summary-coupon-form/index.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/js/base/utils/bhe-blocks.tsx b/assets/js/base/utils/bhe-blocks.tsx
index 82551f62b..bfe6feaba 100644
--- a/assets/js/base/utils/bhe-blocks.tsx
+++ b/assets/js/base/utils/bhe-blocks.tsx
@@ -22,7 +22,7 @@ const Wrapper =
 			</>
 		);
 
-export const registerBHEBlockType = ( name, { edit, view, ...rest } ) => {
+export const registerBlockType = ( name, { edit, view, ...rest } ) => {
 	gutenbergRegisterBlockType( name, {
 		edit,
 		save: Wrapper( view ),
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
index ca3eef933..00028c292 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
@@ -8,9 +8,9 @@ import { Icon, tag } from '@wordpress/icons';
  */
 import { Edit } from './edit';
 import Frontend from './frontend';
-import { registerBHEBlockType } from '../../../../base/utils/bhe-blocks';
+import { registerBlockType } from '../../../../base/utils/bhe-blocks';
 
-registerBHEBlockType( 'woocommerce/cart-order-summary-coupon-form-block', {
+registerBlockType( 'woocommerce/cart-order-summary-coupon-form-block', {
 	frontend: Frontend,
 	edit: Edit,
 	icon: {

From d4754796aeabf32a6c3f5572e220ac8ce8e37cf9 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 25 Aug 2022 17:08:12 +0200
Subject: [PATCH 14/14] Fix TypeError when WpBlock class is not present

---
 assets/js/atomic/utils/render-parent-block.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
index e1739e1a5..155bbba7d 100644
--- a/assets/js/atomic/utils/render-parent-block.tsx
+++ b/assets/js/atomic/utils/render-parent-block.tsx
@@ -145,9 +145,11 @@ const renderInnerBlocks = ( {
 		/**
 		 * Do not process the node if its a `<wp-block>` element.
 		 */
+		const WpBlock = window.customElements.get( 'wp-block' );
 		if (
+			WpBlock &&
 			node instanceof HTMLElement &&
-			node instanceof window.customElements.get( 'wp-block' )
+			node instanceof WpBlock
 		) {
 			const reactElement = parse( node.outerHTML );