From b4d4a0b89333f207ddb44c308fb5354cfa67c0fb Mon Sep 17 00:00:00 2001
From: Nagesh Pai <4162931+nagpai@users.noreply.github.com>
Date: Wed, 1 May 2024 12:15:59 +0530
Subject: [PATCH] Reporting: Track events for `View report` links on Payment
 activity widget (#8687)

Co-authored-by: Nagesh Pai <nagesh.pai@automattic.com>
Co-authored-by: Jessy Pappachan <32092402+jessy-p@users.noreply.github.com>
Co-authored-by: Rua Haszard <rua.haszard@automattic.com>
Co-authored-by: Shendy <73803630+shendy-a8c@users.noreply.github.com>
---
 .../add-8686-track-events-payment-activity-widget   |  5 +++++
 .../payment-activity/payment-activity-data.tsx      |  4 ++++
 .../payment-activity/payment-data-tile.tsx          | 13 ++++++++++++-
 client/tracks/event.d.ts                            |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 changelog/add-8686-track-events-payment-activity-widget

diff --git a/changelog/add-8686-track-events-payment-activity-widget b/changelog/add-8686-track-events-payment-activity-widget
new file mode 100644
index 00000000000..f5ddfd553c0
--- /dev/null
+++ b/changelog/add-8686-track-events-payment-activity-widget
@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: The PR adds track events for clicks on `View report` links on the Payment activity widget. Changes currently behind a feature flag.
+
+
diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx
index 2596079ceba..d9944671434 100644
--- a/client/components/payment-activity/payment-activity-data.tsx
+++ b/client/components/payment-activity/payment-activity-data.tsx
@@ -94,6 +94,7 @@ const PaymentActivityData: React.FC = () => {
 					),
 					filter: 'advanced',
 				} ) }
+				tracksSource="total_payment_volume"
 				isLoading={ isLoading }
 			/>
 			<div className="wcpay-payment-data-highlights">
@@ -127,6 +128,7 @@ const PaymentActivityData: React.FC = () => {
 						filter: 'advanced',
 						type_is: 'charge',
 					} ) }
+					tracksSource="charges"
 					isLoading={ isLoading }
 				/>
 				<PaymentDataTile
@@ -146,6 +148,7 @@ const PaymentActivityData: React.FC = () => {
 							getDateRange().date_end
 						).format( 'YYYY-MM-DD' ),
 					} ) }
+					tracksSource="refunds"
 					isLoading={ isLoading }
 				/>
 				<PaymentDataTile
@@ -165,6 +168,7 @@ const PaymentActivityData: React.FC = () => {
 						).format( 'YYYY-MM-DD' ),
 						status_is: 'needs_response',
 					} ) }
+					tracksSource="disputes"
 					isLoading={ isLoading }
 				/>
 				<PaymentDataTile
diff --git a/client/components/payment-activity/payment-data-tile.tsx b/client/components/payment-activity/payment-data-tile.tsx
index 4ef8c0952fd..ce84cf686a3 100644
--- a/client/components/payment-activity/payment-data-tile.tsx
+++ b/client/components/payment-activity/payment-data-tile.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Link } from '@woocommerce/components';
+import { recordEvent } from 'wcpay/tracks';
 
 /**
  * Internal dependencies
@@ -41,6 +42,10 @@ interface PaymentDataTileProps {
 	 * Optional hover link to view report.
 	 */
 	reportLink?: string;
+	/**
+	 * The source of the event tracking.
+	 */
+	tracksSource?: string;
 }
 
 const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
@@ -51,7 +56,13 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
 	amount = 0,
 	isLoading = false,
 	reportLink,
+	tracksSource,
 } ) => {
+	const handleReportLinkClick = () => {
+		recordEvent( 'wcpay_overview_payment_activity_click', {
+			source: tracksSource,
+		} );
+	};
 	return (
 		<div className="wcpay-payment-data-highlights__item">
 			<p className="wcpay-payment-data-highlights__item__label">
@@ -71,7 +82,7 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
 					/>
 				</p>
 				{ reportLink && (
-					<Link href={ reportLink }>
+					<Link href={ reportLink } onClick={ handleReportLinkClick }>
 						{ __( 'View report', 'woocommerce_payments' ) }
 					</Link>
 				) }
diff --git a/client/tracks/event.d.ts b/client/tracks/event.d.ts
index 9f605763ac7..2bdd756102f 100644
--- a/client/tracks/event.d.ts
+++ b/client/tracks/event.d.ts
@@ -63,6 +63,7 @@ export type Event =
 	| 'wcpay_overview_deposits_view_history_click'
 	| 'wcpay_overview_deposits_change_schedule_click'
 	| 'wcpay_overview_task_click'
+	| 'wcpay_overview_payment_activity_click'
 	| 'wcpay_view_submitted_evidence_clicked'
 	| 'wcpay_settings_deposits_manage_in_stripe_click'
 	| 'wcpay_merchant_settings_file_upload_started'