Enrich Accept dispute tracks events with dispute identifiers

changelog/fix-woopmnt-6101-track-accept-dispute-button-clicks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Enrich 'Accept dispute' tracks events with dispute ID and reason so merchant intent can be distinguished from inaction.

client/disputes/index.tsx

@@ -220,7 +220,11 @@ export const DisputesList = (): JSX.Element => {
 		) => {
 			// Use client-side routing to avoid page refresh.
 			e.preventDefault();
-			recordEvent( 'wcpay_disputes_row_action_click' );
+			recordEvent( 'wcpay_disputes_row_action_click', {
+				dispute_id: dispute.dispute_id,
+				dispute_status: dispute.status,
+				dispute_reason: dispute.reason,
+			} );
 			const history = getHistory();
 			history.push( getDetailsURL( dispute.charge_id, 'transactions' ) );
 		};

client/disputes/new-evidence/index.tsx

@@ -141,6 +141,12 @@ export default ( { query }: { query: { id: string } } ) => {
 	} >( {} );
 	const [ showConfirmation, setShowConfirmation ] = useState( false );
 
+	const getDisputeTracksProperties = () => ( {
+		dispute_id: dispute.id,
+		dispute_status: dispute.status,
+		dispute_reason: dispute.reason,
+	} );
+
 	const isFeatureFlagEnabled =
 		wcpaySettings?.featureFlags?.isDisputeAdditionalEvidenceTypesEnabled ||
 		false;
