From d8353116164d7b74b1c650c0daeac68d4a9992b6 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <malith.senaweera@automattic.com>
Date: Thu, 14 Dec 2023 13:31:15 -0600
Subject: [PATCH 1/2] Track payment request button load

---
 .../blocks/payment-request-express.js         | 38 ++++++++++++++++++-
 client/payment-request/index.js               | 18 +++++++++
 client/tracks/index.js                        |  2 +
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/client/payment-request/blocks/payment-request-express.js b/client/payment-request/blocks/payment-request-express.js
index a44cc527b16..01e32444050 100644
--- a/client/payment-request/blocks/payment-request-express.js
+++ b/client/payment-request/blocks/payment-request-express.js
@@ -1,3 +1,5 @@
+/* global wcpayPaymentRequestParams */
+
 /**
  * External dependencies
  */
@@ -9,6 +11,7 @@ import { Elements, PaymentRequestButtonElement } from '@stripe/react-stripe-js';
 import { useInitialization } from './use-initialization';
 import { getPaymentRequestData } from '../utils';
 import wcpayTracks from 'tracks';
+import { useEffect, useState } from 'react';
 
 /**
  * PaymentRequestExpressComponent
@@ -24,6 +27,7 @@ const PaymentRequestExpressComponent = ( {
 	setExpressPaymentError,
 	onClick,
 	onClose,
+	onPaymentRequestAvailable,
 } ) => {
 	// TODO: Don't display custom button when result.requestType
 	// is `apple_pay` or `google_pay`.
@@ -68,6 +72,7 @@ const PaymentRequestExpressComponent = ( {
 		} else if ( result.googlePay ) {
 			paymentRequestType = 'google_pay';
 		}
+		onPaymentRequestAvailable( paymentRequestType );
 	} );
 
 	const onPaymentRequestButtonClick = () => {
@@ -80,7 +85,9 @@ const PaymentRequestExpressComponent = ( {
 
 		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
 			const event = paymentRequestTypeEvents[ paymentRequestType ];
-			wcpayTracks.recordUserEvent( event, { source: 'checkout' } );
+			wcpayTracks.recordUserEvent( event, {
+				source: wcpayPaymentRequestParams?.button_context,
+			} );
 		}
 	};
 
@@ -104,9 +111,36 @@ const PaymentRequestExpressComponent = ( {
  */
 export const PaymentRequestExpress = ( props ) => {
 	const { stripe } = props;
+	const [ paymentRequestType, setPaymentRequestType ] = useState( false );
+
+	const handlePaymentRequestAvailability = ( paymentType ) => {
+		setPaymentRequestType( paymentType );
+	};
+
+	useEffect( () => {
+		if ( paymentRequestType ) {
+			const paymentRequestTypeEvents = {
+				google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+				apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+			};
+
+			if (
+				paymentRequestTypeEvents.hasOwnProperty( paymentRequestType )
+			) {
+				const event = paymentRequestTypeEvents[ paymentRequestType ];
+				wcpayTracks.recordUserEvent( event, {
+					source: wcpayPaymentRequestParams?.button_context,
+				} );
+			}
+		}
+	}, [ paymentRequestType ] );
+
 	return (
 		<Elements stripe={ stripe }>
-			<PaymentRequestExpressComponent { ...props } />
+			<PaymentRequestExpressComponent
+				{ ...props }
+				onPaymentRequestAvailable={ handlePaymentRequestAvailability }
+			/>
 		</Elements>
 	);
 };
diff --git a/client/payment-request/index.js b/client/payment-request/index.js
index 9578b42517c..fc4b6f6853a 100644
--- a/client/payment-request/index.js
+++ b/client/payment-request/index.js
@@ -4,6 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { doAction } from '@wordpress/hooks';
+import { debounce } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -65,6 +66,19 @@ jQuery( ( $ ) => {
 		}
 	};
 
+	// Track the payment request button load event.
+	const trackPaymentRequestButtonLoad = debounce( ( source ) => {
+		const paymentRequestTypeEvents = {
+			google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+			apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+		};
+
+		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
+			const event = paymentRequestTypeEvents[ paymentRequestType ];
+			wcpayTracks.recordUserEvent( event, { source } );
+		}
+	}, 1000 );
+
 	/**
 	 * Object to handle Stripe payment forms.
 	 */
@@ -236,6 +250,10 @@ jQuery( ( $ ) => {
 					paymentRequestType: paymentRequestType,
 				} );
 
+				trackPaymentRequestButtonLoad(
+					wcpayPaymentRequestParams.button_context
+				);
+
 				wcpayPaymentRequest.attachPaymentRequestButtonEventListeners(
 					prButton,
 					paymentRequest
diff --git a/client/tracks/index.js b/client/tracks/index.js
index c02615f781d..0a840720b04 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -61,6 +61,7 @@ function recordUserEvent( eventName, eventProperties, isLegacy = false ) {
 
 const events = {
 	APPLEPAY_BUTTON_CLICK: 'applepay_button_click',
+	APPLEPAY_BUTTON_LOAD: 'applepay_button_load',
 	CONNECT_ACCOUNT_CLICKED: 'wcpay_connect_account_clicked',
 	CONNECT_ACCOUNT_VIEW: 'page_view',
 	CONNECT_ACCOUNT_LEARN_MORE: 'wcpay_welcome_learn_more',
@@ -76,6 +77,7 @@ const events = {
 	DISPUTE_INQUIRY_REFUND_MODAL_VIEW:
 		'wcpay_dispute_inquiry_refund_modal_view',
 	GOOGLEPAY_BUTTON_CLICK: 'gpay_button_click',
+	GOOGLEPAY_BUTTON_LOAD: 'gpay_button_load',
 	OVERVIEW_BALANCES_CURRENCY_CLICK:
 		'wcpay_overview_balances_currency_tab_click',
 	OVERVIEW_DEPOSITS_VIEW_HISTORY_CLICK:

From b1278cdc6944531724c5f1c04c2dddc5d7c8232f Mon Sep 17 00:00:00 2001
From: Malith Senaweera <malith.senaweera@automattic.com>
Date: Thu, 14 Dec 2023 13:34:26 -0600
Subject: [PATCH 2/2] Add changelog entry

---
 changelog/add-prb-load-tracks | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelog/add-prb-load-tracks

diff --git a/changelog/add-prb-load-tracks b/changelog/add-prb-load-tracks
new file mode 100644
index 00000000000..5109e5ce0ca
--- /dev/null
+++ b/changelog/add-prb-load-tracks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Track payment-request-button loads