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
Automattic · Sep 20, 2024 · ff7cc13 · ff7cc13
1 parent 31c9dec
commit ff7cc13
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git 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
@@ -53,29 +53,36 @@ 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,
 			product_name: 'Jetpack Stats',
 			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' ) }
 			/>