Reporting: Track events for View report links on Payment activity widget

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.
+
+

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

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
@@ -12,6 +13,7 @@ import { Link } from '@woocommerce/components';
 import { formatCurrency } from 'wcpay/utils/currency';
 import Loadable from '../loadable';
 import './style.scss';
+
 interface PaymentDataTileProps {
 	/**
 	 * The id for the tile, can be used for CSS styling.
@@ -41,6 +43,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 +57,13 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
 	amount = 0,
 	isLoading = false,
 	reportLink,
+	tracksSource,
 } ) => {
+	const handleReportLinkClick = () => {
+		recordEvent( 'wcpay_overview_payment_activity_click', {
+			source: tracksSource,
+		} );
+	};
 	return (
 		<div id={ id } className="wcpay-payment-data-highlights__item">
 			<p className="wcpay-payment-data-highlights__item__label">
@@ -71,7 +83,7 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
 					/>
 				</p>
 				{ reportLink && (
-					<Link href={ reportLink }>
+					<Link href={ reportLink } onClick={ handleReportLinkClick }>
 						{ __( 'View report', 'woocommerce_payments' ) }
 					</Link>
 				) }

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'