From 5facec8ed20650bd22722f17e667db09902d8a63 Mon Sep 17 00:00:00 2001
From: Liangjun Song <146005915+adai26@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:49:56 +0000
Subject: [PATCH] Merge pull request #23238 from
 overleaf/ls-analytic-events-for-flexible-licensing

Implement analytic events for flexible licensing

GitOrigin-RevId: 2ac0b471616d6e4f80ade18934d7240618195a8a
---
 .../components/add-seats/add-seats.tsx        | 55 +++++++++++++++++--
 .../components/group-members.tsx              |  2 +
 .../upgrade-subscription.tsx                  | 34 ++++++++++--
 .../dashboard/group-settings-button.tsx       |  4 ++
 .../dashboard/states/active/active-new.tsx    | 10 +++-
 5 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
index fc390f1962..e6b1c5ab82 100644
--- a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
@@ -28,6 +28,7 @@ import {
   SubscriptionChangePreview,
 } from '../../../../../../types/subscription/subscription-change-preview'
 import { MergeAndOverride } from '../../../../../../types/utils'
+import { sendMB } from '../../../../infrastructure/event-tracking'
 
 export const MAX_NUMBER_OF_USERS = 50
 
@@ -85,6 +86,17 @@ function AddSeats() {
     [runAsyncCostSummary]
   )
 
