Add Feedback Prompt in Cart & Checkout blocks sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1356)

* Add Feedback Prompt in Cart & Checkout blocks sidebar

* Add border

* Move getInspectorControls out of the component function

* Move feedback prompt to a HOC

* Add @todo comment to feedback link

* Use filter for withFeedbackPrompt

* Export withFeedbackPrompt from hocs index.js

* Typo

* Try moving the feedback texts to context

* Revert "Try moving the feedback texts to context"

This reverts commit 21f889b021ceea6fef722efab9663799829bc769.

* Revert "Use filter for withFeedbackPrompt"

This reverts commit 96bba029d61a383eafa2c0a1c08f7988e319b50d.

* Set feedback text in the HOC function

* Use arrow-function to simplify code

* Refactor

plugins/woocommerce-blocks/assets/js/base/context/product-layout-context.js

@@ -16,7 +16,7 @@ const validationMap = {
 };
 
 /**
- * ProductLayoutContext is an configuration object for layout options shared
+ * ProductLayoutContext is a configuration object for layout options shared
  * among all components in a tree.
  *
  * @member {Object} ProductLayoutContext A react context object

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

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { BlockControls } from '@wordpress/block-editor';
 import { Toolbar } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import TextToolbarButton from '@woocommerce/block-components/text-toolbar-button';
 import PropTypes from 'prop-types';
+import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
@@ -58,4 +59,9 @@ CartEditor.propTypes = {
 	className: PropTypes.string,
 };
 
-export default CartEditor;
+export default withFeedbackPrompt(
+	__(
+		'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'
+	)
+)( CartEditor );

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

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Disabled } from '@wordpress/components';
+import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
@@ -9,7 +11,7 @@ import { Disabled } from '@wordpress/components';
 import Block from './block.js';
 import './editor.scss';
 
-const Edit = ( { attributes } ) => {
+const CheckoutEditor = ( { attributes } ) => {
 	const { className } = attributes;
 
 	return (
@@ -21,4 +23,9 @@ const Edit = ( { attributes } ) => {
 	);
 };
 
-export default Edit;
+export default withFeedbackPrompt(
+	__(
+		'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'
+	)
+)( CheckoutEditor );

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

@@ -1,6 +1,7 @@
 export { default as withAttributes } from './with-attributes';
 export { default as withCategories } from './with-categories';
 export { default as withCategory } from './with-category';
+export { default as withFeedbackPrompt } from './with-feedback-prompt';
 export { default as withProduct } from './with-product';
 export { default as withProductVariations } from './with-product-variations';
 export { default as withSearchedProducts } from './with-searched-products';

plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/feedback-prompt.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import Gridicon from 'gridicons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Component to render a Feedback prompt in the sidebar.
+ */
+const FeedbackPrompt = ( { text } ) => {
+	return (
+		<div className="wc-block-feedback-prompt">
+			<Gridicon icon="comment" />
+			<h2 className="wc-block-feedback-prompt__title">
+				{ __( 'Feedback?', 'woo-gutenberg-products-block' ) }
+			</h2>
+			<p className="wc-block-feedback-prompt__text">{ text }</p>
+			<a
+				// @todo Update the link to a page to gather feedback.
+				href="https://wordpress.org/support/plugin/woo-gutenberg-products-block/reviews/"
+				className="wc-block-feedback-prompt__link"
+				rel="noreferrer noopener"
+				target="_blank"
+			>
+				{ __(
+					'Give us your feedback.',
+					'woo-gutenberg-products-block'
+				) }
+				<Gridicon icon="external" size={ 16 } />
+			</a>
+		</div>
+	);
+};
+
+FeedbackPrompt.propTypes = {
+	text: PropTypes.string,
+};
+
+export default FeedbackPrompt;

plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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 = ( content ) =>
+	createHigherOrderComponent( ( BlockEdit ) => {
+		return ( props ) => (
+			<Fragment>
+				<BlockEdit { ...props } />
+				<InspectorControls>
+					<FeedbackPrompt text={ content } />
+				</InspectorControls>
+			</Fragment>
+		);
+	}, 'withFeedbackPrompt' );
+
+export default withFeedbackPrompt;

plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/style.scss

@@ -0,0 +1,19 @@
+.wc-block-feedback-prompt {
+	background-color: #f7f7f7;
+	border-top: 1px solid #e2e4e7;
+	margin: $gap -16px -16px;
+	padding: $gap-large;
+	text-align: center;
+
+	.wc-block-feedback-prompt__title {
+		margin: 0 0 $gap-small;
+	}
+
+	.wc-block-feedback-prompt__link {
+		color: inherit;
+
+		> .gridicon {
+			vertical-align: text-bottom;
+		}
+	}
+}