Add Feedback Prompt in Cart & Checkout blocks sidebar

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

@@ -1,17 +1,31 @@
 /**
  * External dependencies
  */
-import { BlockControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { Toolbar } from '@wordpress/components';
 import { Fragment, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import TextToolbarButton from '@woocommerce/block-components/text-toolbar-button';
 
 /**
  * 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".
@@ -25,23 +39,19 @@ const Cart = () => {
 
 	const getBlockControls = () => {
 		return (
-			<BlockControls className='wc-block-cart-toolbar'>
+			<BlockControls className="wc-block-cart-toolbar">
 				<Toolbar>
 					<TextToolbarButton
 						onClick={ toggleFullCartMode }
-						isToggled={ isFullCartMode }>
-						{  __(
-							'Full Cart',
-							'woo-gutenberg-products-block'
-						) }
+						isToggled={ isFullCartMode }
+					>
+						{ __( 'Full Cart', 'woo-gutenberg-products-block' ) }
 					</TextToolbarButton>
 					<TextToolbarButton
 						onClick={ toggleFullCartMode }
-						isToggled={ ! isFullCartMode }>
-						{  __(
-							'Empty Cart',
-							'woo-gutenberg-products-block'
-						) }
+						isToggled={ ! isFullCartMode }
+					>
+						{ __( 'Empty Cart', 'woo-gutenberg-products-block' ) }
 					</TextToolbarButton>
 				</Toolbar>
 			</BlockControls>
@@ -53,6 +63,7 @@ const Cart = () => {
 	return (
 		<Fragment>
 			{ getBlockControls() }
+			{ getInspectorControls() }
 			{ cart }
 		</Fragment>
 	);

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

@@ -1,19 +1,40 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import FeedbackPrompt from '../feedback-prompt';
+
 /**
  * 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>

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

@@ -0,0 +1,44 @@
+/**
+ * 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
+				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;

assets/js/blocks/cart-checkout/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;
+		}
+	}
+}