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

apps/backend/src/lib/auth.ts

@@ -31,11 +31,14 @@ export const auth = betterAuth({
     sendOnSignUp: true,
     autoSignInAfterVerification: true,
     sendVerificationEmail: async ({ user, url }) => {
+      const verificationUrl = new URL(url);
+      const appUrl = process.env.APP_BASE_URL ?? 'http://localhost:5173';
+      verificationUrl.searchParams.set('callbackURL', appUrl);
       await sendMail({
         to: user.email,
         subject: 'Verificá tu email en Playzer',
-        html: `Hacé click para verificar tu email: <a href="${url}">${url}</a>`,
+        html: `Hacé click para verificar tu email: <a href="${verificationUrl.toString()}">${verificationUrl.toString()}</a>`,
-        text: `Hacé click para verificar tu email: ${url}`,
+        text: `Hacé click para verificar tu email: ${verificationUrl.toString()}`,
       });
     },
   },

apps/backend/src/modules/admin-booking/services/admin-booking.service.ts

@@ -258,6 +258,16 @@ export async function createAdminBooking(
   input: CreateAdminBookingInput
 ) {
   const complex = await ensureComplexAccess(complexId, userId);
+
+  const adminUser = await db.user.findUnique({
+    where: { id: userId },
+    select: { emailVerified: true },
+  });
+
+  if (!adminUser?.emailVerified) {
+    throw new AdminBookingServiceError('Debés verificar tu email para poder crear reservas.', 403);
+  }
+
   const bookingDate = parseIsoDate(input.date);
   const dayOfWeek = getDayOfWeek(bookingDate);
 

apps/backend/src/modules/public-booking/services/public-booking.service.ts

@@ -329,9 +329,34 @@ export async function getPublicBookingConfirmation(complexSlug: string, bookingC
   };
 }
 
+async function hasVerifiedAdmin(complexId: string): Promise<boolean> {
+  const verifiedAdmin = await db.complexUser.findFirst({
+    where: {
+      complexId,
+      role: 'ADMIN',
+      user: { emailVerified: true },
+    },
+  });
+  return verifiedAdmin !== null;
+}
+
 export async function listPublicAvailability(complexSlug: string, query: PublicAvailabilityQuery) {
   const { bookingDate, dayOfWeek } = parseIsoDate(query.date);
   const complex = await getComplexWithBookingData(complexSlug);
+
+  if (!(await hasVerifiedAdmin(complex.id))) {
+    return {
+      complexId: complex.id,
+      complexName: complex.complexName,
+      complexAddress: complex.physicalAddress ?? null,
+      complexSlug: complex.complexSlug,
+      date: query.date,
+      sportSelectionRequired: false,
+      sports: [],
+      courts: [],
+    };
+  }
+
   const sports = resolveSports(complex);
   const sportSelectionRequired = sports.length > 1;
 
@@ -427,6 +452,14 @@ export async function listPublicAvailability(complexSlug: string, query: PublicA
 export async function createPublicBooking(complexSlug: string, input: CreatePublicBookingInput) {
   const { bookingDate, dayOfWeek } = parseIsoDate(input.date);
   const complex = await getComplexWithBookingData(complexSlug);
+
+  if (!(await hasVerifiedAdmin(complex.id))) {
+    throw new PublicBookingServiceError(
+      'El complejo no puede recibir reservas hasta que un administrador verifique su email.',
+      403
+    );
+  }
+
   const sports = resolveSports(complex);
   const { sportSelectionRequired } = validateSportSelection(sports, input.sportId);
 

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,6 +638,8 @@ function PublicBookingDesktop(props: BookingShellProps) {
           )}
           {isError && <StatusPanel>{errorMessage}</StatusPanel>}
           {isLoading && <StatusPanel>Buscando disponibilidad...</StatusPanel>}
+          {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} />
@@ -680,6 +682,8 @@ function PublicBookingDesktop(props: BookingShellProps) {
                 <CourtDetails court={selectedCourt} />
                 <SelectedSlotCard {...props} />
               </div>
+            </>
+          )}
         </section>
       </div>
     </PublicBookingPageChrome>
@@ -711,6 +715,7 @@ function PublicBookingMobile(props: BookingShellProps) {
                 options={props.sports.map((sport) => ({ value: sport.id, label: sport.name }))}
               />
             )}
+            {props.courts.length > 0 ? (
               <MobileSelect
                 label="Cancha"
                 value={selectedCourt?.courtId ?? ''}
@@ -721,6 +726,13 @@ function PublicBookingMobile(props: BookingShellProps) {
                   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,6 +768,7 @@ function PublicBookingMobile(props: BookingShellProps) {
         )}
         {props.isLoading && <StatusPanel>Buscando disponibilidad...</StatusPanel>}
         {props.isError && <StatusPanel>{props.errorMessage}</StatusPanel>}
+        {selectedCourt && (
           <Panel className="overflow-hidden">
             <div className="p-3">
               <CourtHeader court={selectedCourt} compact />
@@ -775,6 +788,7 @@ function PublicBookingMobile(props: BookingShellProps) {
               <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;
         }