Track user clicks on Links/Buttons in disconnect modal footer

projects/js-packages/connection/changelog/add-disconnect-modal-click-events

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added user click tracking to disconnect dialog modal

projects/js-packages/connection/components/disconnect-dialog/index.jsx

@@ -200,6 +200,11 @@ const DisconnectDialog = props => {
 		e => {
 			e && e.preventDefault();
 
+			jetpackAnalytics.tracks.recordEvent(
+				'jetpack_disconnect_dialog_click_disconnect',
+				defaultTracksArgs
+			);
+
 			setDisconnectError( false );
 			setIsDisconnecting( true );
 
@@ -217,7 +222,24 @@ const DisconnectDialog = props => {
 			// Default to making the disconnect API call here.
 			_disconnect();
 		},
-		[ setDisconnectError, setIsDisconnecting, pluginScreenDisconnectCallback, context, _disconnect ]
+		[
+			setDisconnectError,
+			setIsDisconnecting,
+			pluginScreenDisconnectCallback,
+			context,
+			_disconnect,
+			defaultTracksArgs,
+		]
+	);
+
+	const trackModalClick = useCallback(
+		target => {
+			jetpackAnalytics.tracks.recordEvent(
+				`jetpack_disconnect_dialog_click_${ target }`,
+				defaultTracksArgs
+			);
+		},
+		[ defaultTracksArgs ]
 	);
 
 	/**
@@ -321,6 +343,7 @@ const DisconnectDialog = props => {
 					disconnectError={ disconnectError }
 					context={ context } // Where is the modal showing? ( most important for when it loads on the plugins page )
 					disconnectingPlugin={ disconnectingPlugin } // Which plugin is initiating the disconnect.
+					trackModalClick={ trackModalClick }
 				/>
 			);
 		} else if ( isDisconnected && ! isProvidingFeedback && ! isFeedbackProvided ) {

projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx

@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 
 /**
  * Internal Dependencies
@@ -30,8 +30,18 @@ const StepDisconnect = props => {
 		disconnectingPlugin,
 		closeModal,
 		context,
+		trackModalClick,
 	} = props;
 
+	const trackLearnClick = useCallback( () => trackModalClick( 'learn_about' ), [
+		trackModalClick,
+	] );
+	const trackSupportClick = useCallback( () => trackModalClick( 'support' ), [ trackModalClick ] );
+	const trackStayConnectedClick = useCallback( () => {
+		trackModalClick( 'stay_connected' );
+		closeModal();
+	}, [ trackModalClick, closeModal ] );
+
 	/**
 	 * Render the disconnect button, allows for some variance based on context.
 	 *
@@ -109,6 +119,7 @@ const StepDisconnect = props => {
 											rel="noopener noreferrer"
 											target="_blank"
 											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackLearnClick }
 										/>
 									),
 									jpSupportLink: (
@@ -117,6 +128,7 @@ const StepDisconnect = props => {
 											rel="noopener noreferrer"
 											target="_blank"
 											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackSupportClick }
 										/>
 									),
 								}
@@ -127,7 +139,7 @@ const StepDisconnect = props => {
 						<Button
 							isPrimary
 							disabled={ isDisconnecting }
-							onClick={ closeModal }
+							onClick={ trackStayConnectedClick }
 							className="jp-connection__disconnect-dialog__btn-dismiss"
 						>
 							{ __( 'Stay connected', 'jetpack' ) }
@@ -162,6 +174,8 @@ StepDisconnect.propTypes = {
 	closeModal: PropTypes.func,
 	/** Where this modal is being rendered. */
 	context: PropTypes.string,
+	/** Callback tracks link/btn clicks (onDisconnect handles it's own tracks) */
+	trackModalClick: PropTypes.func,
 };
 
 export default StepDisconnect;

projects/js-packages/connection/components/disconnect-dialog/test/step-disconnect.jsx

@@ -16,8 +16,13 @@ describe( 'StepDisconnect', () => {
 		title: 'Test Title',
 		onDisconnect: spy(),
 		closeModal: spy(),
+		trackModalClick: spy(),
 	};
 
+	afterEach( () => {
+		testProps.trackModalClick.resetHistory();
+	} );
+
 	describe( 'Initially', () => {
 		const wrapper = shallow( <StepDisconnect { ...testProps } /> );
 
@@ -47,13 +52,37 @@ describe( 'StepDisconnect', () => {
 
 	describe( 'When the dismiss button is clicked', () => {
 		const wrapper = shallow( <StepDisconnect { ...testProps } /> );
-
-		wrapper
-			.find( '.jp-connection__disconnect-dialog__btn-dismiss' )
-			.simulate( 'click', { preventDefault: () => undefined } );
+		const dismissBtn = wrapper.find( '.jp-connection__disconnect-dialog__btn-dismiss' );
 
 		it( 'calls the closeModal callback', () => {
+			dismissBtn.simulate( 'click', { preventDefault: () => undefined } );
+
 			expect( testProps.closeModal.called ).to.be.true;
 		} );
+
+		it( 'calls the trackModalClick callback with stay_connected', () => {
+			dismissBtn.simulate( 'click', { preventDefault: () => undefined } );
+
+			expect( testProps.trackModalClick.calledOnceWith( 'stay_connected' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'When help links are clicked', () => {
+		const learnAboutLink = 0;
+		const supportLink = 1;
+		const wrapper = shallow( <StepDisconnect { ...testProps } /> );
+		const links = wrapper.find( '.jp-connection__disconnect-dialog__link' );
+
+		it( 'the connection link calls the trackModalClick with learn_about', () => {
+			links.at( learnAboutLink ).simulate( 'click', { preventDefault: () => undefined } );
+
+			expect( testProps.trackModalClick.calledOnceWith( 'learn_about' ) ).to.be.true;
+		} );
+
+		it( 'the support link calls the trackModalClick with support', () => {
+			links.at( supportLink ).simulate( 'click', { preventDefault: () => undefined } );
+
+			expect( testProps.trackModalClick.calledOnceWith( 'support' ) ).to.be.true;
+		} );
 	} );
 } );