Move feedback prompt to a HOC

assets/js/blocks/cart-checkout/cart/block.js

@@ -2,30 +2,17 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { BlockControls } from '@wordpress/block-editor';
 import { Toolbar } from '@wordpress/components';
 import { Fragment, useState } from '@wordpress/element';
 import TextToolbarButton from '@woocommerce/block-components/text-toolbar-button';
+import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
  */
 import FullCart from './components/full-cart';
 import EmptyCart from './components/empty-cart';
-import FeedbackPrompt from '../feedback-prompt';
-
-const getInspectorControls = () => {
-	return (
-		<InspectorControls>
-			<FeedbackPrompt
-				text={ __(
-					'We are currently working on improving our cart and providing merchants with tools and options to customize their cart to their stores needs.',
-					'woo-gutenberg-products-block'
-				) }
-			/>
-		</InspectorControls>
-	);
-};
 
 /**
  * Component to handle edit mode of "Cart Block".
@@ -63,12 +50,11 @@ const Cart = () => {
 	return (
 		<Fragment>
 			{ getBlockControls() }
-			{ getInspectorControls() }
 			{ cart }
 		</Fragment>
 	);
 };
 
 Cart.propTypes = {};
 
-export default Cart;
+export default withFeedbackPrompt( Cart );

assets/js/blocks/cart-checkout/cart/index.js

@@ -8,7 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import Block from './block';
+import Edit from './block';
 import { example } from './example';
 
 /**
@@ -30,12 +30,16 @@ registerBlockType( 'woocommerce/cart', {
 	example,
 	attributes: {},
 
-	/**
-	 * Renders and manages the block.
-	 */
-	edit( props ) {
-		return <Block { ...props } />;
-	},
+	edit: ( props ) => (
+		<Edit
+			{ ...props }
+			feedbackPromptText={ __(
+				'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
+				'woo-gutenberg-products-block'
+			) }
+			showFeedbackPrompt={ true }
+		/>
+	),
 
 	/**
 	 * Block content is rendered in PHP, not via save function.

assets/js/blocks/cart-checkout/checkout/edit.js

@@ -1,45 +1,25 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FeedbackPrompt from '../feedback-prompt';
+import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
  */
 import Block from './block.js';
 import './editor.scss';
 
-const getInspectorControls = () => {
-	return (
-		<InspectorControls>
-			<FeedbackPrompt
-				text={ __(
-					'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
-					'woo-gutenberg-products-block'
-				) }
-			/>
-		</InspectorControls>
-	);
-};
-
 const Edit = ( { attributes } ) => {
 	const { className } = attributes;
 
 	return (
 		<div className={ className }>
-			{ getInspectorControls() }
 			<Disabled>
 				<Block attributes={ attributes } />
 			</Disabled>
 		</div>
 	);
 };
 
-export default Edit;
+export default withFeedbackPrompt( Edit );

assets/js/blocks/cart-checkout/checkout/index.js

@@ -7,7 +7,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import edit from './edit';
+import Edit from './edit';
 import { example } from './example';
 import './editor.scss';
 
@@ -36,7 +36,16 @@ registerBlockType( 'woocommerce/checkout', {
 			default: false,
 		},
 	},
-	edit,
+	edit: ( props ) => (
+		<Edit
+			{ ...props }
+			feedbackPromptText={ __(
+				'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
+				'woo-gutenberg-products-block'
+			) }
+			showFeedbackPrompt={ true }
+		/>
+	),
 	/**
 	 * Save the props to post content.
 	 */

assets/js/hocs/index.js

@@ -1,3 +1,4 @@
+export { default as withFeedbackPrompt } from './with-feedback-prompt';
 export { default as withAttributes } from './with-attributes';
 export { default as withCategories } from './with-categories';
 export { default as withCategory } from './with-category';

assets/js/hocs/with-feedback-prompt/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { InspectorControls } from '@wordpress/block-editor';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import FeedbackPrompt from './feedback-prompt.js';
+
+/**
+ * Adds a feedback prompt to the editor sidebar.
+ *
+ * @param {WPComponent} BlockEdit Original component.
+ *
+ * @return {WPComponent} Wrapped component.
+ */
+const withFeedbackPrompt = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const {
+			feedbackPromptText,
+			showFeedbackPrompt,
+			...blockEditProps
+		} = props;
+
+		if ( showFeedbackPrompt ) {
+			return (
+				<Fragment>
+					<BlockEdit { ...blockEditProps } />
+					<InspectorControls>
+						<FeedbackPrompt text={ feedbackPromptText } />
+					</InspectorControls>
+				</Fragment>
+			);
+		}
+
+		return <BlockEdit { ...props } />;
+	};
+}, 'withFeedbackPrompt' );
+
+export default withFeedbackPrompt;