From 3ae7332b37e7715b91d1087348990f7ba1796790 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 15:08:16 +0000
Subject: [PATCH 01/12] fix: replace broken jail page with 3-step waitlist flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old JoinWaitlistPage gated the invite code input behind
isPermissionGranted, permanently trapping users who denied notifications.

New flow:
1. Email collection (required) — saved via updateUserById server action
2. Enable notifications (skippable) — soft prompt with "Not now" link
3. Jail screen — always shows invite code input regardless of notification state

Also adds a subtle notification banner on the jail screen for users who
skipped step 2.
---
 src/components/Invites/JoinWaitlistPage.tsx | 163 ++++++++++++++++----
 1 file changed, 134 insertions(+), 29 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 789cecc5a..7317eb73d 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -2,7 +2,7 @@
 
 import { useAuth } from '@/context/authContext'
 import { invitesApi } from '@/services/invites'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import InvitesPageLayout from './InvitesPageLayout'
 import { twMerge } from 'tailwind-merge'
 import ValidatedInput from '../Global/ValidatedInput'
@@ -15,35 +15,88 @@ import { useQuery } from '@tanstack/react-query'
 import PeanutLoading from '../Global/PeanutLoading'
 import { useSetupStore } from '@/redux/hooks'
 import { useNotifications } from '@/hooks/useNotifications'
