fix: restore invite pageview tracking lost in the landing migration (#622)

Author: braianj

src/pages/invite/InvitePage.spec.tsx

@@ -4,9 +4,13 @@ import { InvitePage } from './InvitePage'
 const mockUseParams = jest.fn()
 const mockInviteHero = jest.fn()
 const mockFetch = jest.fn()
+const mockPage = jest.fn()
+let mockIsAnalyticsInitialized = true
+const INVITE_PATHNAME = '/invite/Brai'
 
 jest.mock('react-router-dom', () => ({
-  useParams: () => mockUseParams()
+  useParams: () => mockUseParams(),
+  useLocation: () => ({ pathname: INVITE_PATHNAME })
 }))
 
 jest.mock('decentraland-ui2', () => ({
@@ -18,6 +22,7 @@ jest.mock('@dcl/hooks', () => {
   const ReactLib = require('react') as typeof import('react')
   return {
     useTranslation: () => ({ t: (id: string) => id }),
+    useAnalytics: () => ({ isInitialized: mockIsAnalyticsInitialized, page: mockPage }),
     useAsyncMemo: <T,>(factory: () => Promise<T>, deps: unknown[]) => {
       const [state, setState] = ReactLib.useState<{ value: T | null; loading: boolean }>({ value: null, loading: true })
       ReactLib.useEffect(() => {
@@ -83,6 +88,12 @@ afterAll(() => {
   global.fetch = originalFetch
 })
 
+// Reset the analytics-initialized flag before every test so a test that flips it
+// false doesn't leak into the next one.
+beforeEach(() => {
+  mockIsAnalyticsInitialized = true
+})
+
 describe('when the referrer param is a Decentraland name', () => {
   beforeEach(() => {
     mockUseParams.mockReturnValue({ referrer: 'Brai' })
@@ -214,3 +225,70 @@ describe('when the referrer is empty', () => {
     expect(mockFetch).not.toHaveBeenCalled()
   })
 })
+
+describe('when tracking the invite pageview', () => {
+  beforeEach(() => {
+    mockUseParams.mockReturnValue({ referrer: 'Brai' })
+    mockFetch.mockResolvedValue({ json: () => Promise.resolve(null) })
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should fire a page() event for the invite path once analytics is initialized', async () => {
+    render(<InvitePage />)
+
+    await waitFor(() => expect(mockPage).toHaveBeenCalledWith(INVITE_PATHNAME))
+    expect(mockPage).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not fire page() before analytics is initialized', async () => {
+    mockIsAnalyticsInitialized = false
+    render(<InvitePage />)
+
+    await waitFor(() => expect(mockInviteHero).toHaveBeenCalled())
+    expect(mockPage).not.toHaveBeenCalled()
+  })
+})
+
+describe('when the document head already has meta tags', () => {
+  const addMeta = (attr: 'name' | 'property', key: string, content: string) => {
+    const meta = document.createElement('meta')
+    meta.setAttribute(attr, key)
+    meta.setAttribute('content', content)
+    document.head.appendChild(meta)
+    return meta
+  }
+  let metaEls: HTMLMetaElement[] = []
+
+  beforeEach(() => {
+    mockUseParams.mockReturnValue({ referrer: '' })
+    metaEls = [
+      addMeta('name', 'description', 'orig-desc'),
+      addMeta('property', 'og:title', 'orig-og-title'),
+      addMeta('property', 'og:description', 'orig-og-desc')
+    ]
+  })
+
+  afterEach(() => {
+    metaEls.forEach(el => el.remove())
+    metaEls = []
+    jest.resetAllMocks()
+  })
+
+  it('should set the invite meta on mount and restore the originals on unmount', async () => {
+    const { unmount } = render(<InvitePage />)
+    await waitFor(() => expect(mockInviteHero).toHaveBeenCalled())
+
+    expect(document.querySelector('meta[name="description"]')?.getAttribute('content')).toBe('page_invite.social.description')
+    expect(document.querySelector('meta[property="og:title"]')?.getAttribute('content')).toBe('page_invite.social.title')
+    expect(document.querySelector('meta[property="og:description"]')?.getAttribute('content')).toBe('page_invite.social.description')
+
+    unmount()
+
+    expect(document.querySelector('meta[name="description"]')?.getAttribute('content')).toBe('orig-desc')
+    expect(document.querySelector('meta[property="og:title"]')?.getAttribute('content')).toBe('orig-og-title')
+    expect(document.querySelector('meta[property="og:description"]')?.getAttribute('content')).toBe('orig-og-desc')
+  })
+})

src/pages/invite/InvitePage.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy, memo, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import type { Profile } from 'dcl-catalyst-client/dist/client/specs/lambdas-client'
-import { useAsyncMemo, useTranslation } from '@dcl/hooks'
+import { useAnalytics, useAsyncMemo, useTranslation } from '@dcl/hooks'
 import { EthAddress } from '@dcl/schemas/dist/misc'
 import { useDesktopMediaQuery } from 'decentraland-ui2'
 import { InviteHero } from '../../components/Invite/InviteHero/InviteHero'
@@ -78,8 +78,10 @@ function useDocumentMeta(title: string, description: string) {
 
 const InvitePage = memo(() => {
   const { referrer = '' } = useParams<{ referrer: string }>()
+  const location = useLocation()
   const isDesktop = useDesktopMediaQuery()
   const { t } = useTranslation()
+  const { isInitialized: isAnalyticsInitialized, page } = useAnalytics()
 
   const [referrerProfile, referrerProfileStatus] = useAsyncMemo(async () => {
     if (!referrer) return null
@@ -88,6 +90,15 @@ const InvitePage = memo(() => {
 
   useDocumentMeta(t('page_invite.social.title'), t('page_invite.social.description'))
 
+  // Invite is a Layout-less route, so it never gets the automatic page() that
+  // Layout fires for wrapped routes. Fire it here to restore the invite
+  // pageview lost in the Gatsby→SPA migration (the warehouse's invite funnel
+  // reads FCT_PAGEVIEWS for /invite paths). Mirrors Layout.tsx exactly.
+  useEffect(() => {
+    if (!isAnalyticsInitialized) return
+    page(location.pathname)
+  }, [isAnalyticsInitialized, location.pathname, page])
+
   return (
     <>
       <InviteHero