Create a Tracks event for tracking CSV exports of Transactions, Dispu…

…tes and Payouts. (#10411)

Co-authored-by: Nagesh Pai <[email protected]>

changelog/update-10172-csv-export-tracks-event

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Add a single tracks event - wcadmin_wcpay_csv_export_click to track export requests of transactions, payouts and disputes, using the new async export method. See - https://github.com/Automattic/woocommerce-payments/issues/9969
+
+

client/deposits/list/index.tsx

@@ -209,10 +209,12 @@ export const DepositsList = (): JSX.Element => {
 
 	const downloadable = !! rows.length;
 
-	const onDownload = async () => {
-		recordEvent( 'wcpay_deposits_download', {
-			exported_deposits: rows.length,
-			total_deposits: depositsSummary.count,
+	const { path } = getQuery();
+	const onExport = async () => {
+		recordEvent( 'wcpay_csv_export_click', {
+			row_type: 'payouts',
+			source: path,
+			exported_row_count: depositsSummary.count,
 		} );
 
 		const userEmail = wcpaySettings.currentUserEmail;
@@ -302,7 +304,7 @@ export const DepositsList = (): JSX.Element => {
 							key="download"
 							isDisabled={ isLoading || isExportInProgress }
 							isBusy={ isExportInProgress }
-							onClick={ onDownload }
+							onClick={ onExport }
 						/>
 					),
 				] }

client/disputes/index.tsx

@@ -345,16 +345,17 @@ export const DisputesList = (): JSX.Element => {
 	const downloadable = !! rows.length;
 
 	const onDownload = async () => {
-		recordEvent( 'wcpay_disputes_download', {
-			exported_disputes: rows.length,
-			total_disputes: disputesSummary.count,
-		} );
-
 		// We destructure page and path to get the right params.
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { page, path, ...params } = getQuery();
 		const userEmail = wcpaySettings.currentUserEmail;
 
+		recordEvent( 'wcpay_csv_export_click', {
+			row_type: 'disputes',
+			source: path,
+			exported_row_count: disputesSummary.count,
+		} );
+
 		const userLocale = wcpaySettings.userLocale.code;
 		const {
 			date_before: dateBefore,

client/tracks/event.d.ts

@@ -14,12 +14,11 @@ export type Event =
 	| 'wcpay_welcome_learn_more'
 	| 'wcpay_stripe_connected'
 	| 'wcpay_connect_account_kyc_modal_opened'
+	| 'wcpay_csv_export_click'
 	| 'wcpay_deposits_row_click'
-	| 'wcpay_deposits_download'
 	| 'wcpay_disputes_row_action_click'
 	| 'wcpay_dispute_challenge_clicked'
 	| 'wcpay_dispute_accept_click'
-	| 'wcpay_disputes_download'
 	| 'wcpay_dispute_accept_modal_view'
 	| 'wcpay_dispute_product_selected'
 	| 'wcpay_dispute_inquiry_refund_click'
@@ -86,7 +85,6 @@ export type Event =
 	| 'wcpay_subscriptions_account_not_connected_product_modal_view'
 	| 'wcpay_subscriptions_account_not_connected_product_modal_finish_setup'
 	| 'wcpay_subscriptions_account_not_connected_product_modal_dismiss'
-	| 'wcpay_transactions_download_csv_click'
 	| 'payments_transactions_details_refund_modal_close'
 	| 'payments_transactions_details_refund_modal_open'
 	| 'payments_transactions_details_capture_charge_button_click'

client/transactions/list/index.tsx

@@ -582,11 +582,12 @@ export const TransactionsList = (
 
 	const downloadable = !! rows.length;
 
-	const onDownload = async () => {
-		recordEvent( 'wcpay_transactions_download_csv_click', {
-			location: props.depositId ? 'deposit_details' : 'transactions',
-			exported_transactions: rows.length,
-			total_transactions: transactionsSummary.count,
+	const { path } = getQuery();
+	const onExport = async () => {
+		recordEvent( 'wcpay_csv_export_click', {
+			row_type: 'transactions',
+			source: path,
+			exported_row_count: transactionsSummary.count,
 		} );
 
 		const userEmail = wcpaySettings.currentUserEmail;
@@ -807,7 +808,7 @@ export const TransactionsList = (
 							key="download"
 							isDisabled={ isLoading || isExportInProgress }
 							isBusy={ isExportInProgress }
-							onClick={ onDownload }
+							onClick={ onExport }
 						/>
 					),
 				] }