+import { updateUserById } from '@/app/actions/users'
+
+const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
 
 const JoinWaitlistPage = () => {
-    const [isValid, setIsValid] = useState(false)
-    const [isChanging, setIsChanging] = useState(false)
-    const [isLoading, setisLoading] = useState(false)
-    const [error, setError] = useState('')
     const { fetchUser, isFetchingUser, logoutUser, user } = useAuth()
-    const [isLoggingOut, setisLoggingOut] = useState(false)
     const router = useRouter()
     const { inviteType, inviteCode: setupInviteCode } = useSetupStore()
-    const [inviteCode, setInviteCode] = useState(setupInviteCode)
-
     const { requestPermission, afterPermissionAttempt, isPermissionGranted } = useNotifications()
 
+    // Determine initial step: skip email if already on file, skip notifications if already granted
+    const initialStep = useMemo<1 | 2 | 3>(() => {
+        if (user?.user.email) {
+            return isPermissionGranted ? 3 : 2
+        }
+        return 1
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const [step, setStep] = useState<1 | 2 | 3>(initialStep)
+
+    // Step 1: Email state
+    const [emailValue, setEmailValue] = useState('')
+    const [emailError, setEmailError] = useState('')
+    const [isSubmittingEmail, setIsSubmittingEmail] = useState(false)
+
+    // Step 3: Invite code state
+    const [inviteCode, setInviteCode] = useState(setupInviteCode)
+    const [isValid, setIsValid] = useState(false)
+    const [isChanging, setIsChanging] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState('')
+    const [isLoggingOut, setIsLoggingOut] = useState(false)
+
     const { data, isLoading: isLoadingWaitlistPosition } = useQuery({
         queryKey: ['waitlist-position'],
         queryFn: () => invitesApi.getWaitlistQueuePosition(),
         enabled: !!user?.user.userId,
     })
 
-    const validateInviteCode = async (inviteCode: string): Promise<boolean> => {
-        setisLoading(true)
-        const res = await invitesApi.validateInviteCode(inviteCode)
-        setisLoading(false)
+    // Step 1: Submit email via server action
+    const handleEmailSubmit = async () => {
+        if (!isValidEmail(emailValue) || !user?.user.userId) return
+
+        setIsSubmittingEmail(true)
+        setEmailError('')
+
+        try {
+            const result = await updateUserById({ userId: user.user.userId, email: emailValue })
+            if (result.error) {
+                setEmailError(result.error)
+            } else {
+                setStep(isPermissionGranted ? 3 : 2)
+            }
+        } catch {
+            setEmailError('Something went wrong. Please try again.')
+        } finally {
+            setIsSubmittingEmail(false)
+        }
+    }
+
+    // Step 2: Enable notifications (always advances regardless of outcome)
+    const handleEnableNotifications = async () => {
+        try {
+            await requestPermission()
+            await afterPermissionAttempt()
+        } catch {
+            // permission denied or error — that's fine
+        }
+        setStep(3)
+    }
+
+    // Step 3: Validate and accept invite code
+    const validateInviteCode = async (code: string): Promise<boolean> => {
+        setIsLoading(true)
+        const res = await invitesApi.validateInviteCode(code)
+        setIsLoading(false)
         return res.success
     }
 
     const handleAcceptInvite = async () => {
-        setisLoading(true)
+        setIsLoading(true)
         try {
             const res = await invitesApi.acceptInvite(inviteCode, inviteType)
             if (res.success) {
@@ -55,15 +108,15 @@ const JoinWaitlistPage = () => {
         } catch {
             setError('Something went wrong. Please try again or contact support.')
         } finally {
-            setisLoading(false)
+            setIsLoading(false)
         }
     }
 
     const handleLogout = async () => {
-        setisLoggingOut(true)
+        setIsLoggingOut(true)
         await logoutUser()
         router.push('/setup')
-        setisLoggingOut(false)
+        setIsLoggingOut(false)
     }
 
     useEffect(() => {
@@ -76,34 +129,87 @@ const JoinWaitlistPage = () => {
         return <PeanutLoading coverFullScreen />
     }
 
+    const stepImage = step === 3 ? peanutAnim.src : chillPeanutAnim.src
+
     return (
-        <InvitesPageLayout image={isPermissionGranted ? peanutAnim.src : chillPeanutAnim.src}>
+        <InvitesPageLayout image={stepImage}>
             <div
                 className={twMerge(
                     'flex flex-grow flex-col justify-between overflow-hidden bg-white px-6 pb-8 pt-6 md:h-[100dvh] md:justify-center md:space-y-4',
-                    'flex flex-col items-end justify-center gap-5 pt-8 '
+                    'flex flex-col items-end justify-center gap-5 pt-8'
                 )}
             >
                 <div className="mx-auto w-full md:max-w-xs">
-                    {!isPermissionGranted && (
+                    {/* Step 1: Email Collection */}
+                    {step === 1 && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
-                            <h1 className="text-xl font-extrabold">Enable notifications</h1>
-                            <p className="text-base font-medium">We'll send you an update as soon as you get access.</p>
+                            <h1 className="text-xl font-extrabold">Stay in the loop</h1>
+                            <p className="text-base font-medium">
+                                Enter your email so we can reach you when you get access.
+                            </p>
 
-                            <Button
-                                onClick={async () => {
-                                    await requestPermission()
-                                    await afterPermissionAttempt()
+                            <input
+                                type="email"
+                                placeholder="you@example.com"
+                                value={emailValue}
+                                onChange={(e) => {
+                                    setEmailValue(e.target.value)
+                                    setEmailError('')
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter' && isValidEmail(emailValue)) handleEmailSubmit()
                                 }}
+                                className="h-12 w-full rounded-sm border border-n-2 px-4 text-base outline-none focus:border-black"
+                            />
+
+                            {emailError && <ErrorAlert description={emailError} />}
+
+                            <Button
                                 shadowSize="4"
+                                onClick={handleEmailSubmit}
+                                disabled={!isValidEmail(emailValue) || isSubmittingEmail}
+                                loading={isSubmittingEmail}
                             >
-                                Yes, notify me
+                                Continue
                             </Button>
                         </div>
                     )}
 
-                    {isPermissionGranted && (
+                    {/* Step 2: Enable Notifications (skippable) */}
+                    {step === 2 && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
+                            <h1 className="text-xl font-extrabold">Want instant updates?</h1>
+                            <p className="text-base font-medium">
+                                We&apos;ll notify you the moment you get access.
+                            </p>
+
+                            <Button shadowSize="4" onClick={handleEnableNotifications}>
+                                Enable notifications
+                            </Button>
+
+                            <button onClick={() => setStep(3)} className="text-sm underline">
+                                Not now
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Step 3: Jail Screen */}
+                    {step === 3 && (
+                        <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
+                            {!isPermissionGranted && (
+                                <div className="flex items-center justify-between rounded-sm border border-n-2 px-3 py-2">
+                                    <span className="text-xs font-medium text-n-3">
+                                        Enable notifications to get updates when you&apos;re unlocked
+                                    </span>
+                                    <button
+                                        onClick={handleEnableNotifications}
+                                        className="ml-2 shrink-0 text-xs font-bold underline"
+                                    >
+                                        Enable
+                                    </button>
+                                </div>
+                            )}
+
                             <h1 className="text-xl font-extrabold">You&apos;re still in Peanut jail</h1>
 
                             <h2 className="text-xl font-bold">Prisoner #{data?.position}</h2>
@@ -149,10 +255,9 @@ const JoinWaitlistPage = () => {
                             </div>
 
                             {!isValid && !isChanging && !!inviteCode && (
-                                <ErrorAlert description="This code won’t take you out of jail. Try another one!" />
+                                <ErrorAlert description="This code won't take you out of jail. Try another one!" />
                             )}
 
-                            {/* Show error from the API call */}
                             {error && <ErrorAlert description={error} />}
 
                             <button onClick={handleLogout} className="text-sm underline">

From 09902c85fb77757a08c41173b250db8e88f4eabb Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 15:19:07 +0000
Subject: [PATCH 02/12] style: fix prettier formatting

---
 src/components/Invites/JoinWaitlistPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 7317eb73d..97cd183fb 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -179,9 +179,7 @@ const JoinWaitlistPage = () => {
                     {step === 2 && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             <h1 className="text-xl font-extrabold">Want instant updates?</h1>
-                            <p className="text-base font-medium">
-                                We&apos;ll notify you the moment you get access.
-                            </p>
+                            <p className="text-base font-medium">We&apos;ll notify you the moment you get access.</p>
 
                             <Button shadowSize="4" onClick={handleEnableNotifications}>
                                 Enable notifications

From 271981c022c1f9a44ef18aa79a996d8bb8a420bc Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 15:36:58 +0000
Subject: [PATCH 03/12] Address CodeRabbit review: add try/finally guards and
 aria-label

- validateInviteCode: wrap in try/finally so isLoading always clears
- handleLogout: wrap in try/finally so isLoggingOut always clears
- Email input: add aria-label for accessibility
---
 src/components/Invites/JoinWaitlistPage.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 97cd183fb..6c3318938 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -90,9 +90,12 @@ const JoinWaitlistPage = () => {
     // Step 3: Validate and accept invite code
     const validateInviteCode = async (code: string): Promise<boolean> => {
         setIsLoading(true)
-        const res = await invitesApi.validateInviteCode(code)
-        setIsLoading(false)
-        return res.success
+        try {
+            const res = await invitesApi.validateInviteCode(code)
+            return res.success
+        } finally {
+            setIsLoading(false)
+        }
     }
 
     const handleAcceptInvite = async () => {
@@ -114,9 +117,12 @@ const JoinWaitlistPage = () => {
 
     const handleLogout = async () => {
         setIsLoggingOut(true)
-        await logoutUser()
-        router.push('/setup')
-        setIsLoggingOut(false)
+        try {
+            await logoutUser()
+            router.push('/setup')
+        } finally {
+            setIsLoggingOut(false)
+        }
     }
 
     useEffect(() => {
@@ -150,6 +156,7 @@ const JoinWaitlistPage = () => {
 
                             <input
                                 type="email"
+                                aria-label="Email address"
                                 placeholder="you@example.com"
                                 value={emailValue}
                                 onChange={(e) => {

From f985c43781a73898fb83fecf8651009b1599f27e Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 15:37:39 +0000
Subject: [PATCH 04/12] chore: update content submodule (prettier fix on
 workflow)

---
 src/content | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content b/src/content
index 412a0c80d..fc47d3cc9 160000
--- a/src/content
+++ b/src/content
@@ -1 +1 @@
-Subproject commit 412a0c80d75104debf456497361f3c902699f329
+Subproject commit fc47d3cc95230014bf42173d023536dc93b55c93

From 631020acc58af55e9e8db6faacbf7cef48d186aa Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 15:43:03 +0000
Subject: [PATCH 05/12] feat: rewrite waitlist page with nuqs URL-backed step
 state

- Step 1: email collection (required, server action)
- Step 2: enable notifications (skippable)
- Step 3: jail screen with invite code input (always accessible)

Uses useQueryState from nuqs for step management, matching the
codebase convention for multi-step flows. Step survives refresh,
supports deep-linking, and reacts to auth state changes via useEffect.

Fixes bug where users got permanently stuck on "Enable notifications"
screen when denying permission.
---
 src/components/Invites/JoinWaitlistPage.tsx | 49 +++++++++++++--------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 6c3318938..33c444616 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -2,7 +2,7 @@
 
 import { useAuth } from '@/context/authContext'
 import { invitesApi } from '@/services/invites'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import InvitesPageLayout from './InvitesPageLayout'
 import { twMerge } from 'tailwind-merge'
 import ValidatedInput from '../Global/ValidatedInput'
@@ -16,25 +16,29 @@ import PeanutLoading from '../Global/PeanutLoading'
 import { useSetupStore } from '@/redux/hooks'
 import { useNotifications } from '@/hooks/useNotifications'
 import { updateUserById } from '@/app/actions/users'
+import { useQueryState, parseAsStringEnum } from 'nuqs'
 
 const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
 
+type WaitlistStep = 'email' | 'notifications' | 'jail'
+
 const JoinWaitlistPage = () => {
     const { fetchUser, isFetchingUser, logoutUser, user } = useAuth()
     const router = useRouter()
     const { inviteType, inviteCode: setupInviteCode } = useSetupStore()
     const { requestPermission, afterPermissionAttempt, isPermissionGranted } = useNotifications()
 
-    // Determine initial step: skip email if already on file, skip notifications if already granted
-    const initialStep = useMemo<1 | 2 | 3>(() => {
-        if (user?.user.email) {
-            return isPermissionGranted ? 3 : 2
-        }
-        return 1
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
-    const [step, setStep] = useState<1 | 2 | 3>(initialStep)
+    // URL-backed step state — survives refresh, enables deep-linking
+    const [step, setStep] = useQueryState(
+        'step',
+        parseAsStringEnum<WaitlistStep>(['email', 'notifications', 'jail']).withDefault(
+            // Determine initial step: skip completed steps
+            (() => {
+                if (user?.user.email) return isPermissionGranted ? 'jail' : 'notifications'
+                return 'email'
+            })()
+        )
+    )
 
     // Step 1: Email state
     const [emailValue, setEmailValue] = useState('')
@@ -55,6 +59,15 @@ const JoinWaitlistPage = () => {
         enabled: !!user?.user.userId,
     })
 
+    // Redirect completed steps when user/permission state changes
+    useEffect(() => {
+        if (step === 'email' && user?.user.email) {
+            setStep(isPermissionGranted ? 'jail' : 'notifications')
+        } else if (step === 'notifications' && isPermissionGranted) {
+            setStep('jail')
+        }
+    }, [user?.user.email, isPermissionGranted, step, setStep])
+
     // Step 1: Submit email via server action
     const handleEmailSubmit = async () => {
         if (!isValidEmail(emailValue) || !user?.user.userId) return
@@ -67,7 +80,7 @@ const JoinWaitlistPage = () => {
             if (result.error) {
                 setEmailError(result.error)
             } else {
-                setStep(isPermissionGranted ? 3 : 2)
+                setStep(isPermissionGranted ? 'jail' : 'notifications')
             }
         } catch {
             setEmailError('Something went wrong. Please try again.')
@@ -84,7 +97,7 @@ const JoinWaitlistPage = () => {
         } catch {
             // permission denied or error — that's fine
         }
-        setStep(3)
+        setStep('jail')
     }
 
     // Step 3: Validate and accept invite code
@@ -135,7 +148,7 @@ const JoinWaitlistPage = () => {
         return <PeanutLoading coverFullScreen />
     }
 
-    const stepImage = step === 3 ? peanutAnim.src : chillPeanutAnim.src
+    const stepImage = step === 'jail' ? peanutAnim.src : chillPeanutAnim.src
 
     return (
         <InvitesPageLayout image={stepImage}>
@@ -147,7 +160,7 @@ const JoinWaitlistPage = () => {
             >
                 <div className="mx-auto w-full md:max-w-xs">
                     {/* Step 1: Email Collection */}
-                    {step === 1 && (
+                    {step === 'email' && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             <h1 className="text-xl font-extrabold">Stay in the loop</h1>
                             <p className="text-base font-medium">
@@ -183,7 +196,7 @@ const JoinWaitlistPage = () => {
                     )}
 
                     {/* Step 2: Enable Notifications (skippable) */}
-                    {step === 2 && (
+                    {step === 'notifications' && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             <h1 className="text-xl font-extrabold">Want instant updates?</h1>
                             <p className="text-base font-medium">We&apos;ll notify you the moment you get access.</p>
@@ -192,14 +205,14 @@ const JoinWaitlistPage = () => {
                                 Enable notifications
                             </Button>
 
-                            <button onClick={() => setStep(3)} className="text-sm underline">
+                            <button onClick={() => setStep('jail')} className="text-sm underline">
                                 Not now
                             </button>
                         </div>
                     )}
 
                     {/* Step 3: Jail Screen */}
-                    {step === 3 && (
+                    {step === 'jail' && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             {!isPermissionGranted && (
                                 <div className="flex items-center justify-between rounded-sm border border-n-2 px-3 py-2">

From 6aa8d910e8fa867f9fead86c5a11d404260030bd Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 16:12:08 +0000
Subject: [PATCH 06/12] =?UTF-8?q?fix:=20address=20review=20feedback=20?=
 =?UTF-8?q?=E2=80=94=20fetchUser,=20email=20util,=20border,=20back=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Call fetchUser() after email save to keep user context in sync
- Move isValidEmail to format.utils.ts for reuse (Kushagra review)
- Fix border-n-2 → border-n-1 to match design system convention
- Add back navigation from notifications step to email step
---
 src/components/Invites/JoinWaitlistPage.tsx | 12 ++++++++----
 src/utils/format.utils.ts                   |  2 ++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 33c444616..f3beea6b2 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -17,8 +17,7 @@ import { useSetupStore } from '@/redux/hooks'
 import { useNotifications } from '@/hooks/useNotifications'
 import { updateUserById } from '@/app/actions/users'
 import { useQueryState, parseAsStringEnum } from 'nuqs'
-
-const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+import { isValidEmail } from '@/utils/format.utils'
 
 type WaitlistStep = 'email' | 'notifications' | 'jail'
 
@@ -80,6 +79,7 @@ const JoinWaitlistPage = () => {
             if (result.error) {
                 setEmailError(result.error)
             } else {
+                await fetchUser()
                 setStep(isPermissionGranted ? 'jail' : 'notifications')
             }
         } catch {
@@ -179,7 +179,7 @@ const JoinWaitlistPage = () => {
                                 onKeyDown={(e) => {
                                     if (e.key === 'Enter' && isValidEmail(emailValue)) handleEmailSubmit()
                                 }}
-                                className="h-12 w-full rounded-sm border border-n-2 px-4 text-base outline-none focus:border-black"
+                                className="h-12 w-full rounded-sm border border-n-1 px-4 text-base outline-none focus:border-black"
                             />
 
                             {emailError && <ErrorAlert description={emailError} />}
@@ -208,6 +208,10 @@ const JoinWaitlistPage = () => {
                             <button onClick={() => setStep('jail')} className="text-sm underline">
                                 Not now
                             </button>
+
+                            <button onClick={() => setStep('email')} className="text-sm underline">
+                                Back
+                            </button>
                         </div>
                     )}
 
@@ -215,7 +219,7 @@ const JoinWaitlistPage = () => {
                     {step === 'jail' && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             {!isPermissionGranted && (
-                                <div className="flex items-center justify-between rounded-sm border border-n-2 px-3 py-2">
+                                <div className="flex items-center justify-between rounded-sm border border-n-1 px-3 py-2">
                                     <span className="text-xs font-medium text-n-3">
                                         Enable notifications to get updates when you&apos;re unlocked
                                     </span>
diff --git a/src/utils/format.utils.ts b/src/utils/format.utils.ts
index c0f0b2742..968ae9fea 100644
--- a/src/utils/format.utils.ts
+++ b/src/utils/format.utils.ts
@@ -108,3 +108,5 @@ export const formatCurrencyWithIntl = (
         return numericValue.toFixed(minDigits)
     }
 }
+
+export const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)

From 5db52ffad11461b4bda365a27e7ac13e16990018 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 16:22:40 +0000
Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20simplify=20waitlist=20page=20?=
 =?UTF-8?q?=E2=80=94=20reuse=20BaseInput,=20dedupe=20email=20regex,=20opti?=
 =?UTF-8?q?mize=20query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use BaseInput component instead of raw <input> for design system consistency
- Extract nextStepAfterEmail helper to deduplicate step advancement logic
- Reuse isValidEmail from format.utils in withdraw.utils (remove duplicate regex)
- Gate waitlist-position query on step === 'jail' to avoid unnecessary API calls
- Move loading spinner inside step 3 so steps 1-2 render immediately
- Simplify onClick handler (remove unnecessary arrow wrapper)
---
 src/components/Invites/JoinWaitlistPage.tsx | 29 ++++++++++-----------
 src/utils/withdraw.utils.ts                 |  4 +--
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index f3beea6b2..db63af7ae 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -18,9 +18,13 @@ import { useNotifications } from '@/hooks/useNotifications'
 import { updateUserById } from '@/app/actions/users'
 import { useQueryState, parseAsStringEnum } from 'nuqs'
 import { isValidEmail } from '@/utils/format.utils'
+import { BaseInput } from '@/components/0_Bruddle/BaseInput'
 
 type WaitlistStep = 'email' | 'notifications' | 'jail'
 
+const nextStepAfterEmail = (isPermissionGranted: boolean): WaitlistStep =>
+    isPermissionGranted ? 'jail' : 'notifications'
+
 const JoinWaitlistPage = () => {
     const { fetchUser, isFetchingUser, logoutUser, user } = useAuth()
     const router = useRouter()
@@ -31,9 +35,8 @@ const JoinWaitlistPage = () => {
     const [step, setStep] = useQueryState(
         'step',
         parseAsStringEnum<WaitlistStep>(['email', 'notifications', 'jail']).withDefault(
-            // Determine initial step: skip completed steps
             (() => {
-                if (user?.user.email) return isPermissionGranted ? 'jail' : 'notifications'
+                if (user?.user.email) return nextStepAfterEmail(isPermissionGranted)
                 return 'email'
             })()
         )
@@ -55,13 +58,13 @@ const JoinWaitlistPage = () => {
     const { data, isLoading: isLoadingWaitlistPosition } = useQuery({
         queryKey: ['waitlist-position'],
         queryFn: () => invitesApi.getWaitlistQueuePosition(),
-        enabled: !!user?.user.userId,
+        enabled: !!user?.user.userId && step === 'jail',
     })
 
     // Redirect completed steps when user/permission state changes
     useEffect(() => {
         if (step === 'email' && user?.user.email) {
-            setStep(isPermissionGranted ? 'jail' : 'notifications')
+            setStep(nextStepAfterEmail(isPermissionGranted))
         } else if (step === 'notifications' && isPermissionGranted) {
             setStep('jail')
         }
@@ -80,7 +83,7 @@ const JoinWaitlistPage = () => {
                 setEmailError(result.error)
             } else {
                 await fetchUser()
-                setStep(isPermissionGranted ? 'jail' : 'notifications')
+                setStep(nextStepAfterEmail(isPermissionGranted))
             }
         } catch {
             setEmailError('Something went wrong. Please try again.')
@@ -144,10 +147,6 @@ const JoinWaitlistPage = () => {
         }
     }, [isFetchingUser, user, router])
 
-    if (isLoadingWaitlistPosition) {
-        return <PeanutLoading coverFullScreen />
-    }
-
     const stepImage = step === 'jail' ? peanutAnim.src : chillPeanutAnim.src
 
     return (
@@ -167,8 +166,9 @@ const JoinWaitlistPage = () => {
                                 Enter your email so we can reach you when you get access.
                             </p>
 
-                            <input
+                            <BaseInput
                                 type="email"
+                                variant="sm"
                                 aria-label="Email address"
                                 placeholder="you@example.com"
                                 value={emailValue}
@@ -179,7 +179,7 @@ const JoinWaitlistPage = () => {
                                 onKeyDown={(e) => {
                                     if (e.key === 'Enter' && isValidEmail(emailValue)) handleEmailSubmit()
                                 }}
-                                className="h-12 w-full rounded-sm border border-n-1 px-4 text-base outline-none focus:border-black"
+                                className="h-12"
                             />
 
                             {emailError && <ErrorAlert description={emailError} />}
@@ -216,7 +216,8 @@ const JoinWaitlistPage = () => {
                     )}
 
                     {/* Step 3: Jail Screen */}
-                    {step === 'jail' && (
+                    {step === 'jail' && isLoadingWaitlistPosition && <PeanutLoading coverFullScreen />}
+                    {step === 'jail' && !isLoadingWaitlistPosition && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
                             {!isPermissionGranted && (
                                 <div className="flex items-center justify-between rounded-sm border border-n-1 px-3 py-2">
@@ -267,9 +268,7 @@ const JoinWaitlistPage = () => {
                                     className="h-12 w-4/12"
                                     loading={isLoading}
                                     shadowSize="4"
-                                    onClick={() => {
-                                        handleAcceptInvite()
-                                    }}
+                                    onClick={handleAcceptInvite}
                                     disabled={!isValid || isChanging || isLoading}
                                 >
                                     Next
diff --git a/src/utils/withdraw.utils.ts b/src/utils/withdraw.utils.ts
index bbdbc0396..508839158 100644
--- a/src/utils/withdraw.utils.ts
+++ b/src/utils/withdraw.utils.ts
@@ -1,4 +1,5 @@
 import { countryData, ALL_COUNTRIES_ALPHA3_TO_ALPHA2 } from '@/components/AddMoney/consts'
+import { isValidEmail } from '@/utils/format.utils'
 
 /**
  * Extracts the country name from an IBAN by parsing the first 2 characters (country code)
@@ -271,8 +272,7 @@ export const validatePixKey = (pixKey: string): { valid: boolean; message?: stri
     }
 
     // 4. Email: Standard email format
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-    if (emailRegex.test(trimmed)) {
+    if (isValidEmail(trimmed)) {
         if (trimmed.length > 77) {
             return { valid: false, message: 'Email is too long (max 77 characters)' }
         }

From 932a9ab1897027788e407f466d8452832bcebd28 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 17:15:14 +0000
Subject: [PATCH 08/12] fix: remove notification banner from jail screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback: the notification hint on the jail screen was out of
design system and visually distracting. Notifications are already
offered in step 2 — no need to re-prompt on the jail screen.
---
 src/components/Invites/JoinWaitlistPage.tsx | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index db63af7ae..74bf5a68f 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -208,10 +208,6 @@ const JoinWaitlistPage = () => {
                             <button onClick={() => setStep('jail')} className="text-sm underline">
                                 Not now
                             </button>
-
-                            <button onClick={() => setStep('email')} className="text-sm underline">
-                                Back
-                            </button>
                         </div>
                     )}
 
@@ -219,20 +215,6 @@ const JoinWaitlistPage = () => {
                     {step === 'jail' && isLoadingWaitlistPosition && <PeanutLoading coverFullScreen />}
                     {step === 'jail' && !isLoadingWaitlistPosition && (
                         <div className="flex h-full flex-col justify-between gap-4 md:gap-10 md:pt-5">
-                            {!isPermissionGranted && (
-                                <div className="flex items-center justify-between rounded-sm border border-n-1 px-3 py-2">
-                                    <span className="text-xs font-medium text-n-3">
-                                        Enable notifications to get updates when you&apos;re unlocked
-                                    </span>
-                                    <button
-                                        onClick={handleEnableNotifications}
-                                        className="ml-2 shrink-0 text-xs font-bold underline"
-                                    >
-                                        Enable
-                                    </button>
-                                </div>
-                            )}
-
                             <h1 className="text-xl font-extrabold">You&apos;re still in Peanut jail</h1>
 
                             <h2 className="text-xl font-bold">Prisoner #{data?.position}</h2>

From 588f52b0ba67374725246c054062ef3c42999a67 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 18:44:25 +0000
Subject: [PATCH 09/12] fix: address PR review comments

- Prevent URL bypass: enforce email step when no email on file
- Split shared isLoading into isValidating/isAccepting to prevent
  race condition between background validation and invite acceptance
- Add userId to waitlist-position queryKey for proper cache isolation
- Clear error state on logout
---
 src/components/Invites/JoinWaitlistPage.tsx | 29 ++++++++++++---------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 74bf5a68f..f5f899930 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -51,24 +51,28 @@ const JoinWaitlistPage = () => {
     const [inviteCode, setInviteCode] = useState(setupInviteCode)
     const [isValid, setIsValid] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
+    const [isValidating, setIsValidating] = useState(false)
+    const [isAccepting, setIsAccepting] = useState(false)
     const [error, setError] = useState('')
     const [isLoggingOut, setIsLoggingOut] = useState(false)
 
     const { data, isLoading: isLoadingWaitlistPosition } = useQuery({
-        queryKey: ['waitlist-position'],
+        queryKey: ['waitlist-position', user?.user.userId],
         queryFn: () => invitesApi.getWaitlistQueuePosition(),
         enabled: !!user?.user.userId && step === 'jail',
     })
 
-    // Redirect completed steps when user/permission state changes
+    // Enforce step invariants: prevent URL bypass and fast-forward completed steps
     useEffect(() => {
-        if (step === 'email' && user?.user.email) {
+        if (isFetchingUser) return
+        if (step !== 'email' && !user?.user.email) {
+            setStep('email')
+        } else if (step === 'email' && user?.user.email) {
             setStep(nextStepAfterEmail(isPermissionGranted))
         } else if (step === 'notifications' && isPermissionGranted) {
             setStep('jail')
         }
-    }, [user?.user.email, isPermissionGranted, step, setStep])
+    }, [user?.user.email, isPermissionGranted, isFetchingUser, step, setStep])
 
     // Step 1: Submit email via server action
     const handleEmailSubmit = async () => {
@@ -103,19 +107,19 @@ const JoinWaitlistPage = () => {
         setStep('jail')
     }
 
-    // Step 3: Validate and accept invite code
+    // Step 3: Validate and accept invite code (separate loading states to avoid race)
     const validateInviteCode = async (code: string): Promise<boolean> => {
-        setIsLoading(true)
+        setIsValidating(true)
         try {
             const res = await invitesApi.validateInviteCode(code)
             return res.success
         } finally {
-            setIsLoading(false)
+            setIsValidating(false)
         }
     }
 
     const handleAcceptInvite = async () => {
-        setIsLoading(true)
+        setIsAccepting(true)
         try {
             const res = await invitesApi.acceptInvite(inviteCode, inviteType)
             if (res.success) {
@@ -127,7 +131,7 @@ const JoinWaitlistPage = () => {
         } catch {
             setError('Something went wrong. Please try again or contact support.')
         } finally {
-            setIsLoading(false)
+            setIsAccepting(false)
         }
     }
 
@@ -138,6 +142,7 @@ const JoinWaitlistPage = () => {
             router.push('/setup')
         } finally {
             setIsLoggingOut(false)
+            setError('')
         }
     }
 
@@ -248,10 +253,10 @@ const JoinWaitlistPage = () => {
 
                                 <Button
                                     className="h-12 w-4/12"
-                                    loading={isLoading}
+                                    loading={isAccepting}
                                     shadowSize="4"
                                     onClick={handleAcceptInvite}
-                                    disabled={!isValid || isChanging || isLoading}
+                                    disabled={!isValid || isChanging || isValidating || isAccepting}
                                 >
                                     Next
                                 </Button>

From 8824d34c1643980857e71281c06ee7f1f7ff97a6 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 18:51:57 +0000
Subject: [PATCH 10/12] fix: guard handleEmailSubmit against duplicate calls

Add isSubmittingEmail check to the function itself so Enter key
can't bypass the loading guard and fire duplicate requests.
---
 src/components/Invites/JoinWaitlistPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index f5f899930..6dc34bc5b 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -76,7 +76,7 @@ const JoinWaitlistPage = () => {
 
     // Step 1: Submit email via server action
     const handleEmailSubmit = async () => {
-        if (!isValidEmail(emailValue) || !user?.user.userId) return
+        if (!isValidEmail(emailValue) || !user?.user.userId || isSubmittingEmail) return
 
         setIsSubmittingEmail(true)
         setEmailError('')

From b20d69fd66ded42e070e13e81fdd6be4cb5afa97 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 19:45:16 +0000
Subject: [PATCH 11/12] fix: add error handling and skip option to email step

The email submit had silent failure paths where no error was shown
to the user. Now every failure path sets an error message, and a
"Skip for now" link appears when the email step fails so users
aren't permanently stuck.
---
 src/components/Invites/JoinWaitlistPage.tsx | 43 +++++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index 6dc34bc5b..cb884ed23 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -62,21 +62,29 @@ const JoinWaitlistPage = () => {
         enabled: !!user?.user.userId && step === 'jail',
     })
 
+    // Track whether user explicitly skipped the email step
+    const [emailSkipped, setEmailSkipped] = useState(false)
+
     // Enforce step invariants: prevent URL bypass and fast-forward completed steps
     useEffect(() => {
         if (isFetchingUser) return
-        if (step !== 'email' && !user?.user.email) {
+        if (step !== 'email' && !user?.user.email && !emailSkipped) {
             setStep('email')
         } else if (step === 'email' && user?.user.email) {
             setStep(nextStepAfterEmail(isPermissionGranted))
         } else if (step === 'notifications' && isPermissionGranted) {
             setStep('jail')
         }
-    }, [user?.user.email, isPermissionGranted, isFetchingUser, step, setStep])
+    }, [user?.user.email, isPermissionGranted, isFetchingUser, step, setStep, emailSkipped])
 
     // Step 1: Submit email via server action
     const handleEmailSubmit = async () => {
-        if (!isValidEmail(emailValue) || !user?.user.userId || isSubmittingEmail) return
+        if (!isValidEmail(emailValue) || isSubmittingEmail) return
+
+        if (!user?.user.userId) {
+            setEmailError('Account not loaded yet. Please wait a moment and try again.')
+            return
+        }
 
         setIsSubmittingEmail(true)
         setEmailError('')
@@ -85,17 +93,30 @@ const JoinWaitlistPage = () => {
             const result = await updateUserById({ userId: user.user.userId, email: emailValue })
             if (result.error) {
                 setEmailError(result.error)
-            } else {
-                await fetchUser()
-                setStep(nextStepAfterEmail(isPermissionGranted))
+                return
             }
-        } catch {
-            setEmailError('Something went wrong. Please try again.')
+
+            const refreshedUser = await fetchUser()
+            if (!refreshedUser?.user.email) {
+                console.error('[JoinWaitlist] Email update succeeded but fetchUser did not return email')
+                setEmailError('Email saved, but we had trouble loading your profile. Please try again.')
+                return
+            }
+
+            setStep(nextStepAfterEmail(isPermissionGranted))
+        } catch (e) {
+            console.error('[JoinWaitlist] handleEmailSubmit failed:', e)
+            setEmailError('Something went wrong. Please try again or skip this step.')
         } finally {
             setIsSubmittingEmail(false)
         }
     }
 
+    const handleSkipEmail = () => {
+        setEmailSkipped(true)
+        setStep(nextStepAfterEmail(isPermissionGranted))
+    }
+
     // Step 2: Enable notifications (always advances regardless of outcome)
     const handleEnableNotifications = async () => {
         try {
@@ -197,6 +218,12 @@ const JoinWaitlistPage = () => {
                             >
                                 Continue
                             </Button>
+
+                            {emailError && (
+                                <button onClick={handleSkipEmail} className="text-sm underline">
+                                    Skip for now
+                                </button>
+                            )}
                         </div>
                     )}
 

From 77b68cd8f54d570b5e6a9de28acca828cfcf0742 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Tue, 10 Mar 2026 19:58:51 +0000
Subject: [PATCH 12/12] fix: race condition between setStep and react-query
 user state

After email submit succeeds, setStep('notifications') fires but the
useEffect sees stale user data (no email yet) and resets to 'email'.
Fix: track emailStepDone flag set synchronously before setStep, so
the useEffect doesn't override the step transition.
---
 src/components/Invites/JoinWaitlistPage.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/Invites/JoinWaitlistPage.tsx b/src/components/Invites/JoinWaitlistPage.tsx
index cb884ed23..3df66a37a 100644
--- a/src/components/Invites/JoinWaitlistPage.tsx
+++ b/src/components/Invites/JoinWaitlistPage.tsx
@@ -62,20 +62,26 @@ const JoinWaitlistPage = () => {
         enabled: !!user?.user.userId && step === 'jail',
     })
 
-    // Track whether user explicitly skipped the email step
-    const [emailSkipped, setEmailSkipped] = useState(false)
+    // Track whether the email step has been completed or skipped this session,
+    // so the step invariant useEffect doesn't race with react-query state updates
+    const [emailStepDone, setEmailStepDone] = useState(!!user?.user.email)
 
     // Enforce step invariants: prevent URL bypass and fast-forward completed steps
     useEffect(() => {
         if (isFetchingUser) return
-        if (step !== 'email' && !user?.user.email && !emailSkipped) {
+        if (step !== 'email' && !user?.user.email && !emailStepDone) {
             setStep('email')
-        } else if (step === 'email' && user?.user.email) {
+        } else if (step === 'email' && (user?.user.email || emailStepDone)) {
             setStep(nextStepAfterEmail(isPermissionGranted))
         } else if (step === 'notifications' && isPermissionGranted) {
             setStep('jail')
         }
-    }, [user?.user.email, isPermissionGranted, isFetchingUser, step, setStep, emailSkipped])
+    }, [user?.user.email, isPermissionGranted, isFetchingUser, step, setStep, emailStepDone])
+
+    // Sync emailStepDone when user data loads with an existing email
+    useEffect(() => {
+        if (user?.user.email) setEmailStepDone(true)
+    }, [user?.user.email])
 
     // Step 1: Submit email via server action
     const handleEmailSubmit = async () => {
@@ -103,6 +109,9 @@ const JoinWaitlistPage = () => {
                 return
             }
 
+            // Mark email step as done BEFORE setStep to prevent the useEffect
+            // from racing and resetting the step back to 'email'
+            setEmailStepDone(true)
             setStep(nextStepAfterEmail(isPermissionGranted))
         } catch (e) {
             console.error('[JoinWaitlist] handleEmailSubmit failed:', e)
@@ -113,7 +122,7 @@ const JoinWaitlistPage = () => {
     }
 
     const handleSkipEmail = () => {
-        setEmailSkipped(true)
+        setEmailStepDone(true)
         setStep(nextStepAfterEmail(isPermissionGranted))
     }