Merge pull request #36496 from overleaf/oa-annual-events

[web] Subscription event segmentation

GitOrigin-RevId: fdc25ac7bc7320ed82617b7c27c12a17eb31d723

services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx

@@ -17,7 +17,7 @@ import * as eventTracking from '../../../../infrastructure/event-tracking'
 import PauseDuck from '../../images/pause-duck.svg'
 import GenericErrorAlert from './generic-error-alert'
 import { PaidSubscription } from '../../../../../../types/subscription/dashboard/subscription'
-import isInFreeTrial from '../../util/is-in-free-trial'
+import getSubscriptionEventSegmentation from '../../util/subscription-event-segmentation'
 
 const pauseMonthDurationOptions = [1, 2, 3]
 
@@ -38,10 +38,10 @@ export default function PauseSubscriptionModal() {
 
   function handleCancelSubscriptionClick() {
     const subscription = personalSubscription as PaidSubscription
-    eventTracking.sendMB('subscription-page-cancel-button-click', {
-      plan_code: subscription?.planCode,
-      is_trial: isInFreeTrial(subscription?.payment.trialEndsAt),
-    })
+    eventTracking.sendMB(
+      'subscription-page-cancel-button-click',
+      getSubscriptionEventSegmentation(subscription)
+    )
     setShowCancellation(true)
   }
 

services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx

@@ -12,6 +12,7 @@ import { ChangeToGroupModal } from './change-plan/modals/change-to-group-modal'
 import { CancelAiAddOnModal } from '@/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal'
 import OLButton from '@/shared/components/ol/ol-button'
 import isInFreeTrial from '../../../../util/is-in-free-trial'
+import getSubscriptionEventSegmentation from '../../../../util/subscription-event-segmentation'
 import AddOns from '@/features/subscription/components/dashboard/states/active/add-ons'
 import {
   AI_ADD_ON_CODE,
@@ -75,7 +76,13 @@ export function ActiveSubscription({
     planName = subscription.plan.name
   }
 
-  const handlePlanChange = () => setModalIdShown('change-plan')
+  const handlePlanChange = () => {
+    sendMB(
+      'subscription-page-upgrade-button-click',
+      getSubscriptionEventSegmentation(subscription)
+    )
+    setModalIdShown('change-plan')
+  }
 
   const handleCancelClick = (addOnCode: string) => {
     if (

services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-subscription-button.tsx

@@ -6,7 +6,7 @@ import { PaidSubscription } from '../../../../../../../../types/subscription/das
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useLocation } from '@/shared/hooks/use-location'
 import { stripHasSubscription } from '../../../../data/subscription-url'
-import isInFreeTrial from '../../../../util/is-in-free-trial'
+import getSubscriptionEventSegmentation from '../../../../util/subscription-event-segmentation'
 
 export function CancelSubscriptionButton() {
   const { t } = useTranslation()
@@ -19,7 +19,6 @@ export function CancelSubscriptionButton() {
   } = useSubscriptionDashboardContext()
 
   const subscription = personalSubscription as PaidSubscription
-  const isInTrial = isInFreeTrial(subscription?.payment.trialEndsAt)
   const hasPendingOrActivePause =
     subscription.payment.state === 'paused' ||
     (subscription.payment.state === 'active' &&
@@ -32,10 +31,10 @@ export function CancelSubscriptionButton() {
     planIsEligibleForPause
 
   function handleCancelSubscriptionClick() {
-    eventTracking.sendMB('subscription-page-cancel-button-click', {
-      plan_code: subscription?.planCode,
-      is_trial: isInTrial,
-    })
+    eventTracking.sendMB(
+      'subscription-page-cancel-button-click',
+      getSubscriptionEventSegmentation(subscription)
+    )
     const url = location.toString()
     if (url) {
       window.history.replaceState(null, '', stripHasSubscription(url))

services/web/frontend/js/features/subscription/util/subscription-event-segmentation.ts

@@ -0,0 +1,22 @@
+import { PaidSubscription } from '@ol-types/subscription/dashboard/subscription'
+import isInFreeTrial from './is-in-free-trial'
+
+/**
+ * The shared segmentation for `subscription-page-*` analytics events, so that
+ * every event fired from the subscription dashboard can be compared against the
+ * `subscription-page-view` event recorded server side.
+ */
+export default function getSubscriptionEventSegmentation(
+  subscription?: PaidSubscription
+) {
+  return {
+    plan_code: subscription?.planCode,
+    billing_cycle: subscription?.plan
+      ? subscription.plan.annual
+        ? 'annual'
+        : 'monthly'
+      : undefined,
+    is_trial: isInFreeTrial(subscription?.payment?.trialEndsAt),
+    currency: subscription?.payment?.currency,
+  }
+}