From d54df111f1f76b2aa570e003ba9556382d216268 Mon Sep 17 00:00:00 2001
From: synorae <synora.eusebio@automattic.com>
Date: Tue, 17 May 2022 12:09:51 -0400
Subject: [PATCH] Backup: adding tracking analytics to upgrade storage link
 (#63568)

* Backup: adding tracking analytics to upgrade storage link

* Fix broken unit tests, add coverage for new Tracks event

Co-authored-by: Matt Gawarecki <matt.gawarecki@gmail.com>
---
 .../components/backup-storage-space/hooks.tsx | 19 +++++++++++++++----
 .../backup-storage-space/test/hooks.js        | 19 +++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/client/components/backup-storage-space/hooks.tsx b/client/components/backup-storage-space/hooks.tsx
index 452f0bc492fe7..4cc44d13dc671 100644
--- a/client/components/backup-storage-space/hooks.tsx
+++ b/client/components/backup-storage-space/hooks.tsx
@@ -1,6 +1,7 @@
 import { useTranslate, TranslateResult } from 'i18n-calypso';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 import getJetpackStorageUpgradeUrl from 'calypso/state/plans/selectors/get-jetpack-storage-upgrade-url';
 import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';
 
@@ -24,12 +25,22 @@ export const useStorageUsageText = (
 	bytesAvailable: number | undefined
 ): TranslateResult | null => {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
 
 	const siteSlug = useSelector( getSelectedSiteSlug );
 	const storageUpgradeUrl = useSelector( ( state ) =>
 		getJetpackStorageUpgradeUrl( state, siteSlug )
 	);
 
+	const onClick = useCallback( () => {
+		dispatch(
+			recordTracksEvent( 'calypso_jetpack_backup_storage_usage_upgrade_click', {
+				bytes_used: bytesUsed,
+				bytes_available: bytesAvailable,
+			} )
+		);
+	}, [ dispatch, bytesUsed, bytesAvailable ] );
+
 	return useMemo( () => {
 		if ( bytesUsed === undefined ) {
 			return null;
@@ -59,7 +70,7 @@ export const useStorageUsageText = (
 					comment:
 						'Must use unit abbreviation; describes used vs available storage amounts (e.g., 20.0GB of 30GB used, 0.5GB of 20GB used)',
 					components: {
-						a: <a href={ storageUpgradeUrl } />,
+						a: <a onClick={ onClick } href={ storageUpgradeUrl } />,
 					},
 				}
 			);
@@ -75,5 +86,5 @@ export const useStorageUsageText = (
 					'Must use unit abbreviation; describes used vs available storage amounts (e.g., 20.0GB of 1TB used, 0.5GB of 2TB used)',
 			}
 		);
-	}, [ translate, storageUpgradeUrl, bytesUsed, bytesAvailable ] );
+	}, [ translate, storageUpgradeUrl, bytesUsed, bytesAvailable, onClick ] );
 };
diff --git a/client/components/backup-storage-space/test/hooks.js b/client/components/backup-storage-space/test/hooks.js
index 5f9a94a3da0ac..e2ae535fe1c1f 100644
--- a/client/components/backup-storage-space/test/hooks.js
+++ b/client/components/backup-storage-space/test/hooks.js
@@ -8,16 +8,19 @@ const EXAMPLE_SITE_SLUG = 'mysite.example';
 jest.mock( 'react-redux', () => ( {
 	...jest.requireActual( 'react-redux' ),
 	useSelector: jest.fn().mockImplementation( ( selector ) => selector() ),
+	useDispatch: jest.fn().mockImplementation( () => () => {} ),
 } ) );
 jest.mock( 'calypso/state/ui/selectors/get-selected-site-slug', () =>
 	jest.fn().mockImplementation( () => EXAMPLE_SITE_SLUG )
 );
 jest.mock( 'calypso/lib/jetpack/is-jetpack-cloud' );
+jest.mock( 'calypso/state/analytics/actions/record' );
 
 import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStorageUsageText } from 'calypso/components/backup-storage-space/hooks';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
+import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 
 const GIGABYTE = 2 ** 30;
 const TERABYTE = 2 ** 40;
@@ -99,6 +102,22 @@ describe( 'useStorageUsageText', () => {
 		expect( link ).toHaveAttribute( 'href', `/pricing/storage/${ EXAMPLE_SITE_SLUG }` );
 	} );
 
+	test( 'fires the correct Tracks event when the Upgrade link is clicked', () => {
+		const text = renderText( GIGABYTE, GIGABYTE * 10 );
+
+		// Simulate clicking the Upgrade link
+		const link = text.querySelector( 'a' );
+		expect( link ).toBeInTheDocument();
+		link.click();
+
+		expect( recordTracksEvent ).toHaveBeenCalled();
+		const [ eventName, storageInfo ] = recordTracksEvent.mock.calls[ 0 ];
+
+		expect( eventName ).toEqual( 'calypso_jetpack_backup_storage_usage_upgrade_click' );
+		expect( storageInfo.bytes_used ).toEqual( GIGABYTE );
+		expect( storageInfo.bytes_available ).toEqual( GIGABYTE * 10 );
+	} );
+
 	// NOTE: Technically this should only happen for plans with the highest
 	// tier of storage (which is currently 1TB).
 	test( 'does not render an Upgrade link for 1TB plans', () => {