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,20 @@ export const CancellationJourneyFunnel = () => {
 		return <Navigate to="/" />;
 	}
 
+	const productType = getSpecificProductTypeFromTier(productDetail.tier);
+	const productTypeKey = productType.productType;
+
+	const possiblePaidPlan = productDetail.subscription.currentPlans[0];
+	const qmEventString = `cancellation start | ${productType.friendlyName}${
+		isPaidSubscriptionPlan(possiblePaidPlan)
+			? ` | ${possiblePaidPlan.billingPeriod}`
+			: ''
+	}`;
+	window.QuantumMetricAPI?.sendEvent(184, 0, qmEventString);
+
 	if (
 		!routerState?.dontShowOffer &&
-		productHasEarlySaveJourney(productDetail)
+		productHasEarlySaveJourney(productTypeKey)
 	) {
 		return <Navigate to="./landing" state={{ ...routerState }} />;
 	}

shared/globals.ts

@@ -27,9 +27,13 @@ export interface Globals extends CommonGlobals {
 	stripeKeyAustralia?: StripePublicKeySet;
 	stripeKeyDefaultCurrencies?: StripePublicKeySet;
 }
+interface QuantumMetricAPIPartial {
+	sendEvent: (param1: number, param2: number, event: string) => 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;
 	}