fix: scope waitlist already_joined check to current user

Prevent a stale waitlist email in localStorage from showing
'already_joined' to a different user on the same browser.
Only mark as already_joined when the stored email matches the
authenticated user's email, and re-evaluate when auth state loads.

Adds regression test for cross-user stored email scenario.

Author: ayoub3bidi

src/pages/ProComingSoonPage.jsx

@@ -69,9 +69,14 @@ function ProComingSoonPage() {
 
   const [email, setEmail] = useState(defaultEmail);
   const emailEditedRef = useRef(false);
-  const [submitState, setSubmitState] = useState(() =>
-    readStoredWaitlistEmail() ? 'already_joined' : 'idle'
-  );
+  const [submitState, setSubmitState] = useState(() => {
+    const storedEmail = readStoredWaitlistEmail();
+    if (!storedEmail) return 'idle';
+    const currentUserEmail = profile?.email || user?.email;
+    return currentUserEmail && storedEmail === currentUserEmail
+      ? 'already_joined'
+      : 'idle';
+  });
   const [position, setPosition] = useState(null);
   const [errorKey, setErrorKey] = useState(null);
   const [waitlistCount, setWaitlistCount] = useState(0);
@@ -82,6 +87,17 @@ function ProComingSoonPage() {
     }
   }, [defaultEmail]);
 
+  // Re-evaluate already_joined when auth state loads — a different user may
+  // have left a stale waitlist email in localStorage.
+  useEffect(() => {
+    if (submitState !== 'idle') return;
+    const storedEmail = readStoredWaitlistEmail();
+    const currentUserEmail = profile?.email || user?.email;
+    if (storedEmail && currentUserEmail && storedEmail === currentUserEmail) {
+      setSubmitState('already_joined');
+    }
+  }, [user, profile, submitState]);
+
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'instant' });
   }, []);

src/pages/ProComingSoonPage.test.jsx

@@ -149,4 +149,26 @@ describe('ProComingSoonPage', () => {
       screen.queryByText(/learners are on the waitlist/i)
     ).not.toBeInTheDocument();
   });
+
+  it('does not show already_joined for a different user on same browser', async () => {
+    const { readStoredWaitlistEmail } =
+      await import('@/services/waitlistService.js');
+    vi.mocked(readStoredWaitlistEmail).mockReturnValue('other@example.com');
+
+    const { useAuth } = await import('@/hooks/useAuth.js');
+    useAuth.mockReturnValue({
+      user: { id: 'u2', email: 'current@example.com' },
+      profile: { email: 'current@example.com' },
+    });
+
+    renderPage('/pro');
+
+    // Form should be idle, not already_joined
+    expect(
+      screen.queryByText(/you are already on the waitlist/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /join the waitlist/i })
+    ).toBeInTheDocument();
+  });
 });