From ff7cc132fb5d0ca61f45cffa1e22fd445035709d Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@users.noreply.github.com>
Date: Sat, 21 Sep 2024 05:09:34 +0800
Subject: [PATCH] Stats: Add modal close event for form submission (#94574)

* Add modal close event for form submission

* Add event stats_feedback_action_directly_close_form_modal only
---
 client/my-sites/stats/feedback/index.tsx      |  2 -
 .../my-sites/stats/feedback/modal/index.tsx   | 39 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/client/my-sites/stats/feedback/index.tsx b/client/my-sites/stats/feedback/index.tsx
index b2f57b3371a1ee..e3ee64a91b5eb9 100644
--- a/client/my-sites/stats/feedback/index.tsx
+++ b/client/my-sites/stats/feedback/index.tsx
@@ -203,8 +203,6 @@ function StatsFeedbackController( { siteId }: FeedbackProps ) {
 
 	const onModalClose = () => {
 		setIsOpen( false );
-
-		trackStatsAnalyticsEvent( 'stats_feedback_action_close_form_modal' );
 	};
 
 	if ( ! supportCommercialUse ) {
diff --git a/client/my-sites/stats/feedback/modal/index.tsx b/client/my-sites/stats/feedback/modal/index.tsx
index fef7a2eb7edf11..92a1d0a3ccbeb8 100644
--- a/client/my-sites/stats/feedback/modal/index.tsx
+++ b/client/my-sites/stats/feedback/modal/index.tsx
@@ -53,21 +53,24 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 	const { isSubmittingFeedback, submitFeedback, isSubmissionSuccessful } =
 		useSubmitProductFeedback( siteId );
 
-	const handleClose = useCallback( () => {
-		setTimeout( () => {
-			onClose();
-		}, 200 );
-	}, [ onClose ] );
+	const handleClose = useCallback(
+		( isDirectClose: boolean = false ) => {
+			setTimeout( () => {
+				onClose();
+
+				if ( isDirectClose ) {
+					trackStatsAnalyticsEvent( 'stats_feedback_action_directly_close_form_modal' );
+				}
+			}, 200 );
+		},
+		[ onClose ]
+	);
 
 	const onFormSubmit = useCallback( () => {
 		if ( ! content ) {
 			return;
 		}
 
-		trackStatsAnalyticsEvent( 'stats_feedback_action_submit_form', {
-			feedback: content,
-		} );
-
 		const sourceUrl = `${ window.location.origin }${ window.location.pathname }`;
 		submitFeedback( {
 			source_url: sourceUrl,
@@ -75,7 +78,11 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 			feedback: content,
 			is_testing: false,
 		} );
-	}, [ dispatch, content, submitFeedback ] );
+
+		trackStatsAnalyticsEvent( 'stats_feedback_action_submit_form', {
+			feedback: content,
+		} );
+	}, [ content, submitFeedback ] );
 
 	useEffect( () => {
 		if ( isSubmissionSuccessful ) {
@@ -104,10 +111,18 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 	] );
 
 	return (
-		<Modal className="stats-feedback-modal" onRequestClose={ handleClose } __experimentalHideHeader>
+		<Modal
+			className="stats-feedback-modal"
+			onRequestClose={ () => {
+				handleClose( true );
+			} }
+			__experimentalHideHeader
+		>
 			<Button
 				className="stats-feedback-modal__close-button"
-				onClick={ handleClose }
+				onClick={ () => {
+					handleClose( true );
+				} }
 				icon={ close }
 				label={ translate( 'Close' ) }
 			/>