Merge pull request #1414 from guardian/qm-cancellatoin-custom-event

fire custom quantum metric event at the start of the cancellation flow

client/components/mma/cancel/CancellationJourneyFunnel.tsx

@@ -3,23 +3,20 @@ import { Navigate, useLocation } from 'react-router-dom';
 import { featureSwitches } from '@/shared/featureSwitches';
 import {
 	getSpecificProductTypeFromTier,
-	type ProductDetail,
+	isPaidSubscriptionPlan,
 } from '@/shared/productResponse';
+import type { ProductTypeKeys } from '@/shared/productTypes';
 import { CancellationContext } from './CancellationContainer';
 import type {
 	CancellationContextInterface,
 	CancellationRouterState,
 } from './CancellationContainer';
 import { CancellationReasonSelection } from './CancellationReasonSelection';
 
-function productHasEarlySaveJourney(productToCancel: ProductDetail): boolean {
-	const specificProductTypeKey = getSpecificProductTypeFromTier(
-		productToCancel.tier,
-	).productType;
-
+function productHasEarlySaveJourney(productTypeKey: ProductTypeKeys): boolean {
 	return (
-		specificProductTypeKey === 'membership' ||
-		(featureSwitches.digisubSave && specificProductTypeKey === 'digipack')
+		productTypeKey === 'membership' ||
+		(featureSwitches.digisubSave && productTypeKey === 'digipack')
 	);
 }
 
@@ -36,9 +33,27 @@ export const CancellationJourneyFunnel = () => {
 		return <Navigate to="/" />;
 	}
 
+	const productType = getSpecificProductTypeFromTier(productDetail.tier);
+	const productTypeKey = productType.productType;
+
+	const possiblePaidPlan = productDetail.subscription.currentPlans[0];
+	const qmEventId = 184;
+	const qmIsConversionEvent = 0;
+	const qmEvent = [
+		'cancellation start',
+		productType.friendlyName,
+		isPaidSubscriptionPlan(possiblePaidPlan) &&
+			`billing period: ${possiblePaidPlan.billingPeriod}`,
+	].filter(Boolean);
+	window.QuantumMetricAPI?.sendEvent(
+		qmEventId,
+		qmIsConversionEvent,
+		qmEvent.join(' | '),
+	);
+
 	if (
 		!routerState?.dontShowOffer &&
-		productHasEarlySaveJourney(productDetail)
+		productHasEarlySaveJourney(productTypeKey)
 	) {
 		return <Navigate to="./landing" state={{ ...routerState }} />;
 	}

shared/globals.ts

@@ -27,9 +27,18 @@ export interface Globals extends CommonGlobals {
 	stripeKeyAustralia?: StripePublicKeySet;
 	stripeKeyDefaultCurrencies?: StripePublicKeySet;
 }
+interface QuantumMetricAPIPartial {
+	sendEvent: (
+		eventId: number | string,
+		conversion?: number | boolean,
+		eventValue?: number | string,
+		attributes?: Record<string, string | boolean | number | undefined>,
+	) => void;
+}
 declare global {
 	interface Window {
 		guardian: Globals;
+		QuantumMetricAPI: QuantumMetricAPIPartial;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the embedded_svc attribute?
 		embedded_svc: any;
 	}