From e0e4f7e11b291b9ff554251afbbf366f8d750b2d Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 5 May 2025 11:49:00 +0200
Subject: [PATCH] Update event tracking for AI assist payment flow (#25222)

GitOrigin-RevId: feb7987b1397d70b3a04c797bd2db92e42c325f5
---
 .../preview-subscription-change/root.tsx      | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx b/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
index 513b1b14ba..cb9565e9e4 100644
--- a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
+++ b/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import moment from 'moment'
 import { useTranslation, Trans } from 'react-i18next'
 import {
@@ -30,28 +30,35 @@ function PreviewSubscriptionChange() {
   const payNowTask = useAsync()
   const location = useLocation()
 
-  const handlePayNowClick = useCallback(() => {
-    let addOnSegmentation: Record<any, unknown> | null = null
+  useEffect(() => {
     if (preview.change.type === 'add-on-purchase') {
-      addOnSegmentation = {
-        addOn: preview.change.addOn.code,
+      eventTracking.sendMB('preview-subscription-change-view', {
+        plan: preview.change.addOn.code,
         upgradeType: 'add-on',
-      }
-      if (purchaseReferrer) {
-        addOnSegmentation.referrer = purchaseReferrer
-      }
-      eventTracking.sendMB('subscription-change-form-submit', addOnSegmentation)
+        referrer: purchaseReferrer,
+      })
+    }
+  }, [preview.change, purchaseReferrer])
+
+  const handlePayNowClick = useCallback(() => {
+    if (preview.change.type === 'add-on-purchase') {
+      eventTracking.sendMB('subscription-change-form-submit', {
+        plan: preview.change.addOn.code,
+        upgradeType: 'add-on',
+        referrer: purchaseReferrer,
+      })
     }
 
     eventTracking.sendMB('assistant-add-on-purchase')
     payNowTask
       .runAsync(payNow(preview))
       .then(() => {
-        if (addOnSegmentation) {
-          eventTracking.sendMB(
-            'subscription-change-form-success',
-            addOnSegmentation
-          )
+        if (preview.change.type === 'add-on-purchase') {
+          eventTracking.sendMB('subscription-change-form-success', {
+            plan: preview.change.addOn.code,
+            upgradeType: 'add-on',
+            referrer: purchaseReferrer,
+          })
         }
         location.replace('/user/subscription/thank-you')
       })