jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jose Selesan
2026-06-02 15:47:36 -03:00
parent 88ea7e70da
commit 0e69759549
6 changed files with 173 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
apps/frontend/src/features/public-booking/public-booking-page.tsx
View File

@@ -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>
);