From ad3fc2c1a802810f2aa6cfb202be7a50f7d4e1d2 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Mon, 22 Apr 2024 19:38:08 +0530 Subject: [PATCH 01/10] Add link click handler to tile component --- client/components/payment-activity/payment-data-tile.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/components/payment-activity/payment-data-tile.tsx b/client/components/payment-activity/payment-data-tile.tsx index 68a0cf7b01f..6bcc7474c6b 100644 --- a/client/components/payment-activity/payment-data-tile.tsx +++ b/client/components/payment-activity/payment-data-tile.tsx @@ -12,6 +12,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 +42,10 @@ interface PaymentDataTileProps { * Optional hover link to view report. */ reportLink?: string; + /** + * Optional click handler for the tile. + */ + handleReportLinkClick?: () => void; } const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { @@ -51,6 +56,7 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { amount = 0, isLoading = false, reportLink, + handleReportLinkClick, } ) => { return (
@@ -71,7 +77,7 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { />

{ reportLink && ( - + { __( 'View report', 'woocommerce_payments' ) } ) } From 7394807494b50ba36633ffa45268c40553f46225 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Mon, 22 Apr 2024 19:38:40 +0530 Subject: [PATCH 02/10] Add track events to each link --- .../payment-activity-data.tsx | 25 +++++++++++++++++++ client/tracks/event.d.ts | 1 + 2 files changed, 26 insertions(+) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 5816c6fc540..93e96fd9ad8 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -16,6 +16,7 @@ import { ClickTooltip } from '../tooltip'; import { usePaymentActivityData } from 'wcpay/data'; import { getAdminUrl } from 'wcpay/utils'; import type { DateRange } from './types'; +import { recordEvent } from 'wcpay/tracks'; import './style.scss'; /** @@ -83,6 +84,14 @@ const PaymentActivityData: React.FC = () => { /> } amount={ totalPaymentVolume } + handleReportLinkClick={ () => { + recordEvent( + 'wcpay_overview_total_payment_volume_view_report_clicks', + { + source: 'total_payment_volume_tile_view_report', + } + ); + } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', @@ -121,6 +130,14 @@ const PaymentActivityData: React.FC = () => { /> } amount={ charges } + handleReportLinkClick={ () => { + recordEvent( + 'wcpay_overview_charges_view_report_clicks', + { + source: 'charges_tile_view_report', + } + ); + } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', @@ -153,6 +170,14 @@ const PaymentActivityData: React.FC = () => { label={ __( 'Disputes', 'woocommerce-payments' ) } currencyCode={ storeCurrency } amount={ disputes } + handleReportLinkClick={ () => { + recordEvent( + 'wcpay_overview_disputes_view_report_clicks', + { + source: 'disputes_tile_view_report', + } + ); + } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/disputes', diff --git a/client/tracks/event.d.ts b/client/tracks/event.d.ts index 9f605763ac7..f0f845983b7 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_total_payment_volume_view_report_clicks' | 'wcpay_view_submitted_evidence_clicked' | 'wcpay_settings_deposits_manage_in_stripe_click' | 'wcpay_merchant_settings_file_upload_started' From 9293aff91ac18c998e5975ed81bee3e31f0636f3 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Mon, 22 Apr 2024 19:49:42 +0530 Subject: [PATCH 03/10] Update event types --- .../components/payment-activity/payment-activity-data.tsx | 8 ++++++++ client/tracks/event.d.ts | 3 +++ 2 files changed, 11 insertions(+) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 93e96fd9ad8..62963ef4c5d 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -151,6 +151,14 @@ const PaymentActivityData: React.FC = () => { label={ __( 'Refunds', 'woocommerce-payments' ) } currencyCode={ storeCurrency } amount={ refunds } + handleReportLinkClick={ () => { + recordEvent( + 'wcpay_overview_refunds_view_report_clicks', + { + source: 'refunds_tile_view_report', + } + ); + } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', diff --git a/client/tracks/event.d.ts b/client/tracks/event.d.ts index f0f845983b7..ba60513e8b2 100644 --- a/client/tracks/event.d.ts +++ b/client/tracks/event.d.ts @@ -64,6 +64,9 @@ export type Event = | 'wcpay_overview_deposits_change_schedule_click' | 'wcpay_overview_task_click' | 'wcpay_overview_total_payment_volume_view_report_clicks' + | 'wcpay_overview_charges_view_report_clicks' + | 'wcpay_overview_refunds_tile_view_report' + | 'wcpay_overview_disputes_view_report_clicks' | 'wcpay_view_submitted_evidence_clicked' | 'wcpay_settings_deposits_manage_in_stripe_click' | 'wcpay_merchant_settings_file_upload_started' From 4358ef914bb8af1ce9cdad87ebfb35a47340c489 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Mon, 22 Apr 2024 20:03:17 +0530 Subject: [PATCH 04/10] Add changelog --- changelog/add-8686-track-events-payment-activity-widget | 4 ++++ 1 file changed, 4 insertions(+) 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..775d93a42c7 --- /dev/null +++ b/changelog/add-8686-track-events-payment-activity-widget @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Comment: Behind a feature flag. The PR adds track events for clicks on `View report` links on Payment activity widget From 21d36a0c1a3b45693adaac6df659cfd427c0255a Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Tue, 23 Apr 2024 16:37:53 +0530 Subject: [PATCH 05/10] Amend event names --- .../payment-activity/payment-activity-data.tsx | 17 +++++++++-------- client/tracks/event.d.ts | 8 ++++---- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 62963ef4c5d..c1839109ddc 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -86,9 +86,10 @@ const PaymentActivityData: React.FC = () => { amount={ totalPaymentVolume } handleReportLinkClick={ () => { recordEvent( - 'wcpay_overview_total_payment_volume_view_report_clicks', + 'wcpay_overview_payment_activity_total_payment_volume_click', { - source: 'total_payment_volume_tile_view_report', + source: + 'total_payment_volume_tile_view_report_link', } ); } } @@ -132,9 +133,9 @@ const PaymentActivityData: React.FC = () => { amount={ charges } handleReportLinkClick={ () => { recordEvent( - 'wcpay_overview_charges_view_report_clicks', + 'wcpay_overview_payment_activity_charges_click', { - source: 'charges_tile_view_report', + source: 'charges_tile_view_report_link', } ); } } @@ -153,9 +154,9 @@ const PaymentActivityData: React.FC = () => { amount={ refunds } handleReportLinkClick={ () => { recordEvent( - 'wcpay_overview_refunds_view_report_clicks', + 'wcpay_overview_payment_activity_refunds_click', { - source: 'refunds_tile_view_report', + source: 'refunds_tile_view_report_link', } ); } } @@ -180,9 +181,9 @@ const PaymentActivityData: React.FC = () => { amount={ disputes } handleReportLinkClick={ () => { recordEvent( - 'wcpay_overview_disputes_view_report_clicks', + 'wcpay_overview_payment_activity_disputes_click', { - source: 'disputes_tile_view_report', + source: 'disputes_tile_view_report_link', } ); } } diff --git a/client/tracks/event.d.ts b/client/tracks/event.d.ts index ba60513e8b2..606d5ddb2e9 100644 --- a/client/tracks/event.d.ts +++ b/client/tracks/event.d.ts @@ -63,10 +63,10 @@ export type Event = | 'wcpay_overview_deposits_view_history_click' | 'wcpay_overview_deposits_change_schedule_click' | 'wcpay_overview_task_click' - | 'wcpay_overview_total_payment_volume_view_report_clicks' - | 'wcpay_overview_charges_view_report_clicks' - | 'wcpay_overview_refunds_tile_view_report' - | 'wcpay_overview_disputes_view_report_clicks' + | 'wcpay_overview_payment_activity_total_payment_volume_click' + | 'wcpay_overview_payment_activity_charges_click' + | 'wcpay_overview_payment_activity_refunds_click' + | 'wcpay_overview_payment_activity_disputes_click' | 'wcpay_view_submitted_evidence_clicked' | 'wcpay_settings_deposits_manage_in_stripe_click' | 'wcpay_merchant_settings_file_upload_started' From 922feb870c96481377fef99f8c7594e18f515c4a Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Wed, 24 Apr 2024 12:51:10 +0530 Subject: [PATCH 06/10] Tweak comment --- changelog/add-8686-track-events-payment-activity-widget | 1 - 1 file changed, 1 deletion(-) diff --git a/changelog/add-8686-track-events-payment-activity-widget b/changelog/add-8686-track-events-payment-activity-widget index 775d93a42c7..40836bd123f 100644 --- a/changelog/add-8686-track-events-payment-activity-widget +++ b/changelog/add-8686-track-events-payment-activity-widget @@ -1,4 +1,3 @@ Significance: minor Type: add - Comment: Behind a feature flag. The PR adds track events for clicks on `View report` links on Payment activity widget From bf77f8348285f6d3702fdcbf11317a6e6275fe63 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Wed, 24 Apr 2024 13:15:58 +0530 Subject: [PATCH 07/10] Update changelog to a comment --- changelog/add-8686-track-events-payment-activity-widget | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/changelog/add-8686-track-events-payment-activity-widget b/changelog/add-8686-track-events-payment-activity-widget index 40836bd123f..f5ddfd553c0 100644 --- a/changelog/add-8686-track-events-payment-activity-widget +++ b/changelog/add-8686-track-events-payment-activity-widget @@ -1,3 +1,5 @@ -Significance: minor +Significance: patch Type: add -Comment: Behind a feature flag. The PR adds track events for clicks on `View report` links on Payment activity widget +Comment: The PR adds track events for clicks on `View report` links on the Payment activity widget. Changes currently behind a feature flag. + + From 5069046beb7f7e2fda6653914949f41e17feac4b Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 26 Apr 2024 17:59:55 +0530 Subject: [PATCH 08/10] Refactor track event handler --- .../payment-activity-data.tsx | 34 ------------------- .../payment-activity/payment-data-tile.tsx | 11 +++--- 2 files changed, 6 insertions(+), 39 deletions(-) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index c1839109ddc..5816c6fc540 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -16,7 +16,6 @@ import { ClickTooltip } from '../tooltip'; import { usePaymentActivityData } from 'wcpay/data'; import { getAdminUrl } from 'wcpay/utils'; import type { DateRange } from './types'; -import { recordEvent } from 'wcpay/tracks'; import './style.scss'; /** @@ -84,15 +83,6 @@ const PaymentActivityData: React.FC = () => { /> } amount={ totalPaymentVolume } - handleReportLinkClick={ () => { - recordEvent( - 'wcpay_overview_payment_activity_total_payment_volume_click', - { - source: - 'total_payment_volume_tile_view_report_link', - } - ); - } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', @@ -131,14 +121,6 @@ const PaymentActivityData: React.FC = () => { /> } amount={ charges } - handleReportLinkClick={ () => { - recordEvent( - 'wcpay_overview_payment_activity_charges_click', - { - source: 'charges_tile_view_report_link', - } - ); - } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', @@ -152,14 +134,6 @@ const PaymentActivityData: React.FC = () => { label={ __( 'Refunds', 'woocommerce-payments' ) } currencyCode={ storeCurrency } amount={ refunds } - handleReportLinkClick={ () => { - recordEvent( - 'wcpay_overview_payment_activity_refunds_click', - { - source: 'refunds_tile_view_report_link', - } - ); - } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/transactions', @@ -179,14 +153,6 @@ const PaymentActivityData: React.FC = () => { label={ __( 'Disputes', 'woocommerce-payments' ) } currencyCode={ storeCurrency } amount={ disputes } - handleReportLinkClick={ () => { - recordEvent( - 'wcpay_overview_payment_activity_disputes_click', - { - source: 'disputes_tile_view_report_link', - } - ); - } } reportLink={ getAdminUrl( { page: 'wc-admin', path: '/payments/disputes', diff --git a/client/components/payment-activity/payment-data-tile.tsx b/client/components/payment-activity/payment-data-tile.tsx index 6bcc7474c6b..2558243da66 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 @@ -42,10 +43,6 @@ interface PaymentDataTileProps { * Optional hover link to view report. */ reportLink?: string; - /** - * Optional click handler for the tile. - */ - handleReportLinkClick?: () => void; } const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { @@ -56,8 +53,12 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { amount = 0, isLoading = false, reportLink, - handleReportLinkClick, } ) => { + const handleReportLinkClick = () => { + recordEvent( 'wcpay_overview_payment_activity_click', { + source: label.toLowerCase().replace( / /g, '_' ), + } ); + }; return (

From 3d5a2d134bfd02445fd85829b0a8e03a99cecf78 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 26 Apr 2024 19:15:07 +0530 Subject: [PATCH 09/10] Update event type --- client/tracks/event.d.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/tracks/event.d.ts b/client/tracks/event.d.ts index 606d5ddb2e9..2bdd756102f 100644 --- a/client/tracks/event.d.ts +++ b/client/tracks/event.d.ts @@ -63,10 +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_total_payment_volume_click' - | 'wcpay_overview_payment_activity_charges_click' - | 'wcpay_overview_payment_activity_refunds_click' - | 'wcpay_overview_payment_activity_disputes_click' + | 'wcpay_overview_payment_activity_click' | 'wcpay_view_submitted_evidence_clicked' | 'wcpay_settings_deposits_manage_in_stripe_click' | 'wcpay_merchant_settings_file_upload_started' From 5c5da5b5914e6fb3c4b861d4636884162a29156b Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Mon, 29 Apr 2024 11:55:56 +0530 Subject: [PATCH 10/10] Use an explicit prop for tracksSource --- .../components/payment-activity/payment-activity-data.tsx | 4 ++++ client/components/payment-activity/payment-data-tile.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 5816c6fc540..02ad1ae9932 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 } />

@@ -127,6 +128,7 @@ const PaymentActivityData: React.FC = () => { filter: 'advanced', type_is: 'charge', } ) } + tracksSource="charges" isLoading={ isLoading } /> { getDateRange().date_end ).format( 'YYYY-MM-DD' ), } ) } + tracksSource="refunds" isLoading={ isLoading } /> { ).format( 'YYYY-MM-DD' ), status_is: 'needs_response', } ) } + tracksSource="disputes" isLoading={ isLoading } /> = ( { @@ -53,10 +57,11 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( { amount = 0, isLoading = false, reportLink, + tracksSource, } ) => { const handleReportLinkClick = () => { recordEvent( 'wcpay_overview_payment_activity_click', { - source: label.toLowerCase().replace( / /g, '_' ), + source: tracksSource, } ); }; return (