Apply the notice mechanism to disable another feedback form submissio…

…n in one day
Automattic · Sep 3, 2024 · 25be0f4 · 25be0f4
1 parent 070a23a
commit 25be0f4
Show file tree

Hide file tree

Showing 3 changed files with 46 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';
@@ -20,6 +22,20 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 	const dispatch = useDispatch();
 	const [ content, setContent ] = useState( '' );
 
+	const {
+		data: isAbleToSubmitFeedback,
+		isFetching: isCheckingAbilityToSubmitFeedback,
+		refetch: refetchNotices,
+	} = useNoticeVisibilityQuery( siteId, 'able_to_submit_user_feedback' );
+
+	// Disable feedback submission for 24 hours.
+	const { mutateAsync: disableFeedbackSubmissionInOneDay } = useNoticeVisibilityMutation(
+		siteId,
+		'able_to_submit_user_feedback',
+		'postponed',
+		24 * 3600
+	);
+
 	const { isSubmittingFeedback, submitFeedback, isSubmissionSuccessful } =
 		useSubmitProductFeedback( siteId );
 
@@ -53,9 +69,20 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 				} )
 			);
 
+			disableFeedbackSubmissionInOneDay().then( () => {
+				refetchNotices();
+			} );
+
 			handleClose();
 		}
-	}, [ dispatch, isSubmissionSuccessful, handleClose, translate ] );
+	}, [
+		dispatch,
+		isSubmissionSuccessful,
+		handleClose,
+		translate,
+		disableFeedbackSubmissionInOneDay,
+		refetchNotices,
+	] );
 
 	return (
 		<Modal className="stats-feedback-modal" onRequestClose={ handleClose } __experimentalHideHeader>
@@ -85,11 +112,20 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 					onChange={ setContent }
 				/>
 				<div className="stats-feedback-modal__button">
+					{ ! isCheckingAbilityToSubmitFeedback && ! isAbleToSubmitFeedback && (
+						<small>{ translate( 'You may submit additional feedback 24 hours later.' ) }</small>
+					) }
 					<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;
+
+	small {
+		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: false,
 };
 const DEFAULT_CLIENT_NOTICES_VISIBILITY = {
 	client_paid_plan_purchase_success: true,