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

@@ -220,6 +220,11 @@ const DisconnectDialog = props => {
 		[ setDisconnectError, setIsDisconnecting, pluginScreenDisconnectCallback, context, _disconnect ]
 	);
 
+	const trackModalClick = useCallback(
+		target => jetpackAnalytics.tracks.recordEvent( target, defaultTracksArgs ),
+		[ defaultTracksArgs ]
+	);
+
 	/**
 	 * Do we have the necessary data to be able to submit a survey?
 	 * Need to have the ID of the connected user and the ID of the connected site.
@@ -321,6 +326,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,29 @@ const StepDisconnect = props => {
 		disconnectingPlugin,
 		closeModal,
 		context,
+		trackModalClick,
 	} = props;
 
+	const trackLearnClick = useCallback(
+		() => trackModalClick( 'jetpack_disconnect_dialog_click_learn_about' ),
+		[ trackModalClick ]
+	);
+	const trackSupportClick = useCallback(
+		() => trackModalClick( 'jetpack_disconnect_dialog_click_support' ),
+		[ trackModalClick ]
+	);
+	const handleStayConnectedClick = useCallback( () => {
+		trackModalClick( 'jetpack_disconnect_dialog_click_stay_connected' );
+		closeModal();
+	}, [ trackModalClick, closeModal ] );
+	const handleDisconnectClick = useCallback(
+		e => {
+			trackModalClick( 'jetpack_disconnect_dialog_click_disconnect' );
+			onDisconnect( e );
+		},
+		[ trackModalClick, onDisconnect ]
+	);
+
 	/**
 	 * Render the disconnect button, allows for some variance based on context.
 	 *
@@ -50,7 +71,7 @@ const StepDisconnect = props => {
 			<Button
 				isPrimary
 				disabled={ isDisconnecting }
-				onClick={ onDisconnect }
+				onClick={ handleDisconnectClick }
 				className="jp-connection__disconnect-dialog__btn-disconnect"
 			>
 				{ buttonText }
@@ -109,6 +130,7 @@ const StepDisconnect = props => {
 											rel="noopener noreferrer"
 											target="_blank"
 											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackLearnClick }
 										/>
 									),
 									jpSupportLink: (
@@ -117,6 +139,7 @@ const StepDisconnect = props => {
 											rel="noopener noreferrer"
 											target="_blank"
 											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackSupportClick }
 										/>
 									),
 								}
@@ -127,7 +150,7 @@ const StepDisconnect = props => {
 						<Button
 							isPrimary
 							disabled={ isDisconnecting }
-							onClick={ closeModal }
+							onClick={ handleStayConnectedClick }
 							className="jp-connection__disconnect-dialog__btn-dismiss"
 						>
 							{ __( 'Stay connected', 'jetpack' ) }
@@ -162,6 +185,8 @@ StepDisconnect.propTypes = {
 	closeModal: PropTypes.func,
 	/** Where this modal is being rendered. */
 	context: PropTypes.string,
+	/** Callback tracks link/btn clicks */
+	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 } /> );
 
@@ -35,25 +40,66 @@ describe( 'StepDisconnect', () => {
 
 	describe( 'When the disconnect button is clicked', () => {
 		const wrapper = shallow( <StepDisconnect { ...testProps } /> );
-
-		wrapper
-			.find( '.jp-connection__disconnect-dialog__btn-disconnect' )
-			.simulate( 'click', { preventDefault: () => undefined } );
+		const disconnectButton = wrapper.find( '.jp-connection__disconnect-dialog__btn-disconnect' );
 
 		it( 'calls the disconnect callback', () => {
+			disconnectButton.simulate( 'click', { preventDefault: () => undefined } );
+
 			expect( testProps.onDisconnect.called ).to.be.true;
 		} );
+
+		it( 'calls the trackModalClick callback with jetpack_disconnect_dialog_click_disconnect', () => {
+			disconnectButton.simulate( 'click', { preventDefault: () => undefined } );
+
+			expect(
+				testProps.trackModalClick.calledOnceWith( 'jetpack_disconnect_dialog_click_disconnect' )
+			).to.be.true;
+		} );
 	} );
 
 	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 jetpack_disconnect_dialog_click_stay_connected', () => {
+			dismissBtn.simulate( 'click', { preventDefault: () => undefined } );
+
+			expect(
+				testProps.trackModalClick.calledOnceWith( 'jetpack_disconnect_dialog_click_stay_connected' )
+			).to.be.true;
+		} );
+	} );
+
+	describe( 'When help links are clicked', () => {
+		const trackEvents = [
+			'jetpack_disconnect_dialog_click_learn_about',
+			'jetpack_disconnect_dialog_click_support',
+		];
+		const wrapper = shallow( <StepDisconnect { ...testProps } /> );
+		const links = wrapper.find( '.jp-connection__disconnect-dialog__link' );
+		let trackedTotal = 0;
+
+		links.forEach( ( link, i ) => {
+			link.simulate( 'click', { preventDefault: () => undefined } );
+
+			const clickTrackValue = testProps.trackModalClick.getCall( i ).args[ 0 ];
+
+			it( `should track ${ clickTrackValue }`, async () => {
+				const valueIdx = trackEvents.indexOf( clickTrackValue );
+
+				expect( clickTrackValue ).to.equal( trackEvents[ valueIdx ] );
+				trackedTotal++;
+			} );
+		} );
+
+		it( `should track all ${ trackEvents.length } expected events`, () => {
+			expect( trackedTotal ).to.equal( trackEvents.length );
+		} );
 	} );
 } );

