Reporting: Track events for View report links on Payment activity w…

…idget (#8687) Co-authored-by: Nagesh Pai <[email protected]> Co-authored-by: Jessy Pappachan <[email protected]> Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Shendy <[email protected]>
Automattic · May 1, 2024 · b4d4a0b · b4d4a0b
1 parent 0d5b2e1
commit b4d4a0b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/changelog/add-8686-track-events-payment-activity-widget 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
@@ -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
@@ -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
@@ -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'