Add SaveReferral component and unit tests: ensure app-wide referral capture and fix attribution issues

Author: MartinBraquet

web/components/save-referral.tsx

@@ -0,0 +1,15 @@
+import {useSaveReferral} from 'web/hooks/use-save-referral'
+import {useUser} from 'web/hooks/use-user'
+
+/**
+ * Records the `?referrer=` (or base64 `?r=`) query param on whatever page the visitor lands on.
+ *
+ * Mounted app-wide on purpose: referral links point at the home page (`/?referrer=alice`), the
+ * about page, an event — not just profiles. `useSaveReferral` used to run only on `/[username]`,
+ * so every share that wasn't a profile link lost its attribution.
+ */
+export function SaveReferral() {
+  const user = useUser()
+  useSaveReferral(user)
+  return null
+}

web/hooks/use-save-referral.ts

@@ -13,9 +13,13 @@ export const useSaveReferral = (
   const {searchParams} = useDefinedSearchParams()
 
   useEffect(() => {
+    // Null on the first render of a statically-optimized page — the query is only readable once the
+    // router is ready, which re-runs this effect. Don't blow up in between.
+    if (!searchParams) return
+
     const referrer = searchParams.get('r')
       ? decodeBase64(searchParams.get('r') as string)
-      : (searchParams.get('referrer') as string)
+      : (searchParams.get('referrer') ?? undefined)
 
     const referrerOrDefault = referrer || options?.defaultReferrerUsername
 

web/pages/_app.tsx

@@ -27,6 +27,7 @@ import {LiveRegionProvider} from 'web/components/live-region'
 import {UnseenMessageChannelsProvider} from 'web/components/messaging/messages-icon'
 import {PrivateMessageMembershipsProvider} from 'web/components/messaging/private-message-memberships-context'
 import {ReviewPrompts} from 'web/components/review-prompts'
+import {SaveReferral} from 'web/components/save-referral'
 import {ChoicesProvider} from 'web/hooks/use-choices'
 import {useFontPreferenceManager} from 'web/hooks/use-font-preference'
 import {useHasLoaded} from 'web/hooks/use-has-loaded'
@@ -342,6 +343,7 @@ function MyApp(props: AppProps<PageProps>) {
                               <WebPush />
                               <NativePush />
                               <ReviewPrompts />
+                              <SaveReferral />
                               <Component {...pageProps} />
                             </PrivateMessageMembershipsProvider>
                           </UnseenMessageChannelsProvider>

web/tests/unit/save-referral.test.ts

@@ -0,0 +1,40 @@
+import {readFileSync} from 'fs'
+import {join} from 'path'
+
+/**
+ * `?referrer=` attribution is invisible when it breaks: the visitor signs up fine, the referrer just
+ * never gets credited, and nothing in the UI says so. It broke exactly once already — `useSaveReferral`
+ * was mounted only on `/[username]`, so `compassmeet.com/Martin` saved the referral but
+ * `compassmeet.com/?referrer=Martin` (the link the referrals page hands out) silently dropped it.
+ *
+ * `testEnvironment` is `node` and there's no DOM test renderer here, so the effect itself can't be
+ * exercised. These assertions pin the two things whose absence caused that bug instead: the hook is
+ * mounted app-wide, and the component doing the mounting actually calls it.
+ */
+
+const read = (...parts: string[]) => readFileSync(join(__dirname, '..', '..', ...parts), 'utf8')
+
+describe('referral capture', () => {
+  it('is mounted app-wide, not only on the profile page', () => {
+    const app = read('pages', '_app.tsx')
+
+    expect(app).toContain("from 'web/components/save-referral'")
+    expect(app).toContain('<SaveReferral />')
+  })
+
+  it('SaveReferral feeds the signed-in user to useSaveReferral', () => {
+    const component = read('components', 'save-referral.tsx')
+
+    // The hook only writes for `user === null` (logged out), so passing the user is what makes it
+    // wait for auth to resolve instead of writing on every page for everyone.
+    expect(component).toContain('useSaveReferral(user)')
+    expect(component).toContain('useUser()')
+  })
+
+  it('reads both the plain and the base64 referrer params', () => {
+    const hook = read('hooks', 'use-save-referral.ts')
+
+    expect(hook).toContain("searchParams.get('referrer')")
+    expect(hook).toContain("searchParams.get('r')")
+  })
+})