Track the reconnect notice and button clicks (#4717)

* Track the reconnect notice and button clicks

* Readme and changelog entries

* Unit test

* Tracking the button click instead of the scrolling

* Tracking the re-authenticate banner

* Removing inline JS

* Update includes/admin/class-wc-stripe-admin-notices.php

Co-authored-by: Diego Curbelo <[email protected]>

* Update client/settings/payment-settings/account-details-section.js

Co-authored-by: Diego Curbelo <[email protected]>

* Removing unnecessary changes

---------

Co-authored-by: Diego Curbelo <[email protected]>

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 10.1.0 - xxxx-xx-xx =
+* Dev - Add track events when clicking the "Reconnect to Stripe" button (both in the settings page and the admin notice)
 * Update - Removes unnecessary legacy checkout gateway instantiations and UPE disablement code
 * Dev - Renames previous Order Helper class methods to use the `_id` suffix
 * Dev - Expands the Stripe Order Helper class to handle customer ID, card ID, UPE payment type, and UPE redirect status metas

client/settings/payment-settings/__tests__/account-details-section.test.js

@@ -12,6 +12,7 @@ import {
 	useAccountKeysTestWebhookSecret,
 } from 'wcstripe/data/account-keys/hooks';
 import { useAccount } from 'wcstripe/data/account';
+import { recordEvent } from 'wcstripe/tracking';
 
 jest.mock( 'wcstripe/data', () => ( {
 	useIsStripeEnabled: jest.fn(),
@@ -36,6 +37,10 @@ jest.mock( 'wcstripe/data/account', () => ( {
 	useAccount: jest.fn(),
 } ) );
 
+jest.mock( 'wcstripe/tracking', () => ( {
+	recordEvent: jest.fn(),
+} ) );
+
 jest.mock( '@stripe/stripe-js', () => ( {
 	loadStripe: jest.fn(),
 } ) );
@@ -287,5 +292,41 @@ describe( 'AccountDetailsSection', () => {
 			} );
 			expect( configureConnectionButton ).toBeInTheDocument();
 		} );
+
+		it( 'should record event when the reconnect button is clicked', async () => {
+			useAccount.mockReturnValue( {
+				data: {
+					webhook_url: 'example.com',
+					account: {
+						id: 'acct_123',
+						email: '[email protected]',
+						testmode: false,
+					},
+					configured_webhook_urls: {
+						live: 'example.com',
+						test: 'example.com',
+					},
+					oauth_connections: {
+						live: { connected: false },
+						test: { connected: false },
+					},
+				},
+			} );
+
+			render(
+				<AccountDetailsSection setModalType={ setModalTypeMock } />
+			);
+
+			const editKeysButton = screen.getByRole( 'button', {
+				name: /Configure connection/i,
+			} );
+
+			await userEvent.click( editKeysButton );
+
+			expect( recordEvent ).toHaveBeenCalledWith(
+				'wcstripe_reconnect_button_click',
+				{ source: 'account_details_section', mode: 'live' }
+			);
+		} );
 	} );
 } );

client/settings/payment-settings/account-details-section.js

@@ -13,6 +13,7 @@ import { useDispatch } from '@wordpress/data';
 import './style.scss';
 import { useTestMode } from 'wcstripe/data';
 import { useAccount } from 'wcstripe/data/account';
+import { recordEvent } from 'wcstripe/tracking';
 
 const HeaderDetails = styled.div`
 	display: flex;
@@ -97,6 +98,21 @@ const AccountDetailsSection = ( { setModalType, setKeepModalContent } ) => {
 	const headingRef = useRef( null );
 	const [ isTestMode ] = useTestMode();
 	const { data } = useAccount();
+	const oauthConnected = isTestMode
+		? data?.oauth_connections?.test?.connected
+		: data?.oauth_connections?.live?.connected;
+
+	const handleButtonClick = () => {
+		const mode = isTestMode ? 'test' : 'live';
+		if ( ! oauthConnected ) {
+			recordEvent( 'wcstripe_reconnect_button_click', {
+				source: 'account_details_section',
+				mode,
+			} );
+		}
+
+		setModalType( mode );
+	};
 
 	useEffect( () => {
 		if ( ! headingRef.current ) {
@@ -146,9 +162,7 @@ const AccountDetailsSection = ( { setModalType, setKeepModalContent } ) => {
 				<Button
 					variant="secondary"
 					id="btn-configure-connection"
-					onClick={ () =>
-						setModalType( isTestMode ? 'test' : 'live' )
-					}
+					onClick={ handleButtonClick }
 				>
 					{ __(
 						'Configure connection',

client/settings/payment-settings/promotional-banner/__tests__/re-connect-account-banner.test.js

@@ -62,10 +62,19 @@ describe( 'Reconnect banner', () => {
 		const reconnectButton = getByText( 'Re-authenticate' );
 		await userEvent.click( reconnectButton );
 
-		expect( recordEvent ).toHaveBeenCalledWith(
+		expect( recordEvent ).toHaveBeenNthCalledWith(
+			1,
 			'wcstripe_create_or_connect_test_account_click',
 			{}
 		);
+		expect( recordEvent ).toHaveBeenNthCalledWith(
+			2,
+			'wcstripe_reconnect_button_click',
+			{
+				source: 're-connect-account-banner',
+				mode: 'test',
+			}
+		);
 
 		expect( window.location.assign ).toHaveBeenCalledWith( oauthUrl );
 

client/settings/payment-settings/promotional-banner/re-connect-account-banner.js

@@ -21,9 +21,17 @@ export const ReConnectAccountBanner = ( { testOauthUrl, oauthUrl } ) => {
 	const handleButtonClick = () => {
 		if ( isTestModeEnabled && testOauthUrl ) {
 			recordEvent( 'wcstripe_create_or_connect_test_account_click', {} );
+			recordEvent( 'wcstripe_reconnect_button_click', {
+				source: 're-connect-account-banner',
+				mode: 'test',
+			} );
 			window.location.assign( testOauthUrl );
 		} else if ( ! isTestModeEnabled && oauthUrl ) {
 			recordEvent( 'wcstripe_create_or_connect_account_click', {} );
+			recordEvent( 'wcstripe_reconnect_button_click', {
+				source: 're-connect-account-banner',
+				mode: 'live',
+			} );
 			window.location.assign( oauthUrl );
 		} else {
 			createErrorNotice(

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 10.1.0 - xxxx-xx-xx =
+* Dev - Add track events when clicking the "Reconnect to Stripe" button (both in the settings page and the admin notice)
 * Update - Removes unnecessary legacy checkout gateway instantiations and UPE disablement code
 * Dev - Renames previous Order Helper class methods to use the `_id` suffix
 * Dev - Expands the Stripe Order Helper class to handle customer ID, card ID, UPE payment type, and UPE redirect status metas