(PC-33934)[PRO] feat: Didactic onboarding tracking events.

pro/src/commons/core/FirebaseEvents/constants.ts

@@ -119,3 +119,12 @@ export enum BankAccountEvents {
   CLICKED_BANK_DETAILS_RECORD_FOLLOW_UP = 'HasClickedBankDetailsRecordFollowUp',
   CLICKED_SAVE_VENUE_TO_BANK_ACCOUNT = 'HasClickedSaveVenueToBankAccount',
 }
+
+export const OnboardingDidacticEvents = {
+  HAS_CLICKED_START_COLLECTIVE_DIDACTIC_ONBOARDING:
+    'hasClickedStartCollectiveDidacticOnboarding',
+  HAS_CLICKED_ALREADY_SUBMITTED_COLLECTIVE_CASE_DIDACTIC_ONBOARDING:
+    'hasClickedAlreadySubmittedCollectiveCaseDidacticOnboarding',
+  HAS_CLICKED_SUBMIT_COLLECTIVE_CASE_DIDACTIC_ONBOARDING:
+    'hasClickedSubmitCollectiveCaseDidacticOnboarding',
+}

pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.spec.tsx

@@ -1,16 +1,24 @@
-import { screen } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { beforeEach } from 'vitest'
 import { axe } from 'vitest-axe'
 
+import * as useAnalytics from 'app/App/analytics/firebase'
+import { OnboardingDidacticEvents } from 'commons/core/FirebaseEvents/constants'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
 
 import { OnboardingOffersChoice } from './OnboardingOffersChoice'
 
+const mockLogEvent = vi.fn()
+
 describe('OnboardingOffersChoice Component', () => {
   beforeEach(() => {
+    vi.spyOn(useAnalytics, 'useAnalytics').mockImplementation(() => ({
+      logEvent: mockLogEvent,
+    }))
     renderWithProviders(<OnboardingOffersChoice />, {
       storeOverrides: {
-        offerer: { selectedOffererId: 1, offererNames: [], isOnboarded: false, },
+        offerer: { selectedOffererId: 1, offererNames: [], isOnboarded: false },
       },
     })
   })
@@ -54,4 +62,18 @@ describe('OnboardingOffersChoice Component', () => {
       await screen.findByTestId('onboarding-collective-modal')
     ).toBeInTheDocument()
   })
+
+  describe('trackers', () => {
+    it('should track choosing collective offers', async () => {
+      await userEvent.click(
+        screen.getByTitle('Commencer la création d’offre sur ADAGE')
+      )
+
+      await waitFor(() => {
+        expect(mockLogEvent).toHaveBeenCalledWith(
+          OnboardingDidacticEvents.HAS_CLICKED_START_COLLECTIVE_DIDACTIC_ONBOARDING
+        )
+      })
+    })
+  })
 })

pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.tsx

@@ -1,5 +1,7 @@
 import { ReactNode, useState } from 'react'
 
+import { useAnalytics } from 'app/App/analytics/firebase'
+import { OnboardingDidacticEvents } from 'commons/core/FirebaseEvents/constants'
 import { Dialog } from 'components/Dialog/Dialog'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
