diff --git a/pro/src/commons/core/FirebaseEvents/constants.ts b/pro/src/commons/core/FirebaseEvents/constants.ts index c8c22711cf0..0c041e1a2b2 100644 --- a/pro/src/commons/core/FirebaseEvents/constants.ts +++ b/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', +} diff --git a/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.spec.tsx b/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.spec.tsx index f56f69f196c..77e934472e7 100644 --- a/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.spec.tsx +++ b/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(, { 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 + ) + }) + }) + }) }) diff --git a/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.tsx b/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.tsx index 00694a3876f..8a774a59df8 100644 --- a/pro/src/components/OnboardingOffersChoice/OnboardingOffersChoice.tsx +++ b/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 (
@@ -69,7 +72,12 @@ export const OnboardingOffersChoice = () => { diff --git a/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.spec.tsx b/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.spec.tsx index 5df488763f4..b77a7fd896e 100644 --- a/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.spec.tsx +++ b/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('', () => { + beforeEach(() => { + vi.spyOn(useAnalytics, 'useAnalytics').mockImplementation(() => ({ + logEvent: mockLogEvent, + })) + }) + it('should render correctly', async () => { renderOnboardingCollectiveModal() @@ -120,4 +130,30 @@ describe('', () => { ).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 + ) + }) + }) }) diff --git a/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.tsx b/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.tsx index 6c88d4eff35..0ef3f3f5a52 100644 --- a/pro/src/components/OnboardingOffersChoice/components/OnboardingCollectiveModal/OnboardingCollectiveModal.tsx +++ b/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 } 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