refactor(public-booking): remove CourtDetails component and simplify canGoBack logic #15
@@ -34,7 +34,6 @@ import {
|
|||||||
Moon,
|
Moon,
|
||||||
Share2,
|
Share2,
|
||||||
ShieldCheck,
|
ShieldCheck,
|
||||||
Shirt,
|
|
||||||
Sparkles,
|
Sparkles,
|
||||||
Sun,
|
Sun,
|
||||||
Trophy,
|
Trophy,
|
||||||
@@ -553,8 +552,7 @@ function PublicBookingDesktop(props: BookingShellProps) {
|
|||||||
const currentStep = getStep(selectedSlot, props.form.formState.isValid);
|
const currentStep = getStep(selectedSlot, props.form.formState.isValid);
|
||||||
const completedSteps = getCompletedSteps(selectedSlot, props.form.formState.isValid);
|
const completedSteps = getCompletedSteps(selectedSlot, props.form.formState.isValid);
|
||||||
const selectedDay = dayOptions.find((option) => option.value === selectedDate);
|
const selectedDay = dayOptions.find((option) => option.value === selectedDate);
|
||||||
const currentDayIndex = dayOptions.findIndex((option) => option.value === selectedDate);
|
const canGoBackButton = canGoBack;
|
||||||
const canGoBackButton = canGoBack || currentDayIndex > 0;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PublicBookingPageChrome
|
<PublicBookingPageChrome
|
||||||
@@ -683,10 +681,7 @@ function PublicBookingDesktop(props: BookingShellProps) {
|
|||||||
</div>
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<div className="grid grid-cols-[minmax(0,1fr)_minmax(340px,0.95fr)] gap-4">
|
|
||||||
<CourtDetails court={selectedCourt} />
|
|
||||||
<SelectedSlotCard {...props} />
|
<SelectedSlotCard {...props} />
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
@@ -1161,41 +1156,6 @@ function BookingTimeline({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function CourtDetails({ court }: { court?: PublicAvailabilityCourt }) {
|
|
||||||
return (
|
|
||||||
<Panel className="p-6">
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<div className="hidden size-24 items-center justify-center rounded border border-white/16 text-white/45 md:flex">
|
|
||||||
<MapPin className="size-14" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">
|
|
||||||
{court?.courtName ? `${court.courtName} de ${court.sport.name}` : 'Cancha'}
|
|
||||||
</h3>
|
|
||||||
<div className="mt-4 space-y-2 text-sm text-white/62">
|
|
||||||
<p className="flex items-center gap-2">
|
|
||||||
<Users className="size-4 text-emerald-400" />
|
|
||||||
Superficie: Césped sintético
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center gap-2">
|
|
||||||
<Dumbbell className="size-4 text-emerald-400" />
|
|
||||||
Turnos de {court?.slotDurationMinutes ?? 60} minutos
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center gap-2">
|
|
||||||
<Sparkles className="size-4 text-emerald-400" />
|
|
||||||
Iluminación LED
|
|
||||||
</p>
|
|
||||||
<p className="flex items-center gap-2">
|
|
||||||
<Shirt className="size-4 text-emerald-400" />
|
|
||||||
Vestuarios disponibles
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectedSlotCard(props: BookingShellProps & { compact?: boolean }) {
|
function SelectedSlotCard(props: BookingShellProps & { compact?: boolean }) {
|
||||||
const {
|
const {
|
||||||
selectedSlot,
|
selectedSlot,
|
||||||
@@ -1579,7 +1539,8 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
|||||||
visibleCourts.length,
|
visibleCourts.length,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const canGoBack = windowStartOffset > 0;
|
const currentDayIndex = dayOptions.findIndex((option) => option.value === selectedDate);
|
||||||
|
const canGoBack = windowStartOffset > 0 || currentDayIndex > 0;
|
||||||
|
|
||||||
const selectDate = (date: string) => {
|
const selectDate = (date: string) => {
|
||||||
setSelectedDate(date);
|
setSelectedDate(date);
|
||||||
|
|||||||
Reference in New Issue
Block a user