From 6fb67be16f32ce8bbec269ae93e10475af92f5e6 Mon Sep 17 00:00:00 2001
From: George Haberis <george.haberis@guardian.co.uk>
Date: Mon, 14 Oct 2024 14:49:24 +0100
Subject: [PATCH] QM Generic Checkout Updates : Payment Method Selected (#6406)

* rename sendEventContributionPaymentMethod to sendEventPaymentMethodSelected

* call sendEventPaymentMethodSelected

* call sendEventPaymentMethodSelected on Stripe Express Checkout Element click

* remove logging
---
 .../PaymentMethodSelectorContainer.tsx                 |  4 ++--
 .../assets/helpers/tracking/quantumMetric.ts           |  6 +++---
 .../assets/pages/[countryGroupId]/checkout.tsx         | 10 ++++++++++
 .../assets/pages/[countryGroupId]/oneTimeCheckout.tsx  | 10 ++++++++++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx b/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx
index 27667b2cd7..632a90cbf4 100644
--- a/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx
+++ b/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx
@@ -12,7 +12,7 @@ import {
 	trackComponentClick,
 	trackComponentInsert,
 } from 'helpers/tracking/behaviour';
-import { sendEventContributionPaymentMethod } from 'helpers/tracking/quantumMetric';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import type { PaymentMethodSelectorProps } from './paymentMethodSelector';
 
 type PaymentMethodSelectorContainerProps = {
@@ -52,7 +52,7 @@ function PaymentMethodSelectorContainer({
 
 		if (event === 'select') {
 			trackComponentClick(trackingId);
-			sendEventContributionPaymentMethod(paymentMethod);
+			sendEventPaymentMethodSelected(paymentMethod);
 			dispatch(setPaymentMethod({ paymentMethod }));
 		} else {
 			trackComponentInsert(trackingId);
diff --git a/support-frontend/assets/helpers/tracking/quantumMetric.ts b/support-frontend/assets/helpers/tracking/quantumMetric.ts
index 165491f8b1..f6969a191c 100644
--- a/support-frontend/assets/helpers/tracking/quantumMetric.ts
+++ b/support-frontend/assets/helpers/tracking/quantumMetric.ts
@@ -334,8 +334,8 @@ function sendEventContributionCartValue(
 	});
 }
 
-function sendEventContributionPaymentMethod(
-	paymentMethod: PaymentMethod | null,
+function sendEventPaymentMethodSelected(
+	paymentMethod: PaymentMethod | 'StripeExpressCheckoutElement' | null,
 ): void {
 	if (paymentMethod) {
 		void ifQmPermitted(() => {
@@ -446,7 +446,7 @@ export {
 	sendEventSubscriptionCheckoutConversion,
 	sendEventContributionCheckoutConversion,
 	sendEventContributionCartValue,
-	sendEventContributionPaymentMethod,
+	sendEventPaymentMethodSelected,
 	sendEventConversionPaymentMethod,
 	sendEventAcquisitionDataFromQueryParamEvent,
 };
diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx
index 686406df88..f5f8a77548 100644
--- a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx
+++ b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx
@@ -96,6 +96,7 @@ import {
 	getSupportAbTests,
 } from 'helpers/tracking/acquisitions';
 import { trackComponentClick } from 'helpers/tracking/behaviour';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import { isProd } from 'helpers/urls/url';
 import { logException } from 'helpers/utilities/logger';
 import type { GeoId } from 'pages/geoIdConfig';
@@ -1119,6 +1120,12 @@ function CheckoutComponent({
 										const options = {
 											emailRequired: true,
 										};
+
+										// Track payment method selection with QM
+										sendEventPaymentMethodSelected(
+											'StripeExpressCheckoutElement',
+										);
+
 										resolve(options);
 									}}
 									onConfirm={async (event) => {
@@ -1576,6 +1583,9 @@ function CheckoutComponent({
 													}
 													onChange={() => {
 														setPaymentMethod(validPaymentMethod);
+
+														// Track payment method selection with QM
+														sendEventPaymentMethodSelected(validPaymentMethod);
 													}}
 												/>
 											</PaymentMethodRadio>
diff --git a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx
index 69a5db77f0..d400b58adb 100644
--- a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx
+++ b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx
@@ -71,6 +71,7 @@ import {
 	getReferrerAcquisitionData,
 } from 'helpers/tracking/acquisitions';
 import { trackComponentLoad } from 'helpers/tracking/behaviour';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import { payPalCancelUrl, payPalReturnUrl } from 'helpers/urls/routes';
 import { logException } from 'helpers/utilities/logger';
 import { type GeoId, getGeoIdConfig } from 'pages/geoIdConfig';
@@ -582,6 +583,12 @@ function OneTimeCheckoutComponent({
 										const options = {
 											emailRequired: true,
 										};
+
+										// Track payment method selection with QM
+										sendEventPaymentMethodSelected(
+											'StripeExpressCheckoutElement',
+										);
+
 										resolve(options);
 									}
 								}}
@@ -740,6 +747,9 @@ function OneTimeCheckoutComponent({
 													}
 													onChange={() => {
 														setPaymentMethod(validPaymentMethod);
+
+														// Track payment method selection with QM
+														sendEventPaymentMethodSelected(validPaymentMethod);
 													}}
 												/>
 											</PaymentMethodRadio>