projects/js-packages/connection/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.14.1-alpha",
+	"version": "0.15.0-alpha",
 	"description": "Jetpack Connection Component",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/js-packages/partner-coupon/changelog/add-disconnect-modal-click-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/js-packages/partner-coupon/package.json

@@ -27,7 +27,7 @@
 		"react": "^17.0.2"
 	},
 	"dependencies": {
-		"@automattic/jetpack-connection": "workspace:^0.14.1-alpha",
+		"@automattic/jetpack-connection": "workspace:^0.15.0-alpha",
 		"@automattic/jetpack-components": "workspace:^0.10.3",
 		"@wordpress/i18n": "4.2.4",
 		"classnames": "2.3.1",

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

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/packages/connection-ui/package.json

@@ -16,7 +16,7 @@
 	"browserslist": "extends @wordpress/browserslist-config",
 	"dependencies": {
 		"@automattic/jetpack-api": "workspace:^0.8.3",
-		"@automattic/jetpack-connection": "workspace:^0.14.1-alpha",
+		"@automattic/jetpack-connection": "workspace:^0.15.0-alpha",
 		"@wordpress/data": "6.1.5"
 	},
 	"devDependencies": {

projects/packages/my-jetpack/changelog/add-disconnect-modal-click-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/packages/my-jetpack/package.json

@@ -23,7 +23,7 @@
 	"dependencies": {
 		"@automattic/jetpack-analytics": "workspace:^0.1.7",
 		"@automattic/jetpack-components": "workspace:^0.10.3",
-		"@automattic/jetpack-connection": "workspace:^0.14.1-alpha",
+		"@automattic/jetpack-connection": "workspace:^0.15.0-alpha",
 		"@wordpress/components": "19.1.6",
 		"@wordpress/data": "6.1.5",
 		"@wordpress/i18n": "4.2.4",

projects/plugins/backup/changelog/add-disconnect-modal-click-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.

projects/plugins/backup/package.json

@@ -26,7 +26,7 @@
 	"dependencies": {
 		"@automattic/jetpack-api": "workspace:^0.8.3",
 		"@automattic/jetpack-components": "workspace:^0.10.3",
-		"@automattic/jetpack-connection": "workspace:^0.14.1-alpha",
+		"@automattic/jetpack-connection": "workspace:^0.15.0-alpha",
 		"@wordpress/api-fetch": "5.2.6",
 		"@wordpress/data": "6.1.5",
 		"@wordpress/element": "4.0.4",

projects/plugins/jetpack/changelog/add-disconnect-modal-click-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.

projects/plugins/jetpack/package.json

@@ -51,7 +51,7 @@
 		"@automattic/jetpack-analytics": "workspace:^0.1.7",
 		"@automattic/jetpack-api": "workspace:^0.8.3",
 		"@automattic/jetpack-components": "workspace:^0.10.3",
-		"@automattic/jetpack-connection": "workspace:^0.14.1-alpha",
+		"@automattic/jetpack-connection": "workspace:^0.15.0-alpha",
 		"@automattic/jetpack-licensing": "workspace:^0.4.4",
 		"@automattic/jetpack-partner-coupon": "workspace:^0.1.7-alpha",
 		"@automattic/popup-monitor": "1.0.0",