Stats: Apply notice endpoint to limit feedback form submission (#94197)

* Apply the notice mechanism to disable another feedback form submission in one day * Set default able_to_submit_user_feedback to true * Update font styling for the disable submission * Rename disableFeedbackSubmissionForOneDay * Disable textarea * Change the disable notice copy * Add const for key able_to_submit_user_feedback * Rename NOTICE_KEY_FOR_FEEDBACK_SUBMISSION
Automattic · Sep 10, 2024 · fdf81df · fdf81df
1 parent 9069081
commit fdf81df
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/client/my-sites/stats/feedback/modal/index.tsx b/client/my-sites/stats/feedback/modal/index.tsx
@@ -3,6 +3,8 @@ import { close } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import React, { useState, useCallback, useEffect } from 'react';
 import StatsButton from 'calypso/my-sites/stats/components/stats-button';
+import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation';
+import { useNoticeVisibilityQuery } from 'calypso/my-sites/stats/hooks/use-notice-visibility-query';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { successNotice } from 'calypso/state/notices/actions';
@@ -15,11 +17,27 @@ interface ModalProps {
 	onClose: () => void;
 }
 
+const NOTICE_KEY_FOR_FEEDBACK_SUBMISSION = 'able_to_submit_user_feedback';
+
 const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 	const [ content, setContent ] = useState( '' );
 
+	const {
+		data: isAbleToSubmitFeedback,
+		isFetching: isCheckingAbilityToSubmitFeedback,
+		refetch: refetchNotices,
+	} = useNoticeVisibilityQuery( siteId, NOTICE_KEY_FOR_FEEDBACK_SUBMISSION );
+
+	// Disable feedback submission for 24 hours.
+	const { mutateAsync: disableFeedbackSubmissionForOneDay } = useNoticeVisibilityMutation(
+		siteId,
+		NOTICE_KEY_FOR_FEEDBACK_SUBMISSION,
+		'postponed',
+		24 * 3600
+	);
+
 	const { isSubmittingFeedback, submitFeedback, isSubmissionSuccessful } =
 		useSubmitProductFeedback( siteId );
 
@@ -58,9 +76,20 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 				} )
 			);
 
+			disableFeedbackSubmissionForOneDay().then( () => {
+				refetchNotices();
+			} );
+
 			handleClose();
 		}
-	}, [ dispatch, isSubmissionSuccessful, handleClose, translate ] );
+	}, [
+		dispatch,
+		isSubmissionSuccessful,
+		handleClose,
+		translate,
+		disableFeedbackSubmissionForOneDay,
+		refetchNotices,
+	] );
 
 	return (
 		<Modal className="stats-feedback-modal" onRequestClose={ handleClose } __experimentalHideHeader>
@@ -88,13 +117,27 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 					name="content"
 					value={ content }
 					onChange={ setContent }
+					disabled={ ! isCheckingAbilityToSubmitFeedback && ! isAbleToSubmitFeedback }
 				/>
 				<div className="stats-feedback-modal__button">
+					{ ! isCheckingAbilityToSubmitFeedback && ! isAbleToSubmitFeedback && (
+						<strong>
+							<em>
+								{ translate( 'Feedback submission is currently limited to one per 24 hours.' ) }
+							</em>
+						</strong>
+					) }
 					<StatsButton
 						primary
 						onClick={ onFormSubmit }
 						busy={ isSubmittingFeedback }
-						disabled={ isSubmittingFeedback || isSubmissionSuccessful || ! content }
+						disabled={
+							isCheckingAbilityToSubmitFeedback ||
+							! isAbleToSubmitFeedback ||
+							isSubmittingFeedback ||
+							isSubmissionSuccessful ||
+							! content
+						}
 					>
 						{ translate( 'Submit' ) }
 					</StatsButton>

diff --git a/client/my-sites/stats/feedback/modal/style.scss b/client/my-sites/stats/feedback/modal/style.scss
@@ -44,12 +44,18 @@
 }
 
 .stats-feedback-modal__button {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
 	margin-top: 24px;
 	font-family: $font-sf-pro-text;
 	font-size: $font-body-small;
 	font-weight: 400;
 	line-height: 20px;
-	text-align: right;
+
+	strong {
+		margin-right: 8px;
+	}
 
 	button {
 		padding: 10px 16px;

diff --git a/client/my-sites/stats/hooks/use-notice-visibility-query.ts b/client/my-sites/stats/hooks/use-notice-visibility-query.ts
@@ -12,6 +12,7 @@ const DEFAULT_SERVER_NOTICES_VISIBILITY = {
 	// TODO: Check if the site needs to be upgraded to a higher tier on the back end.
 	tier_upgrade: true,
 	gdpr_cookie_consent: false,
+	able_to_submit_user_feedback: true,
 };
 const DEFAULT_CLIENT_NOTICES_VISIBILITY = {
 	client_paid_plan_purchase_success: true,