Add "referrer" tracking to payment flows for AI assist (#25002)

* Add "referrer" tracking to payment flows for AI assist

* move sendMB call

* fix conflict

GitOrigin-RevId: 0c4480816d5fe525a87223c0b1827093d853d474

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -314,6 +314,7 @@ function cancelV1Subscription(req, res, next) {
 async function previewAddonPurchase(req, res) {
   const userId = SessionManager.getLoggedInUserId(req.session)
   const addOnCode = req.params.addOnCode
+  const purchaseReferrer = req.query.purchaseReferrer
 
   if (addOnCode !== AI_ADD_ON_CODE) {
     return HttpErrorHandler.notFound(req, res, `Unknown add-on: ${addOnCode}`)
@@ -363,7 +364,10 @@ async function previewAddonPurchase(req, res) {
     paymentMethod
   )
 
-  res.render('subscriptions/preview-change', { changePreview })
+  res.render('subscriptions/preview-change', {
+    changePreview,
+    purchaseReferrer,
+  })
 }
 
 async function purchaseAddon(req, res, next) {

services/web/app/views/subscriptions/preview-change.pug

@@ -5,6 +5,7 @@ block entrypointVar
 
 block append meta
 	meta(name="ol-subscriptionChangePreview" data-type="json" content=changePreview)
+	meta(name="ol-purchaseReferrer" data-type="string" content=purchaseReferrer)
 
 block content
 	main.content.content-alt#main-content

services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx

@@ -25,19 +25,38 @@ function PreviewSubscriptionChange() {
   const preview = getMeta(
     'ol-subscriptionChangePreview'
   ) as SubscriptionChangePreview
+  const purchaseReferrer = getMeta('ol-purchaseReferrer')
   const { t } = useTranslation()
   const payNowTask = useAsync()
   const location = useLocation()
 
   const handlePayNowClick = useCallback(() => {
+    let addOnSegmentation: Record<any, unknown> | null = null
+    if (preview.change.type === 'add-on-purchase') {
+      addOnSegmentation = {
+        addOn: preview.change.addOn.code,
+        upgradeType: 'add-on',
+      }
+      if (purchaseReferrer) {
+        addOnSegmentation.referrer = purchaseReferrer
+      }
+      eventTracking.sendMB('subscription-change-form-submit', addOnSegmentation)
+    }
+
     eventTracking.sendMB('assistant-add-on-purchase')
     payNowTask
       .runAsync(payNow(preview))
       .then(() => {
+        if (addOnSegmentation) {
+          eventTracking.sendMB(
+            'subscription-change-form-success',
+            addOnSegmentation
+          )
+        }
         location.replace('/user/subscription/thank-you')
       })
       .catch(debugConsole.error)
-  }, [location, payNowTask, preview])
+  }, [purchaseReferrer, location, payNowTask, preview])
 
   const aiAddOnChange =
     preview.change.type === 'add-on-purchase' &&

services/web/frontend/js/utils/meta.ts

@@ -187,6 +187,7 @@ export interface Meta {
   'ol-projectSyncSuccessMessage': string
   'ol-projectTags': Tag[]
   'ol-project_id': string
+  'ol-purchaseReferrer': string
   'ol-recommendedCurrency': CurrencyCode
   'ol-reconfirmationRemoveEmail': string
   'ol-reconfirmedViaSAML': string