@@ -34,6 +36,7 @@ const Card = ({ imageSrc, title, children, actions }: CardProps) => {
 
 export const OnboardingOffersChoice = () => {
   const [showModal, setShowModal] = useState(false)
+  const { logEvent } = useAnalytics()
 
   return (
     <div className={styles['card-container']}>
@@ -69,7 +72,12 @@ export const OnboardingOffersChoice = () => {
               <Button
                 type="submit"
                 title="Commencer la création d’offre sur ADAGE"
-                onClick={() => setShowModal(true)}
+                onClick={() => {
+                  logEvent(
+                    OnboardingDidacticEvents.HAS_CLICKED_START_COLLECTIVE_DIDACTIC_ONBOARDING
+                  )
+                  setShowModal(true)
+                }}
               >
                 Commencer
               </Button>

pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.spec.tsx

@@ -1,9 +1,12 @@
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as router from 'react-router-dom'
+import { beforeEach, expect } from 'vitest'
 import { axe } from 'vitest-axe'
 
 import { api } from 'apiClient/api'
+import * as useAnalytics from 'app/App/analytics/firebase'
+import { OnboardingDidacticEvents } from 'commons/core/FirebaseEvents/constants'
 import { sharedCurrentUserFactory } from 'commons/utils/factories/storeFactories'
 import {
   renderWithProviders,
@@ -12,6 +15,7 @@ import {
 
 import { OnboardingCollectiveModal } from './OnboardingCollectiveModal'
 
+
 const renderOnboardingCollectiveModal = (
   options?: RenderWithProvidersOptions
 ) => {
@@ -24,8 +28,14 @@ const renderOnboardingCollectiveModal = (
     ...options,
   })
 }
-
+const mockLogEvent = vi.fn()
 describe('<OnboardingCollectiveModal />', () => {
+  beforeEach(() => {
+    vi.spyOn(useAnalytics, 'useAnalytics').mockImplementation(() => ({
+      logEvent: mockLogEvent,
+    }))
+  })
+
   it('should render correctly', async () => {
     renderOnboardingCollectiveModal()
 
@@ -120,4 +130,30 @@ describe('<OnboardingCollectiveModal />', () => {
       ).toBeInTheDocument()
     })
   })
+
+  describe('trackers', () => {
+    it('should track submitting a case', async () => {
+      renderOnboardingCollectiveModal()
+
+      await userEvent.click(
+        await screen.findByRole('link', { name: /Déposer un dossier/ })
+      )
+
+      expect(mockLogEvent).toHaveBeenCalledWith(
+        OnboardingDidacticEvents.HAS_CLICKED_SUBMIT_COLLECTIVE_CASE_DIDACTIC_ONBOARDING
+      )
+    })
+
+    it('should track already submitted a case', async () => {
+      renderOnboardingCollectiveModal()
+
+      await userEvent.click(
+        await screen.findByRole('button', { name: /J’ai déposé un dossier/ })
+      )
+
+      expect(mockLogEvent).toHaveBeenCalledWith(
+        OnboardingDidacticEvents.HAS_CLICKED_ALREADY_SUBMITTED_COLLECTIVE_CASE_DIDACTIC_ONBOARDING
+      )
+    })
+  })
 })

pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 
 import { api } from 'apiClient/api'
+
 import { selectCurrentOffererId } from 'commons/store/offerer/selectors'
 import fullNextIcon from 'icons/full-next.svg'
 import { Button } from 'ui-kit/Button/Button'
@@ -16,6 +17,8 @@ import calendarIcon from './assets/calendrier.svg'
 import offerCreationIcon from './assets/creation_offre.svg'
 import fileSubmissionIcon from './assets/depot_dossier.svg'
 import styles from './OnboardingCollectiveModal.module.scss'
+import { useAnalytics } from 'app/App/analytics/firebase'
+import { OnboardingDidacticEvents } from 'commons/core/FirebaseEvents/constants'
 
 interface OnboardingCollectiveModalProps {
   className?: string
@@ -28,12 +31,16 @@ export const OnboardingCollectiveModal = ({
   const [isLoading, setIsLoading] = useState(false)
   const currentOffererId = useSelector(selectCurrentOffererId)
   const navigate = useNavigate()
+  const { logEvent } = useAnalytics()
 
   if (currentOffererId === null) {
     return <Spinner />
   }
 
   const checkEligibility = async () => {
+    logEvent(
+      OnboardingDidacticEvents.HAS_CLICKED_ALREADY_SUBMITTED_COLLECTIVE_CASE_DIDACTIC_ONBOARDING
+    )
     try {
       setErrorMessage(null)
       setIsLoading(true)
@@ -88,6 +95,11 @@ export const OnboardingCollectiveModal = ({
           opensInNewTab
           className={styles['onboarding-collective-button']}
           variant={ButtonVariant.PRIMARY}
+          onClick={() =>
+            logEvent(
+              OnboardingDidacticEvents.HAS_CLICKED_SUBMIT_COLLECTIVE_CASE_DIDACTIC_ONBOARDING
+            )
+          }
           to="https://www.demarches-simplifiees.fr/commencer/demande-de-referencement-sur-adage"
         >
           Déposer un dossier