@@ -512,7 +518,8 @@ export default ( { query }: { query: { id: string } } ) => {
 		recordEvent(
 			submit
 				? 'wcpay_dispute_submit_evidence_success'
-				: 'wcpay_dispute_save_evidence_success'
+				: 'wcpay_dispute_save_evidence_success',
+			getDisputeTracksProperties()
 		);
 
 		createSuccessNotice( message, {
@@ -531,7 +538,8 @@ export default ( { query }: { query: { id: string } } ) => {
 		recordEvent(
 			submit
 				? 'wcpay_dispute_submit_evidence_failed'
-				: 'wcpay_dispute_save_evidence_failed'
+				: 'wcpay_dispute_save_evidence_failed',
+			getDisputeTracksProperties()
 		);
 
 		const message = submit
@@ -561,7 +569,8 @@ export default ( { query }: { query: { id: string } } ) => {
 			recordEvent(
 				submit
 					? 'wcpay_dispute_submit_evidence_clicked'
-					: 'wcpay_dispute_save_evidence_clicked'
+					: 'wcpay_dispute_save_evidence_clicked',
+				getDisputeTracksProperties()
 			);
 
 			// Build base evidence object
@@ -826,7 +835,10 @@ export default ( { query }: { query: { id: string } } ) => {
 	};
 
 	const updateProductType = ( newType: string ) => {
-		recordEvent( 'wcpay_dispute_product_selected', { selection: newType } );
+		recordEvent( 'wcpay_dispute_product_selected', {
+			...getDisputeTracksProperties(),
+			selection: newType,
+		} );
 		setProductType( newType );
 		// Reset the manual edit flag so the cover letter regenerates with the new product type
 		// This ensures attachment labels are updated to match the selected product type
@@ -903,6 +915,7 @@ export default ( { query }: { query: { id: string } } ) => {
 		}
 
 		recordEvent( 'wcpay_dispute_file_upload_started', {
+			...getDisputeTracksProperties(),
 			type: key,
 		} );
 
@@ -939,10 +952,12 @@ export default ( { query }: { query: { id: string } } ) => {
 			} ) );
 
 			recordEvent( 'wcpay_dispute_file_upload_success', {
+				...getDisputeTracksProperties(),
 				type: key,
 			} );
 		} catch ( err ) {
 			recordEvent( 'wcpay_dispute_file_upload_failed', {
+				...getDisputeTracksProperties(),
 				message: err instanceof Error ? err.message : String( err ),
 			} );
 

client/payment-details/dispute-details/__tests__/dispute-awaiting-response-details.test.tsx

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -13,6 +13,7 @@ import DisputeAwaitingResponseDetails from '../dispute-awaiting-response-details
 import { useDisputeAccept } from 'wcpay/data';
 import type { ChargeBillingDetails, ChargeDispute } from 'wcpay/types/charges';
 import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
+import { recordEvent } from 'tracks';
 
 const mockDisputeDoAccept = jest.fn();
 
@@ -385,6 +386,36 @@ describe( 'DisputeAwaitingResponseDetails - Visa Compliance', () => {
 		expect(
 			screen.getByRole( 'heading', { name: /Accept the dispute\?/i } )
 		).toBeInTheDocument();
+
+		// Opening the modal should fire a tracks event identifying the dispute.
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'wcpay_dispute_accept_modal_view',
+			{
+				dispute_id: dispute.id,
+				dispute_status: dispute.status,
+				dispute_reason: dispute.reason,
+				on_page: 'transaction_details',
+			}
+		);
+
+		// Confirm acceptance from within the modal.
+		const confirmButton = within( screen.getByRole( 'dialog' ) ).getByRole(
+			'button',
+			{ name: /Accept dispute/i }
+		);
+		await userEvent.click( confirmButton );
+
+		// Confirming should fire a separate tracks event with matching properties,
+		// so drop-off between open and confirm can be measured.
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'wcpay_dispute_accept_click',
+			{
+				dispute_id: dispute.id,
+				dispute_status: dispute.status,
+				dispute_reason: dispute.reason,
+				on_page: 'transaction_details',
+			}
+		);
 	} );
 
 	test( 'does not render checkbox for non-Visa compliance disputes', () => {
@@ -626,4 +657,55 @@ describe( 'DisputeAwaitingResponseDetails - Klarna Inquiry', () => {
 
 		expect( screen.queryByRole( 'checkbox' ) ).not.toBeInTheDocument();
 	} );
+
+	test( 'fires inquiry refund modal tracks event with dispute identifiers', async () => {
+		const dispute: ChargeDispute = {
+			...getBaseDispute(),
+			reason: 'credit_not_processed' as const,
+			status: 'warning_needs_response' as const,
+			enhanced_eligibility_types: [],
+		};
+		const customer = getBaseBillingDetails();
+
+		renderWithContext(
+			<DisputeAwaitingResponseDetails
+				dispute={ dispute }
+				customer={ customer }
+				chargeCreated={ 1693453017 }
+				orderUrl=""
+				paymentMethod="klarna"
+				bankName={ null }
+			/>
+		);
+
+		await userEvent.click(
+			screen.getByRole( 'button', { name: /Issue refund/i } )
+		);
+
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'wcpay_dispute_inquiry_refund_modal_view',
+			{
+				dispute_id: dispute.id,
+				dispute_status: dispute.status,
+				dispute_reason: dispute.reason,
+				on_page: 'transaction_details',
+			}
+		);
+
+		await userEvent.click(
+			within( screen.getByRole( 'dialog' ) ).getByRole( 'button', {
+				name: /View order to issue refund/i,
+			} )
+		);
+
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'wcpay_dispute_inquiry_refund_click',
+			{
+				dispute_id: dispute.id,
+				dispute_status: dispute.status,
+				dispute_reason: dispute.reason,
+				on_page: 'transaction_details',
+			}
+		);
+	} );
 } );

client/payment-details/dispute-details/dispute-awaiting-response-details.tsx

@@ -276,6 +276,13 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		);
 	};
 
