From b6ae4213272beb47cb0ee2db91b26de277f23858 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <malith.senaweera@automattic.com>
Date: Wed, 6 Dec 2023 15:02:57 -0600
Subject: [PATCH 1/3] Add Tracks to Place Order button

---
 client/checkout/blocks/index.js           | 20 ++++++++++++++++++++
 client/checkout/classic/event-handlers.js | 13 +++++++++++++
 client/tracks/index.js                    |  1 +
 3 files changed, 34 insertions(+)

diff --git a/client/checkout/blocks/index.js b/client/checkout/blocks/index.js
index 72f1c49b6b9..00a0f99164d 100644
--- a/client/checkout/blocks/index.js
+++ b/client/checkout/blocks/index.js
@@ -34,6 +34,7 @@ import {
 } from '../constants.js';
 import { getDeferredIntentCreationUPEFields } from './payment-elements';
 import { handleWooPayEmailInput } from '../woopay/email-input-iframe';
+import wcpayTracks from 'tracks';
 import wooPayExpressCheckoutPaymentMethod from '../woopay/express-button/woopay-express-checkout-payment-method';
 import { isPreviewing } from '../preview';
 
@@ -116,6 +117,24 @@ Object.entries( enabledPaymentMethodsConfig )
 		} );
 	} );
 
+const addCheckoutTracking = () => {
+	const placeOrderButton = document.getElementsByClassName(
+		'wc-block-components-checkout-place-order-button'
+	);
+	if ( placeOrderButton.length ) {
+		placeOrderButton[ 0 ].addEventListener( 'click', () => {
+			const blocksCheckbox = document.getElementById(
+				'radio-control-wc-payment-method-options-woocommerce_payments'
+			);
+			if ( ! blocksCheckbox?.checked ) {
+				return;
+			}
+
+			wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK );
+		} );
+	}
+};
+
 // Call handleWooPayEmailInput if woopay is enabled and this is the checkout page.
 if ( getUPEConfig( 'isWooPayEnabled' ) ) {
 	if (
@@ -134,4 +153,5 @@ if ( getUPEConfig( 'isWooPayEnabled' ) ) {
 registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
 window.addEventListener( 'load', () => {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
+	addCheckoutTracking();
 } );
diff --git a/client/checkout/classic/event-handlers.js b/client/checkout/classic/event-handlers.js
index dbf292944a5..f8a80003406 100644
--- a/client/checkout/classic/event-handlers.js
+++ b/client/checkout/classic/event-handlers.js
@@ -26,6 +26,7 @@ import WCPayAPI from 'wcpay/checkout/api';
 import apiRequest from '../utils/request';
 import { handleWooPayEmailInput } from 'wcpay/checkout/woopay/email-input-iframe';
 import { isPreviewing } from 'wcpay/checkout/preview';
+import wcpayTracks from 'tracks';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
@@ -60,6 +61,18 @@ jQuery( function ( $ ) {
 		return processPaymentIfNotUsingSavedMethod( $( this ) );
 	} );
 
+	$( 'form.checkout' ).on( 'submit', function () {
+		const isWCPay = document.getElementById(
+			'payment_method_woocommerce_payments'
+		).checked;
+
+		if ( ! isWCPay ) {
+			return;
+		}
+
+		wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK );
+	} );
+
 	window.addEventListener( 'hashchange', () => {
 		if ( window.location.hash.startsWith( '#wcpay-confirm-' ) ) {
 			showAuthenticationModalIfRequired( api );
diff --git a/client/tracks/index.js b/client/tracks/index.js
index c02615f781d..aefabf93267 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -90,6 +90,7 @@ const events = {
 	MULTI_CURRENCY_ENABLED_CURRENCIES_UPDATED:
 		'wcpay_multi_currency_enabled_currencies_updated',
 	PAYMENT_REQUEST_SETTINGS_CHANGE: 'wcpay_payment_request_settings_change',
+	PLACE_ORDER_CLICK: 'checkout_place_order_button_click',
 	// WCPay Subscriptions empty state - prompts to connect to WCPay or create product.
 	SUBSCRIPTIONS_EMPTY_STATE_VIEW: 'wcpay_subscriptions_empty_state_view',
 	SUBSCRIPTIONS_EMPTY_STATE_FINISH_SETUP:

From 5131ea09a66d43b7062e170c0ad3e748f7f9fde0 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <malith.senaweera@automattic.com>
Date: Thu, 7 Dec 2023 10:38:21 -0600
Subject: [PATCH 2/3] Add changelog entry

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

diff --git a/changelog/add-place-order-tracks b/changelog/add-place-order-tracks
new file mode 100644
index 00000000000..450859bad49
--- /dev/null
+++ b/changelog/add-place-order-tracks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Place order button Tracks

From 52ba858e339f3f86ef3a1cd31048c5576aa12292 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <malith.senaweera@automattic.com>
Date: Wed, 27 Dec 2023 10:03:01 -0600
Subject: [PATCH 3/3] Fix the event handler

---
 client/checkout/classic/event-handlers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/checkout/classic/event-handlers.js b/client/checkout/classic/event-handlers.js
index f8a80003406..c0cbb19ed6c 100644
--- a/client/checkout/classic/event-handlers.js
+++ b/client/checkout/classic/event-handlers.js
@@ -61,7 +61,7 @@ jQuery( function ( $ ) {
 		return processPaymentIfNotUsingSavedMethod( $( this ) );
 	} );
 
-	$( 'form.checkout' ).on( 'submit', function () {
+	$( 'form.checkout' ).on( 'click', '#place_order', function () {
 		const isWCPay = document.getElementById(
 			'payment_method_woocommerce_payments'
 		).checked;