+  const debouncedTrackUserEnterSeatNumberEvent = useMemo(
+    () =>
+      debounce((value: number) => {
+        sendMB('flex-add-users-form', {
+          action: 'enter-seat-number',
+          seatNumber: value,
+        })
+      }, 500),
+    []
+  )
+
   const validateSeats = async (value: string | undefined) => {
     try {
       await addSeatsValidationSchema.validate(value)
@@ -109,6 +121,7 @@ function AddSeats() {
 
     if (isValidSeatsNumber) {
       const seats = Number(value)
+      debouncedTrackUserEnterSeatNumberEvent(seats)
 
       if (seats > MAX_NUMBER_OF_USERS) {
         debouncedCostSummaryRequest.cancel()
@@ -117,6 +130,7 @@ function AddSeats() {
         debouncedCostSummaryRequest(seats, controller.signal)
       }
     } else {
+      debouncedTrackUserEnterSeatNumberEvent.cancel()
       debouncedCostSummaryRequest.cancel()
     }
 
@@ -138,6 +152,9 @@ function AddSeats() {
     }
 
     if (shouldContactSales) {
+      sendMB('flex-add-users-form', {
+        action: 'click-send-request-button',
+      })
       const post = postJSON(
         '/user/subscription/group/add-users/sales-contact-form',
         {
@@ -149,11 +166,21 @@ function AddSeats() {
       )
       runAsyncSendMailToSales(post).catch(debugConsole.error)
     } else {
+      sendMB('flex-add-users-form', {
+        action: 'click-add-user-button',
+      })
       const post = postJSON('/user/subscription/group/add-users/create', {
         signal: addSeatsSignal,
         body: { adding: Number(rawSeats) },
       })
-      runAsyncAddSeats(post).catch(debugConsole.error)
+      runAsyncAddSeats(post)
+        .then(() => {
+          sendMB('flex-add-users-success')
+        })
+        .catch(() => {
+          debugConsole.error()
+          sendMB('flex-add-users-error')
+        })
     }
   }
 
@@ -259,8 +286,17 @@ function AddSeats() {
                   <div>
                     <Trans
                       i18nKey="if_you_want_to_reduce_the_number_of_users_please_contact_support"
-                      // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                      components={[<a href="/contact" />]}
+                      components={[
+                        // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                        <a
+                          href="/contact"
+                          onClick={() => {
+                            sendMB('flex-add-users-form', {
+                              action: 'click-contact-customer-support-link',
+                            })
+                          }}
+                        />,
+                      ]}
                     />
                   </div>
                 </div>
@@ -313,11 +349,22 @@ function AddSeats() {
                       href="/user/subscription/group/upgrade-subscription"
                       rel="noreferrer noopener"
                       className="me-auto"
+                      onClick={() => {
+                        sendMB('flex-upgrade')
+                      }}
                     >
                       {t('upgrade_my_plan')}
                     </a>
                   )}
-                  <Button variant="secondary" href="/user/subscription">
+                  <Button
+                    variant="secondary"
+                    href="/user/subscription"
+                    onClick={() =>
+                      sendMB('flex-add-users-form', {
+                        action: 'click-cancel-button',
+                      })
+                    }
+                  >
                     {t('cancel')}
                   </Button>
                   <Button
diff --git a/services/web/frontend/js/features/group-management/components/group-members.tsx b/services/web/frontend/js/features/group-management/components/group-members.tsx
index 88f467209a..bce64164c7 100644
--- a/services/web/frontend/js/features/group-management/components/group-members.tsx
+++ b/services/web/frontend/js/features/group-management/components/group-members.tsx
@@ -8,6 +8,7 @@ import { useGroupMembersContext } from '../context/group-members-context'
 import ErrorAlert from './error-alert'
 import MembersList from './members-table/members-list'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { sendMB } from '../../../infrastructure/event-tracking'
 
 export default function GroupMembers() {
   const { isReady } = useWaitForI18n()
@@ -72,6 +73,7 @@ export default function GroupMembers() {
               <a
                 href="/user/subscription/group/add-users"
                 rel="noreferrer noopener"
+                onClick={() => sendMB('flex-add-users')}
               >
                 {t('add_more_users')}.
               </a>
diff --git a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
index 28431fd95e..defb3d27ff 100644
--- a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
+++ b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
@@ -11,6 +11,7 @@ import UpgradeSummary, {
   SubscriptionChange,
 } from './upgrade-subscription-upgrade-summary'
 import { debugConsole } from '@/utils/debugging'
+import { sendMB } from '../../../../infrastructure/event-tracking'
 
 function UpgradeSubscription() {
   const { t } = useTranslation()
@@ -18,9 +19,17 @@ function UpgradeSubscription() {
   const preview = getMeta('ol-subscriptionChangePreview') as SubscriptionChange
   const { isError, runAsync, isSuccess, isLoading } = useAsync()
   const onSubmit = () => {
-    runAsync(postJSON('/user/subscription/group/upgrade-subscription')).catch(
-      debugConsole.error
-    )
+    sendMB('flex-upgrade-form', {
+      action: 'click-upgrade-button',
+    })
+    runAsync(postJSON('/user/subscription/group/upgrade-subscription'))
+      .then(() => {
+        sendMB('flex-upgrade-success')
+      })
+      .catch(() => {
+        debugConsole.error()
+        sendMB('flex-upgrade-error')
+      })
   }
 
   if (isSuccess) {
@@ -42,8 +51,17 @@ function UpgradeSubscription() {
         content={
           <Trans
             i18nKey="it_looks_like_that_didnt_work_you_can_try_again_or_get_in_touch"
-            // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-            components={[<a href="/contact" />]}
+            components={[
+              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+              <a
+                href="/contact"
+                onClick={() => {
+                  sendMB('flex-upgrade-form', {
+                    action: 'click-get-in-touch-link',
+                  })
+                }}
+              />,
+            ]}
           />
         }
       />
@@ -96,6 +114,7 @@ function UpgradeSubscription() {
                 <a
                   href="/user/subscription/group/add-users"
                   className="me-auto"
+                  onClick={() => sendMB('flex-add-users')}
                 >
                   {t('add_more_users_to_my_plan')}
                 </a>
@@ -103,6 +122,11 @@ function UpgradeSubscription() {
                   href="/user/subscription"
                   variant="secondary"
                   disabled={isLoading}
+                  onClick={() => {
+                    sendMB('flex-upgrade-form', {
+                      action: 'click-cancel-button',
+                    })
+                  }}
                 >
                   {t('cancel')}
                 </Button>
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
index 26532ccd5d..033733dd58 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
@@ -7,12 +7,16 @@ import OLTag from '@/features/ui/components/ol/ol-tag'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { bsVersion } from '@/features/utils/bootstrap-5'
 import { ManagedGroupSubscription } from '../../../../../../types/subscription/dashboard/subscription'
+import { sendMB } from '../../../../infrastructure/event-tracking'
 
 function AvailableWithGroupProfessionalBadge() {
   const { t } = useTranslation()
   const location = useLocation()
 
   const handleUpgradeClick = () => {
+    sendMB('flex-upgrade', {
+      location: 'ad-badge',
+    })
     location.assign('/user/subscription/group/upgrade-subscription')
   }
 
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx
index 25794c4567..6db4f68856 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx
@@ -23,6 +23,7 @@ import {
 import getMeta from '@/utils/meta'
 import classnames from 'classnames'
 import SubscriptionRemainder from '@/features/subscription/components/dashboard/states/active/subscription-remainder'
+import { sendMB } from '../../../../../../infrastructure/event-tracking'
 
 export function ActiveSubscriptionNew({
   subscription,
@@ -282,13 +283,20 @@ function FlexibleGroupLicensingActions({
           <OLButton
             variant="secondary"
             href="/user/subscription/group/upgrade-subscription"
+            onClick={() =>
+              sendMB('flex-upgrade', { location: 'upgrade-plan-button' })
+            }
           >
             {t('upgrade_plan')}
           </OLButton>{' '}
         </>
       )}
       {subscription.plan.membersLimitAddOn === 'additional-license' && (
-        <OLButton variant="secondary" href="/user/subscription/group/add-users">
+        <OLButton
+          variant="secondary"
+          href="/user/subscription/group/add-users"
+          onClick={() => sendMB('flex-add-users')}
+        >
           {t('add_more_users')}
         </OLButton>
       )}