+	const disputeTracksProperties = {
+		dispute_id: dispute.id,
+		dispute_status: dispute.status,
+		dispute_reason: dispute.reason,
+		on_page: 'transaction_details',
+	};
+
 	const disputeAcceptAction = getAcceptDisputeProps( {
 		dispute,
 		isDisputeAcceptRequestPending,
@@ -362,10 +369,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 					<ExternalLink
 						href={ getLearnMoreDocsUrl() }
 						onClick={ () => {
-							recordEvent( 'wcpay_dispute_help_link_clicked', {
-								dispute_status: dispute.status,
-								on_page: 'transaction_details',
-							} );
+							recordEvent(
+								'wcpay_dispute_help_link_clicked',
+								disputeTracksProperties
+							);
 						} }
 					>
 						{ getHelpLinkText() }
@@ -412,10 +419,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 									onClick={ () => {
 										recordEvent(
 											'wcpay_dispute_challenge_clicked',
-											{
-												dispute_status: dispute.status,
-												on_page: 'transaction_details',
-											}
+											disputeTracksProperties
 										);
 									} }
 									__next40pxDefaultSize
@@ -437,10 +441,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							onClick={ () => {
 								recordEvent(
 									disputeAcceptAction.acceptButtonTracksEvent,
-									{
-										dispute_status: dispute.status,
-										on_page: 'transaction_details',
-									}
+									disputeTracksProperties
 								);
 								setModalOpen( true );
 							} }
@@ -539,12 +540,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 										onClick={ () => {
 											recordEvent(
 												disputeAcceptAction.modalButtonTracksEvent,
-												{
-													dispute_status:
-														dispute.status,
-													on_page:
-														'transaction_details',
-												}
+												disputeTracksProperties
 											);
 
 											/**

client/payment-details/dispute-details/dispute-resolution-footer.tsx

@@ -26,6 +26,15 @@ import {
 import './style.scss';
 import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
 
+const getDisputeTracksProperties = (
+	dispute: Pick< Dispute, 'id' | 'status' | 'reason' >
+) => ( {
+	dispute_id: dispute.id,
+	dispute_status: dispute.status,
+	dispute_reason: dispute.reason,
+	on_page: 'transaction_details',
+} );
+
 const DisputeUnderReviewFooter: React.FC< {
 	dispute: Pick<
 		Dispute,
@@ -100,10 +109,7 @@ const DisputeUnderReviewFooter: React.FC< {
 							onClick={ () => {
 								recordEvent(
 									'wcpay_view_submitted_evidence_clicked',
-									{
-										dispute_status: dispute.status,
-										on_page: 'transaction_details',
-									}
+									getDisputeTracksProperties( dispute )
 								);
 							} }
 						>
@@ -193,10 +199,7 @@ const DisputeWonFooter: React.FC< {
 							onClick={ () => {
 								recordEvent(
 									'wcpay_view_submitted_evidence_clicked',
-									{
-										dispute_status: dispute.status,
-										on_page: 'transaction_details',
-									}
+									getDisputeTracksProperties( dispute )
 								);
 							} }
 						>
@@ -323,10 +326,7 @@ const DisputeLostFooter: React.FC< {
 								onClick={ () => {
 									recordEvent(
 										'wcpay_view_submitted_evidence_clicked',
-										{
-											dispute_status: dispute.status,
-											on_page: 'transaction_details',
-										}
+										getDisputeTracksProperties( dispute )
 									);
 								} }
 							>
@@ -344,7 +344,7 @@ const DisputeLostFooter: React.FC< {
 };
 
 const InquiryUnderReviewFooter: React.FC< {
-	dispute: Pick< Dispute, 'id' | 'metadata' | 'status' >;
+	dispute: Pick< Dispute, 'id' | 'metadata' | 'status' | 'reason' >;
 	bankName: string | null;
 } > = ( { dispute, bankName } ) => {
 	const submissionDateFormatted = dispute.metadata.__evidence_submitted_at
@@ -397,10 +397,7 @@ const InquiryUnderReviewFooter: React.FC< {
 							onClick={ () => {
 								recordEvent(
 									'wcpay_view_submitted_evidence_clicked',
-									{
-										dispute_status: dispute.status,
-										on_page: 'transaction_details',
-									}
+									getDisputeTracksProperties( dispute )
 								);
 							} }
 						>
@@ -417,7 +414,7 @@ const InquiryUnderReviewFooter: React.FC< {
 };
 
 const InquiryClosedFooter: React.FC< {
-	dispute: Pick< Dispute, 'id' | 'metadata' | 'status' >;
+	dispute: Pick< Dispute, 'id' | 'metadata' | 'status' | 'reason' >;
 } > = ( { dispute } ) => {
 	const isSubmitted = !! dispute.metadata.__evidence_submitted_at;
 	const closedDateFormatted = dispute.metadata.__dispute_closed_at
@@ -460,10 +457,7 @@ const InquiryClosedFooter: React.FC< {
 								onClick={ () => {
 									recordEvent(
 										'wcpay_view_submitted_evidence_clicked',
-										{
-											dispute_status: dispute.status,
-											on_page: 'transaction_details',
-										}
+										getDisputeTracksProperties( dispute )
 									);
 								} }
 							>