feat(email-validation): implement email verification checks for booking creation and resend functionality

apps/frontend/src/features/booking/booking.tsx

@@ -1,5 +1,8 @@
 import { useIsMobile } from '@/hooks/use-mobile';
+import { authClient } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
 import type { ComplexWithRole } from '@repo/api-contract';
+import { useState } from 'react';
 import { BookingProvider } from './booking-provider';
 import { BookingCreateDialog } from './components/booking-create-dialog';
 import { BookingDaySummary, BookingQuickActions } from './components/booking-day-summary';
@@ -15,9 +18,44 @@ interface BookingProps {
 
 export function Booking({ complex }: BookingProps) {
   const isMobile = useIsMobile();
+  const { user } = useAuth();
+  const [sending, setSending] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);
+
+  const emailNotVerified = user && !user.emailVerified;
+
+  const handleResendVerification = async () => {
+    if (!user?.email || sending) return;
+    setSending(true);
+    try {
+      await authClient.sendVerificationEmail({ email: user.email });
+      setEmailSent(true);
+      setTimeout(() => setEmailSent(false), 6000);
+    } catch {
+      // Silently fail — the banner already shows the email to contact
+    } finally {
+      setSending(false);
+    }
+  };
 
   return (
     <BookingProvider complex={complex}>
+      {emailNotVerified && (
+        <div className="mb-6 flex items-center justify-between gap-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-800/30 dark:bg-amber-950/30 dark:text-amber-200">
+          <span>
+            No verificaste tu email. Para crear reservas necesitás verificar tu dirección de correo
+            electrónico.
+          </span>
+          <button
+            type="button"
+            onClick={handleResendVerification}
+            disabled={sending}
+            className="shrink-0 rounded-lg bg-amber-200 px-3 py-1.5 text-xs font-medium text-amber-900 transition-colors hover:bg-amber-300 disabled:opacity-50 dark:bg-amber-800 dark:text-amber-50 dark:hover:bg-amber-700"
+          >
+            {sending ? 'Enviando...' : emailSent ? '¡Email enviado!' : 'Reenviar email'}
+          </button>
+        </div>
+      )}
       {isMobile ? (
         <BookingMobile />
       ) : (

apps/frontend/src/features/public-booking/public-booking-page.tsx

@@ -638,48 +638,52 @@ function PublicBookingDesktop(props: BookingShellProps) {
           )}
           {isError && <StatusPanel>{errorMessage}</StatusPanel>}
           {isLoading && <StatusPanel>Buscando disponibilidad...</StatusPanel>}
-          <Panel className="overflow-hidden">
-            <div className="flex items-center border-b border-white/10 px-6 py-5">
-              <CourtHeader court={selectedCourt} complexName={props.complexName} />
-              <div className="ml-auto flex items-center overflow-hidden rounded-md border border-white/10 bg-white/[0.035] text-sm">
-                <button
-                  type="button"
-                  className="flex size-11 items-center justify-center border-r border-white/10 transition hover:bg-white/[0.06]"
-                  onClick={props.onPreviousDay}
-                  disabled={!canGoBackButton}
-                  aria-label="Día anterior"
-                >
-                  <ChevronLeft className="size-5" />
-                </button>
-                <div className="flex h-11 min-w-[250px] items-center justify-center gap-2 px-4">
-                  <CalendarDays className="size-4 text-white/76" />
-                  <span>{selectedDay?.longLabel ?? selectedDate}</span>
+          {selectedCourt && (
+            <>
+              <Panel className="overflow-hidden">
+                <div className="flex items-center border-b border-white/10 px-6 py-5">
+                  <CourtHeader court={selectedCourt} complexName={props.complexName} />
+                  <div className="ml-auto flex items-center overflow-hidden rounded-md border border-white/10 bg-white/[0.035] text-sm">
+                    <button
+                      type="button"
+                      className="flex size-11 items-center justify-center border-r border-white/10 transition hover:bg-white/[0.06]"
+                      onClick={props.onPreviousDay}
+                      disabled={!canGoBackButton}
+                      aria-label="Día anterior"
+                    >
+                      <ChevronLeft className="size-5" />
+                    </button>
+                    <div className="flex h-11 min-w-[250px] items-center justify-center gap-2 px-4">
+                      <CalendarDays className="size-4 text-white/76" />
+                      <span>{selectedDay?.longLabel ?? selectedDate}</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="flex size-11 items-center justify-center border-l border-white/10 transition hover:bg-white/[0.06]"
+                      onClick={props.onNextDay}
+                      aria-label="Día siguiente"
+                    >
+                      <ChevronRight className="size-5" />
+                    </button>
+                  </div>
                 </div>
-                <button
-                  type="button"
-                  className="flex size-11 items-center justify-center border-l border-white/10 transition hover:bg-white/[0.06]"
-                  onClick={props.onNextDay}
-                  aria-label="Día siguiente"
-                >
-                  <ChevronRight className="size-5" />
-                </button>
+
+                <div className="p-6">
+                  <Legend />
+                  <BookingTimeline
+                    court={selectedCourt}
+                    selectedSlot={selectedSlot}
+                    onSelectSlot={onSelectSlot}
+                  />
+                </div>
+              </Panel>
+
+              <div className="grid grid-cols-[minmax(0,1fr)_minmax(340px,0.95fr)] gap-4">
+                <CourtDetails court={selectedCourt} />
+                <SelectedSlotCard {...props} />
               </div>
-            </div>
-
-            <div className="p-6">
-              <Legend />
-              <BookingTimeline
-                court={selectedCourt}
-                selectedSlot={selectedSlot}
-                onSelectSlot={onSelectSlot}
-              />
-            </div>
-          </Panel>
-
-          <div className="grid grid-cols-[minmax(0,1fr)_minmax(340px,0.95fr)] gap-4">
-            <CourtDetails court={selectedCourt} />
-            <SelectedSlotCard {...props} />
-          </div>
+            </>
+          )}
         </section>
       </div>
     </PublicBookingPageChrome>
@@ -711,16 +715,24 @@ function PublicBookingMobile(props: BookingShellProps) {
                 options={props.sports.map((sport) => ({ value: sport.id, label: sport.name }))}
               />
             )}
-            <MobileSelect
-              label="Cancha"
-              value={selectedCourt?.courtId ?? ''}
-              placeholder="Seleccioná"
-              onValueChange={props.onSelectCourt}
-              options={props.courts.map((court) => ({
-                value: court.courtId,
-                label: court.courtName,
-              }))}
-            />
+            {props.courts.length > 0 ? (
+              <MobileSelect
+                label="Cancha"
+                value={selectedCourt?.courtId ?? ''}
+                placeholder="Seleccioná"
+                onValueChange={props.onSelectCourt}
+                options={props.courts.map((court) => ({
+                  value: court.courtId,
+                  label: court.courtName,
+                }))}
+              />
+            ) : (
+              !props.isLoading && (
+                <p className="rounded-md border border-white/10 bg-white/[0.035] p-3 text-sm text-white/62">
+                  No hay canchas disponibles para esta fecha.
+                </p>
+              )
+            )}
           </div>
         </Panel>
 
@@ -756,25 +768,27 @@ function PublicBookingMobile(props: BookingShellProps) {
         )}
         {props.isLoading && <StatusPanel>Buscando disponibilidad...</StatusPanel>}
         {props.isError && <StatusPanel>{props.errorMessage}</StatusPanel>}
-        <Panel className="overflow-hidden">
-          <div className="p-3">
-            <CourtHeader court={selectedCourt} compact />
-            <div className="mt-3">
-              <Legend />
+        {selectedCourt && (
+          <Panel className="overflow-hidden">
+            <div className="p-3">
+              <CourtHeader court={selectedCourt} compact />
+              <div className="mt-3">
+                <Legend />
+              </div>
             </div>
-          </div>
-          <div className="border-t border-white/10 px-0 py-3">
-            <BookingTimeline
-              court={selectedCourt}
-              selectedSlot={props.selectedSlot}
-              onSelectSlot={props.onSelectSlot}
-              compact
-            />
-          </div>
-          <div className="px-3 pb-3">
-            <SelectedSlotCard {...props} compact />
-          </div>
-        </Panel>
+            <div className="border-t border-white/10 px-0 py-3">
+              <BookingTimeline
+                court={selectedCourt}
+                selectedSlot={props.selectedSlot}
+                onSelectSlot={props.onSelectSlot}
+                compact
+              />
+            </div>
+            <div className="px-3 pb-3">
+              <SelectedSlotCard {...props} compact />
+            </div>
+          </Panel>
+        )}
       </div>
     </PublicBookingPageChrome>
   );

apps/frontend/src/main.tsx

@@ -27,7 +27,11 @@ function AppRouter() {
 
   useEffect(() => {
     configureApiClient({
-      onForbidden: async () => {
+      onForbidden: async (error) => {
+        if (error.message?.includes('verificar tu email')) {
+          return;
+        }
+
         if (!auth.isAuthenticated) {
           return;
         }