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

[web] Subscription event segmentation

GitOrigin-RevId: fdc25ac7bc7320ed82617b7c27c12a17eb31d723

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

@@ -11,6 +11,7 @@ import {
 import { renderActiveSubscription } from '../../helpers/render-active-subscription'
 import { location } from '@/shared/components/location'
 import { MetaTag } from '@/utils/meta'
+import * as eventTracking from '@/infrastructure/event-tracking'
 
 const pauseSubscriptionSplitTestMeta: MetaTag[] = [
   { name: 'ol-splitTestVariants', value: { 'pause-subscription': 'enabled' } },
@@ -85,6 +86,32 @@ describe('<PauseSubscriptionModal />', function () {
     await screen.findByText('Pause instead, to pick up where you left off')
   })
 
+  it('sends the cancel event with the same segmentation as the dashboard', async function () {
+    const sendMBSpy = sinon.spy(eventTracking, 'sendMB')
+    try {
+      renderSubscriptionWithPauseSupport()
+      clickCancelButton()
+      await screen.findByText('Pause instead, to pick up where you left off')
+      sendMBSpy.resetHistory()
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Cancel subscription' })
+      )
+
+      expect(sendMBSpy).to.be.calledOnceWith(
+        'subscription-page-cancel-button-click',
+        sinon.match({
+          plan_code: 'collaborator',
+          billing_cycle: 'monthly',
+          is_trial: false,
+          currency: 'USD',
+        })
+      )
+    } finally {
+      sendMBSpy.restore()
+    }
+  })
+
   it('renders options for pause duration', async function () {
     renderSubscriptionWithPauseSupport()
     clickCancelButton()

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

@@ -135,6 +135,38 @@ describe('<ActiveSubscription />', function () {
     )
   })
 
+  it('sends an event when the change plan button is clicked', function () {
+    renderActiveSubscription(monthlyActiveCollaborator)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change plan' }))
+
+    expect(sendMBSpy).to.be.calledOnceWith(
+      'subscription-page-upgrade-button-click',
+      sinon.match({
+        plan_code: 'collaborator',
+        billing_cycle: 'monthly',
+        is_trial: false,
+        currency: 'USD',
+      })
+    )
+  })
+
+  it('sends the annual billing cycle when on an annual plan', function () {
+    renderActiveSubscription(annualActiveSubscriptionEuro)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change plan' }))
+
+    expect(sendMBSpy).to.be.calledOnceWith(
+      'subscription-page-upgrade-button-click',
+      sinon.match({
+        plan_code: annualActiveSubscriptionEuro.planCode,
+        billing_cycle: 'annual',
+        is_trial: false,
+        currency: 'EUR',
+      })
+    )
+  })
+
   it('does not show "Change plan" option when past due', function () {
     // account is likely in expired state, but be sure to not show option if state is still active
     const activePastDueSubscription = cloneDeep(annualActiveSubscription)
@@ -329,13 +361,35 @@ describe('<ActiveSubscription />', function () {
       showConfirmCancelUI()
 
       expect(sendMBSpy).to.be.calledOnceWith(
-        'subscription-page-cancel-button-click'
+        'subscription-page-cancel-button-click',
+        sinon.match({
+          plan_code: annualActiveSubscription.planCode,
+          billing_cycle: 'annual',
+          is_trial: false,
+          currency: 'USD',
+        })
       )
 
       screen.getByText('We’d love you to stay')
       screen.getByRole('button', { name: 'Cancel my subscription' })
     })
 
+    it('sends the cancel event with trial segmentation when in a trial', function () {
+      renderActiveSubscription(trialCollaboratorSubscription)
+
+      showConfirmCancelUI()
+
+      expect(sendMBSpy).to.be.calledOnceWith(
+        'subscription-page-cancel-button-click',
+        sinon.match({
+          plan_code: trialCollaboratorSubscription.planCode,
+          billing_cycle: 'monthly',
+          is_trial: true,
+          currency: trialCollaboratorSubscription.payment.currency,
+        })
+      )
+    })
+
     it('cancels subscription and redirects page', async function () {
       const endPointResponse = {
         status: 200,

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

@@ -0,0 +1,51 @@
+import { expect } from 'chai'
+import getSubscriptionEventSegmentation from '../../../../../frontend/js/features/subscription/util/subscription-event-segmentation'
+import {
+  annualActiveSubscriptionEuro,
+  monthlyActiveCollaborator,
+  trialCollaboratorSubscription,
+} from '../fixtures/subscriptions'
+
+describe('getSubscriptionEventSegmentation', function () {
+  it('segments a monthly subscription', function () {
+    expect(
+      getSubscriptionEventSegmentation(monthlyActiveCollaborator)
+    ).to.deep.equal({
+      plan_code: 'collaborator',
+      billing_cycle: 'monthly',
+      is_trial: false,
+      currency: 'USD',
+    })
+  })
+
+  it('segments an annual subscription', function () {
+    expect(
+      getSubscriptionEventSegmentation(annualActiveSubscriptionEuro)
+    ).to.deep.equal({
+      plan_code: 'collaborator-annual',
+      billing_cycle: 'annual',
+      is_trial: false,
+      currency: 'EUR',
+    })
+  })
+
+  it('segments a subscription in a free trial', function () {
+    expect(
+      getSubscriptionEventSegmentation(trialCollaboratorSubscription)
+    ).to.deep.equal({
+      plan_code: 'collaborator_free_trial_7_days',
+      billing_cycle: 'monthly',
+      is_trial: true,
+      currency: 'USD',
+    })
+  })
+
+  it('omits the plan segmentation without a subscription', function () {
+    expect(getSubscriptionEventSegmentation(undefined)).to.deep.equal({
+      plan_code: undefined,
+      billing_cycle: undefined,
+      is_trial: false,
+      currency: undefined,
+    })
+  })
+})