Add tracks to task list reminder bar

plugins/woocommerce-admin/client/tasks/reminder-bar/reminder-bar.tsx

@@ -15,6 +15,7 @@ import { close as closeIcon } from '@wordpress/icons';
 import interpolateComponents from '@automattic/interpolate-components';
 import { useEffect } from '@wordpress/element';
 import { getQuery } from '@woocommerce/navigation';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -29,11 +30,19 @@ type ReminderBarProps = {
 
 type ReminderTextProps = {
 	remainingCount: number | null;
+	tracksProps: {
+		completed: number;
+		is_homescreen: boolean;
+		is_active_task_page: boolean;
+	};
 };
 
 const REMINDER_BAR_HIDDEN_OPTION = 'woocommerce_task_list_reminder_bar_hidden';
 
-const ReminderText: React.FC< ReminderTextProps > = ( { remainingCount } ) => {
+const ReminderText: React.FC< ReminderTextProps > = ( {
+	remainingCount,
+	tracksProps,
+} ) => {
 	const translationText =
 		remainingCount === 1
 			? /* translators: 1: remaining tasks count */
@@ -56,6 +65,12 @@ const ReminderText: React.FC< ReminderTextProps > = ( { remainingCount } ) => {
 					setupLink: (
 						<Link
 							href={ getAdminLink( 'admin.php?page=wc-admin' ) }
+							onClick={ () =>
+								recordEvent(
+									'tasklist_reminder_bar_continue',
+									tracksProps
+								)
+							}
 							type="wp-admin"
 						/>
 					),
@@ -123,7 +138,7 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( {
 		getQuery().page && getQuery().page === 'wc-admin' && ! getQuery().path;
 	const isActiveTaskPage = Boolean( getQuery().wc_onboarding_active_task );
 
-	const hideReminderBar =
+	const isHidden =
 		loading ||
 		taskListHidden ||
 		taskListComplete ||
@@ -134,24 +149,40 @@ export const TasksReminderBar: React.FC< ReminderBarProps > = ( {
 
 	useEffect( () => {
 		updateBodyMargin();
-	}, [ hideReminderBar, updateBodyMargin ] );
+	}, [ isHidden, updateBodyMargin ] );
 
-	if ( hideReminderBar ) {
+	const tracksProps = {
+		completed: completedTasksCount,
+		is_homescreen: isHomescreen,
+		is_active_task_page: isActiveTaskPage,
+	};
+
+	useEffect( () => {
+		if ( loading || isHidden ) {
+			return;
+		}
+
+		recordEvent( 'tasklist_reminder_bar_view', tracksProps );
+	}, [ isHidden, loading ] );
+
+	const onClose = () => {
+		updateOptions( {
+			[ REMINDER_BAR_HIDDEN_OPTION ]: 'yes',
+		} );
+		recordEvent( 'tasklist_reminder_bar_close', tracksProps );
+	};
+
+	if ( isHidden ) {
 		return null;
 	}
 
 	return (
 		<div className="woocommerce-layout__header-tasks-reminder-bar">
-			<ReminderText remainingCount={ remainingCount } />
-			<Button
-				isSmall
-				onClick={ () =>
-					updateOptions( {
-						[ REMINDER_BAR_HIDDEN_OPTION ]: 'yes',
-					} )
-				}
-				icon={ closeIcon }
+			<ReminderText
+				remainingCount={ remainingCount }
+				tracksProps={ tracksProps }
 			/>
+			<Button isSmall onClick={ onClose } icon={ closeIcon } />
 		</div>
 	);
 };