Always show comments for product feedback form (woocommerce#36484)

* Always show comments for product feedback form * Add changelog entry * Add CES changelog entry * Fix up lint errors * Add default for shouldShowComments in CustomerFeedbackModal
Neosate · Jan 24, 2023 · 372208b · 372208b
1 parent f135644
commit 372208b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 24 deletions.
diff --git a/packages/js/customer-effort-score/changelog/update-36327 b/packages/js/customer-effort-score/changelog/update-36327
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add a function to help decide if comments section should be shown
diff --git a/packages/js/customer-effort-score/src/customer-effort-score.tsx b/packages/js/customer-effort-score/src/customer-effort-score.tsx
@@ -29,6 +29,10 @@ type CustomerEffortScoreProps = {
 	onModalShownCallback?: () => void;
 	onModalDismissedCallback?: () => void;
 	icon?: React.ReactElement | null;
+	shouldShowComments?: (
+		firstQuestionScore: number,
+		secondQuestionScore: number
+	) => boolean;
 };
 
 /**
@@ -48,6 +52,7 @@ type CustomerEffortScoreProps = {
  * @param {Function} props.onNoticeDismissedCallback Function to call when the notice is dismissed.
  * @param {Function} props.onModalShownCallback      Function to call when the modal is shown.
  * @param {Function} props.onModalDismissedCallback  Function to call when modal is dismissed.
+ * @param {Function} props.shouldShowComments        Callback to determine if comments section should be shown.
  * @param {Object}   props.icon                      Icon (React component) to be shown on the notice.
  */
 const CustomerEffortScore: React.VFC< CustomerEffortScoreProps > = ( {
@@ -62,6 +67,10 @@ const CustomerEffortScore: React.VFC< CustomerEffortScoreProps > = ( {
 	onModalShownCallback = noop,
 	onModalDismissedCallback = noop,
 	icon,
+	shouldShowComments = ( firstQuestionScore, secondQuestionScore ) =>
+		[ firstQuestionScore, secondQuestionScore ].some(
+			( score ) => score === 1 || score === 2
+		),
 } ) => {
 	const [ shouldCreateNotice, setShouldCreateNotice ] = useState( true );
 	const [ visible, setVisible ] = useState( false );
@@ -108,6 +117,7 @@ const CustomerEffortScore: React.VFC< CustomerEffortScoreProps > = ( {
 			secondQuestion={ secondQuestion }
 			recordScoreCallback={ recordScoreCallback }
 			onCloseModal={ onModalDismissedCallback }
+			shouldShowComments={ shouldShowComments }
 		/>
 	);
 };
@@ -145,6 +155,10 @@ CustomerEffortScore.propTypes = {
 	 * The second survey question.
 	 */
 	secondQuestion: PropTypes.string,
+	/**
+	 * A function to determine whether or not the comments field shown be shown.
+	 */
+	shouldShowComments: PropTypes.func,
 };
 
 export { CustomerEffortScore };
diff --git a/packages/js/customer-effort-score/src/customer-feedback-modal/index.tsx b/packages/js/customer-effort-score/src/customer-feedback-modal/index.tsx
@@ -32,6 +32,7 @@ import { __ } from '@wordpress/i18n';
  * @param {string}   props.defaultScore        Default score.
  * @param {Function} props.onCloseModal        Callback for when user closes modal by clicking cancel.
  * @param {Function} props.customOptions       List of custom score options, contains label and value.
+ * @param {Function} props.shouldShowComments  A function to determine whether or not the comments field shown be shown.
  */
 function CustomerFeedbackModal( {
 	recordScoreCallback,
@@ -42,6 +43,10 @@ function CustomerFeedbackModal( {
 	defaultScore = NaN,
 	onCloseModal,
 	customOptions,
+	shouldShowComments = ( firstQuestionScore, secondQuestionScore ) =>
+		[ firstQuestionScore, secondQuestionScore ].some(
+			( score ) => score === 1 || score === 2
+		),
 }: {
 	recordScoreCallback: (
 		score: number,
@@ -55,6 +60,10 @@ function CustomerFeedbackModal( {
 	defaultScore?: number;
 	onCloseModal?: () => void;
 	customOptions?: { label: string; value: string }[];
+	shouldShowComments?: (
+		firstQuestionScore: number,
+		secondQuestionScore: number
+	) => boolean;
 } ): JSX.Element | null {
 	const options =
 		customOptions && customOptions.length > 0
@@ -200,29 +209,33 @@ function CustomerFeedbackModal( {
 				</div>
 			) }
 
-			{ [ firstQuestionScore, secondQuestionScore ].some(
-				( score ) => score === 1 || score === 2
-			) && (
-				<div className="woocommerce-customer-effort-score__comments">
-					<TextareaControl
-						label={ __(
-							'How is that screen useful to you? What features would you add or change?',
-							'woocommerce'
-						) }
-						help={ __(
-							'Your feedback will go to the WooCommerce development team',
-							'woocommerce'
-						) }
-						value={ comments }
-						placeholder={ __(
-							'Optional, but much apprecated. We love reading your feedback!',
-							'woocommerce'
-						) }
-						onChange={ ( value: string ) => setComments( value ) }
-						rows={ 5 }
-					/>
-				</div>
-			) }
+			{ typeof shouldShowComments === 'function' &&
+				shouldShowComments(
+					firstQuestionScore,
+					secondQuestionScore
+				) && (
+					<div className="woocommerce-customer-effort-score__comments">
+						<TextareaControl
+							label={ __(
+								'How is that screen useful to you? What features would you add or change?',
+								'woocommerce'
+							) }
+							help={ __(
+								'Your feedback will go to the WooCommerce development team',
+								'woocommerce'
+							) }
+							value={ comments }
+							placeholder={ __(
+								'Optional, but much apprecated. We love reading your feedback!',
+								'woocommerce'
+							) }
+							onChange={ ( value: string ) =>
+								setComments( value )
+							}
+							rows={ 5 }
+						/>
+					</div>
+				) }
 
 			{ showNoScoreMessage && (
 				<div

diff --git a/...merce-admin/client/customer-effort-score-tracks/customer-effort-score-modal-container.tsx b/...merce-admin/client/customer-effort-score-tracks/customer-effort-score-modal-container.tsx
@@ -86,6 +86,7 @@ export const CustomerEffortScoreModalContainer: React.FC = () => {
 				visibleCESModalData.props?.onCloseModal?.();
 				hideCesModal();
 			} }
+			shouldShowComments={ visibleCESModalData.props?.shouldShowComments }
 		/>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx b/plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx
@@ -83,6 +83,7 @@ export const ProductMVPCESFooter: React.FC = () => {
 					"Thanks for the feedback. We'll put it to good use!",
 					'woocommerce'
 				),
+				shouldShowComments: () => true,
 			},
 			{},
 			{

diff --git a/plugins/woocommerce-admin/client/products/product-more-menu.tsx b/plugins/woocommerce-admin/client/products/product-more-menu.tsx
@@ -54,7 +54,7 @@ export const ProductMoreMenu = () => {
 											'woocommerce'
 										),
 									},
-									{},
+									{ shouldShowComments: () => true },
 									{
 										type: 'snackbar',
 										icon: <span>🌟</span>,

diff --git a/plugins/woocommerce/changelog/update-36327 b/plugins/woocommerce/changelog/update-36327
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Always show comments for product feedback form
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,6 +83,7 @@ export const ProductMVPCESFooter: React.FC = () => { @@
     					"Thanks for the feedback. We'll put it to good use!",
     					'woocommerce'
     				),
+    				shouldShowComments: () => true,
     			},
     			{},
     			{
@@ Expand Down @@