From 372208be4132ccdae3cb0e6450d8453d5f52e2fe Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Mon, 23 Jan 2023 17:36:48 -0800 Subject: [PATCH] Always show comments for product feedback form (#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 --- .../changelog/update-36327 | 4 ++ .../src/customer-effort-score.tsx | 14 +++++ .../src/customer-feedback-modal/index.tsx | 59 +++++++++++-------- .../customer-effort-score-modal-container.tsx | 1 + .../product-mvp-ces-footer.tsx | 1 + .../client/products/product-more-menu.tsx | 2 +- plugins/woocommerce/changelog/update-36327 | 4 ++ 7 files changed, 61 insertions(+), 24 deletions(-) create mode 100644 packages/js/customer-effort-score/changelog/update-36327 create mode 100644 plugins/woocommerce/changelog/update-36327 diff --git a/packages/js/customer-effort-score/changelog/update-36327 b/packages/js/customer-effort-score/changelog/update-36327 new file mode 100644 index 0000000000000..e96bba19f0254 --- /dev/null +++ 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 index c51cc99480a23..d94af73a3bcd5 100644 --- 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 index cc55823df457e..ad894742cf64d 100644 --- 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( { ) } - { [ firstQuestionScore, secondQuestionScore ].some( - ( score ) => score === 1 || score === 2 - ) && ( -
- setComments( value ) } - rows={ 5 } - /> -
- ) } + { typeof shouldShowComments === 'function' && + shouldShowComments( + firstQuestionScore, + secondQuestionScore + ) && ( +
+ + setComments( value ) + } + rows={ 5 } + /> +
+ ) } { showNoScoreMessage && (
{ 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 index d4cb4c80e05bf..eb5bd975565c0 100644 --- 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 index 69ea7a6a8ab77..7f93e182e7cb1 100644 --- 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: 🌟, diff --git a/plugins/woocommerce/changelog/update-36327 b/plugins/woocommerce/changelog/update-36327 new file mode 100644 index 0000000000000..4544eec75dce5 --- /dev/null +++ b/plugins/woocommerce/changelog/update-36327 @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Always show comments for product feedback form