90 lines
3.0 KiB
TypeScript
90 lines
3.0 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, useBooking } 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 { BookingListView } from './components/booking-list-view';
|
|
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 { 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>
|
|
)}
|
|
<BookingInner />
|
|
<BookingCreateDialog />
|
|
<BookingToolsDialog />
|
|
</BookingProvider>
|
|
);
|
|
}
|
|
|
|
function BookingInner() {
|
|
const { viewMode } = useBooking();
|
|
const isMobile = useIsMobile();
|
|
|
|
if (viewMode === 'list') {
|
|
return <BookingListView />;
|
|
}
|
|
|
|
if (isMobile) {
|
|
return <BookingMobile />;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
<BookingHeader />
|
|
<BookingToolbar />
|
|
<BookingTimeline />
|
|
<div className="grid gap-5 xl:grid-cols-4">
|
|
<BookingDaySummary />
|
|
<BookingQuickActions />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|