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

77 lines
2.8 KiB
TypeScript

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';
import { BookingHeader } from './components/booking-header';
import { BookingMobile } from './components/booking-mobile';
import { BookingTimeline } from './components/booking-timeline';
import { BookingToolbar } from './components/booking-toolbar';
import { BookingToolsDialog } from './components/booking-tools-dialog';
interface BookingProps {
complex: ComplexWithRole;
}
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 />
) : (
<div className="flex flex-col gap-5">
<BookingHeader />
<BookingToolbar />
<BookingTimeline />
<div className="grid gap-5 xl:grid-cols-4">
<BookingDaySummary />
<BookingQuickActions />
</div>
</div>
)}
<BookingCreateDialog />
<BookingToolsDialog />
</BookingProvider>
);
}