From 858ad7eaaeb57ff5da45e4a23d3833379e3c5584 Mon Sep 17 00:00:00 2001
From: Rafael Zaleski <rafaelzaleski@users.noreply.github.com>
Date: Thu, 27 Jun 2024 17:57:44 -0300
Subject: [PATCH] Add Telemetry Events to ECE (#8993)

---
 changelog/add-8948-ece-telemetry-events       |  4 +++
 .../components/express-checkout-component.js  |  2 ++
 .../blocks/hooks/use-express-checkout.js      | 23 +++++++++---
 client/express-checkout/event-handlers.js     | 29 ++++++++++++++-
 client/express-checkout/index.js              |  5 +++
 client/express-checkout/tracking.js           | 36 +++++++++++++++++++
 6 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 changelog/add-8948-ece-telemetry-events
 create mode 100644 client/express-checkout/tracking.js

diff --git a/changelog/add-8948-ece-telemetry-events b/changelog/add-8948-ece-telemetry-events
new file mode 100644
index 00000000000..51a4cc03c24
--- /dev/null
+++ b/changelog/add-8948-ece-telemetry-events
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add telemetry events from PRBs into ECE.
diff --git a/client/express-checkout/blocks/components/express-checkout-component.js b/client/express-checkout/blocks/components/express-checkout-component.js
index 3c53945c2a0..58ea5d96dfc 100644
--- a/client/express-checkout/blocks/components/express-checkout-component.js
+++ b/client/express-checkout/blocks/components/express-checkout-component.js
@@ -27,6 +27,7 @@ const ExpressCheckoutComponent = ( {
 		buttonOptions,
 		onButtonClick,
 		onConfirm,
+		onReady,
 		onCancel,
 		elements,
 	} = useExpressCheckout( {
@@ -49,6 +50,7 @@ const ExpressCheckoutComponent = ( {
 			options={ buttonOptions }
 			onClick={ onButtonClick }
 			onConfirm={ onConfirm }
+			onReady={ onReady }
 			onCancel={ onCancel }
 			onShippingAddressChange={ onShippingAddressChange }
 			onShippingRateChange={ onShippingRateChange }
diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js
index ee5f7be6ed4..a587fd7a9e9 100644
--- a/client/express-checkout/blocks/hooks/use-express-checkout.js
+++ b/client/express-checkout/blocks/hooks/use-express-checkout.js
@@ -1,15 +1,21 @@
-/* global wcpayExpressCheckoutParams */
-
 /**
  * External dependencies
  */
 import { useCallback } from '@wordpress/element';
 import { useStripe, useElements } from '@stripe/react-stripe-js';
+/**
+ * Internal dependencies
+ */
 import {
 	getExpressCheckoutButtonStyleSettings,
+	getExpressCheckoutData,
 	normalizeLineItems,
 } from 'wcpay/express-checkout/utils';
-import { onConfirmHandler } from 'wcpay/express-checkout/event-handlers';
+import {
+	onClickHandler,
+	onConfirmHandler,
+	onReadyHandler,
+} from 'wcpay/express-checkout/event-handlers';
 
 export const useExpressCheckout = ( {
 	api,
@@ -44,7 +50,8 @@ export const useExpressCheckout = ( {
 				emailRequired: true,
 				shippingAddressRequired: shippingData?.needsShipping,
 				phoneNumberRequired:
-					wcpayExpressCheckoutParams?.checkout?.needs_payer_phone,
+					getExpressCheckoutData( 'checkout' )?.needs_payer_phone ??
+					false,
 				shippingRates: shippingData?.shippingRates[ 0 ]?.shipping_rates?.map(
 					( r ) => {
 						return {
@@ -55,8 +62,13 @@ export const useExpressCheckout = ( {
 					}
 				),
 			};
-			event.resolve( options );
+
+			// Click event from WC Blocks.
 			onClick();
+			// Global click event handler from WooPayments to ECE.
+			onClickHandler( event );
+
+			event.resolve( options );
 		},
 		[
 			onClick,
@@ -81,6 +93,7 @@ export const useExpressCheckout = ( {
 		buttonOptions,
 		onButtonClick,
 		onConfirm,
+		onReady: onReadyHandler,
 		onCancel,
 		elements,
 	};
diff --git a/client/express-checkout/event-handlers.js b/client/express-checkout/event-handlers.js
index cd45606992b..ad8b23f52e4 100644
--- a/client/express-checkout/event-handlers.js
+++ b/client/express-checkout/event-handlers.js
@@ -2,11 +2,16 @@
  * Internal dependencies
  */
 import {
+	getErrorMessageFromNotice,
 	normalizeOrderData,
 	normalizeShippingAddress,
 	normalizeLineItems,
+	getExpressCheckoutData,
 } from './utils';
-import { getErrorMessageFromNotice } from './utils/index';
+import {
+	trackExpressCheckoutButtonClick,
+	trackExpressCheckoutButtonLoad,
+} from './tracking';
 
 export const shippingAddressChangeHandler = async ( api, event, elements ) => {
 	try {
@@ -99,3 +104,25 @@ export const onConfirmHandler = async (
 		return abortPayment( event, e.message );
 	}
 };
+
+export const onReadyHandler = async function ( { availablePaymentMethods } ) {
+	if ( availablePaymentMethods ) {
+		const enabledMethods = Object.entries( availablePaymentMethods )
+			// eslint-disable-next-line no-unused-vars
+			.filter( ( [ _, isEnabled ] ) => isEnabled )
+			// eslint-disable-next-line no-unused-vars
+			.map( ( [ methodName, _ ] ) => methodName );
+
+		trackExpressCheckoutButtonLoad( {
+			paymentMethods: enabledMethods,
+			source: getExpressCheckoutData( 'button_context' ),
+		} );
+	}
+};
+
+export const onClickHandler = async function ( { expressPaymentType } ) {
+	trackExpressCheckoutButtonClick(
+		expressPaymentType,
+		getExpressCheckoutData( 'button_context' )
+	);
+};
diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js
index 45fea02f042..e994a81bd8e 100644
--- a/client/express-checkout/index.js
+++ b/client/express-checkout/index.js
@@ -13,7 +13,9 @@ import {
 	normalizeLineItems,
 } from './utils/index';
 import {
+	onClickHandler,
 	onConfirmHandler,
+	onReadyHandler,
 	shippingAddressChangeHandler,
 	shippingRateChangeHandler,
 } from './event-handlers';
@@ -262,6 +264,7 @@ jQuery( ( $ ) => {
 					shippingRates,
 				};
 				wcpayECE.block();
+				onClickHandler( event );
 				event.resolve( clickOptions );
 			} );
 
@@ -287,6 +290,8 @@ jQuery( ( $ ) => {
 			eceButton.on( 'cancel', async () => {
 				wcpayECE.unblock();
 			} );
+
+			eceButton.on( 'ready', onReadyHandler );
 		},
 
 		getSelectedProductData: () => {
diff --git a/client/express-checkout/tracking.js b/client/express-checkout/tracking.js
new file mode 100644
index 00000000000..862f6fc587e
--- /dev/null
+++ b/client/express-checkout/tracking.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+import { recordUserEvent } from 'tracks';
+
+// Track the button click event.
+export const trackExpressCheckoutButtonClick = ( paymentMethod, source ) => {
+	const expressPaymentTypeEvents = {
+		google_pay: 'gpay_button_click',
+		apple_pay: 'applepay_button_click',
+	};
+
+	const event = expressPaymentTypeEvents[ paymentMethod ];
+	if ( ! event ) return;
+
+	recordUserEvent( event, { source } );
+};
+
+// Track the button load event.
+export const trackExpressCheckoutButtonLoad = debounce(
+	( { paymentMethods, source } ) => {
+		const expressPaymentTypeEvents = {
+			googlePay: 'gpay_button_load',
+			applePay: 'applepay_button_load',
+		};
+
+		for ( const paymentMethod of paymentMethods ) {
+			const event = expressPaymentTypeEvents[ paymentMethod ];
+			if ( ! event ) continue;
+
+			recordUserEvent( event, { source } );
+		}
+	},
+	1000
+);