feat(booking-ui): add confirmation dialog for cancelling bookings and improve mobile UI
This commit is contained in:
Jose Selesan
@@ -24,6 +24,7 @@ import {
|
||||
Wrench,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useBooking } from '../booking-provider';
|
||||
|
||||
function formatDate(date: string | undefined) {
|
||||
@@ -70,6 +71,7 @@ export function BookingToolsDialog() {
|
||||
useBooking();
|
||||
const isMobile = useIsMobile();
|
||||
const booking = selectedSegment?.booking;
|
||||
const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);
|
||||
|
||||
const status = statusConfig[booking?.status ?? 'CONFIRMED'] ?? {
|
||||
label: booking?.status,
|
||||
@@ -93,151 +95,211 @@ export function BookingToolsDialog() {
|
||||
closeBookingTools();
|
||||
};
|
||||
|
||||
const cancelConfirmDialog = (
|
||||
<ResponsiveDialog
|
||||
open={confirmCancelOpen}
|
||||
onOpenChange={(open) => !open && setConfirmCancelOpen(false)}
|
||||
>
|
||||
<ResponsiveDialogContent>
|
||||
<ResponsiveDialogHeader>
|
||||
<ResponsiveDialogTitle>¿Cancelar reserva?</ResponsiveDialogTitle>
|
||||
<ResponsiveDialogDescription>
|
||||
Esta acción no se puede deshacer. Se eliminará la reserva y la cancha volverá a estar
|
||||
disponible.
|
||||
</ResponsiveDialogDescription>
|
||||
</ResponsiveDialogHeader>
|
||||
|
||||
<div className="space-y-2 rounded-lg border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Cliente</span>
|
||||
<span className="text-sm font-medium">{booking?.customerName ?? '-'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Cancha</span>
|
||||
<span className="text-sm font-medium">{booking?.courtName ?? '-'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Fecha</span>
|
||||
<span className="text-sm font-medium">{formatDate(booking?.date) || '-'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Horario</span>
|
||||
<span className="text-sm font-medium">
|
||||
{booking?.startTime ?? '--:--'} a {booking?.endTime ?? '--:--'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ResponsiveDialogFooter>
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline">Volver</Button>
|
||||
</ResponsiveDialogClose>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
setConfirmCancelOpen(false);
|
||||
updateStatus('CANCELLED');
|
||||
}}
|
||||
>
|
||||
Sí, cancelar reserva
|
||||
</Button>
|
||||
</ResponsiveDialogFooter>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<>
|
||||
<ResponsiveDialog
|
||||
open={bookingToolsOpen}
|
||||
onOpenChange={(open) => !open && closeBookingTools()}
|
||||
>
|
||||
<ResponsiveDialogContent
|
||||
className="data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<MobileBookingToolsSheet
|
||||
status={status}
|
||||
onComplete={() => updateStatus('COMPLETED')}
|
||||
onCancel={() => setConfirmCancelOpen(true)}
|
||||
onReminder={sendWhatsappReminder}
|
||||
onNoShow={() => updateStatus('NOSHOW')}
|
||||
/>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
{cancelConfirmDialog}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResponsiveDialog
|
||||
open={bookingToolsOpen}
|
||||
onOpenChange={(open) => !open && closeBookingTools()}
|
||||
>
|
||||
<ResponsiveDialogContent
|
||||
className="data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
|
||||
className="data-[variant=dialog]:max-w-5xl data-[variant=drawer]:max-h-[92dvh] data-[variant=drawer]:overflow-y-auto data-[variant=drawer]:px-4 data-[variant=drawer]:pb-5"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<MobileBookingToolsSheet
|
||||
status={status}
|
||||
onComplete={() => updateStatus('COMPLETED')}
|
||||
onCancel={() => updateStatus('CANCELLED')}
|
||||
onReminder={sendWhatsappReminder}
|
||||
onNoShow={() => updateStatus('NOSHOW')}
|
||||
/>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
);
|
||||
}
|
||||
<ResponsiveDialogHeader className="data-[variant=drawer]:px-0 data-[variant=drawer]:text-left">
|
||||
<ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
|
||||
<ResponsiveDialogDescription>
|
||||
Administra la reserva y su estado.
|
||||
</ResponsiveDialogDescription>
|
||||
</ResponsiveDialogHeader>
|
||||
|
||||
return (
|
||||
<ResponsiveDialog open={bookingToolsOpen} onOpenChange={(open) => !open && closeBookingTools()}>
|
||||
<ResponsiveDialogContent
|
||||
className="data-[variant=dialog]:max-w-5xl data-[variant=drawer]:max-h-[92dvh] data-[variant=drawer]:overflow-y-auto data-[variant=drawer]:px-4 data-[variant=drawer]:pb-5"
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
>
|
||||
<ResponsiveDialogHeader className="data-[variant=drawer]:px-0 data-[variant=drawer]:text-left">
|
||||
<ResponsiveDialogTitle>Detalles de la reserva</ResponsiveDialogTitle>
|
||||
<ResponsiveDialogDescription>
|
||||
Administra la reserva y su estado.
|
||||
</ResponsiveDialogDescription>
|
||||
</ResponsiveDialogHeader>
|
||||
|
||||
<section className="mx-0 px-0 pt-3 pb-3 sm:-mx-6 sm:px-6 sm:pb-5">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-0">
|
||||
<DetailItem
|
||||
icon={<MapPin className="h-5 w-5" />}
|
||||
label="Cancha"
|
||||
value={selectedSegment?.booking?.courtName ?? '-'}
|
||||
helper={selectedSegment?.booking?.sport?.name}
|
||||
withDivider
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<BadgeCheck className="h-5 w-5" />}
|
||||
label="Estado actual"
|
||||
value={status.label}
|
||||
valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
|
||||
withDivider
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<User className="h-5 w-5" />}
|
||||
label="Cliente"
|
||||
value={selectedSegment?.booking?.customerName ?? '-'}
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<Clock className="h-5 w-5" />}
|
||||
label="Fecha"
|
||||
value={`${formatDate(selectedSegment?.booking?.date)}`}
|
||||
withDivider
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<Clock className="h-5 w-5" />}
|
||||
label="Hora"
|
||||
value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
|
||||
withDivider
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<Phone className="h-5 w-5" />}
|
||||
label="Teléfono"
|
||||
value={selectedSegment?.booking?.customerPhone ?? '-'}
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator className="dark:bg-slate-800 bg-slate-300" />
|
||||
|
||||
{booking?.status !== 'COMPLETED' && (
|
||||
<section className="space-y-3">
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-100">Acciones disponibles</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
Elegí qué hacer según lo que ocurrió con el cliente.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<ActionButton
|
||||
icon={<CheckCircle2 className="h-5 w-5" />}
|
||||
title="Completar reserva"
|
||||
description="El cliente se presentó para usar la cancha."
|
||||
className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
|
||||
onClick={() => {
|
||||
updateStatus('COMPLETED');
|
||||
}}
|
||||
<section className="mx-0 px-0 pt-3 pb-3 sm:-mx-6 sm:px-6 sm:pb-5">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-0">
|
||||
<DetailItem
|
||||
icon={<MapPin className="h-5 w-5" />}
|
||||
label="Cancha"
|
||||
value={selectedSegment?.booking?.courtName ?? '-'}
|
||||
helper={selectedSegment?.booking?.sport?.name}
|
||||
withDivider
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<XCircle className="h-5 w-5" />}
|
||||
title="Cancelar reserva"
|
||||
description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
|
||||
className="border-red-500/40 bg-red-500/10 text-lg text-red-600 hover:bg-red-500/15 hover:text-red-800"
|
||||
onClick={() => {
|
||||
updateStatus('CANCELLED');
|
||||
}}
|
||||
<DetailItem
|
||||
icon={<BadgeCheck className="h-5 w-5" />}
|
||||
label="Estado actual"
|
||||
value={status.label}
|
||||
valueClassName="text-emerald-400 uppercase dark:text-emerald-500"
|
||||
withDivider
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<MessageCircle className="h-5 w-5" />}
|
||||
title="Enviar recordatorio"
|
||||
description="Enviar un mensaje por WhatsApp al cliente."
|
||||
className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 hover:bg-sky-500/15 hover:text-sky-800"
|
||||
onClick={sendWhatsappReminder}
|
||||
<DetailItem
|
||||
icon={<User className="h-5 w-5" />}
|
||||
label="Cliente"
|
||||
value={selectedSegment?.booking?.customerName ?? '-'}
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<AlertTriangle className="h-5 w-5" />}
|
||||
title="Marcar como No Show"
|
||||
description="El cliente no vino y no canceló."
|
||||
className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 hover:bg-amber-500/15 hover:text-amber-800"
|
||||
onClick={() => {
|
||||
updateStatus('NOSHOW');
|
||||
}}
|
||||
<DetailItem
|
||||
icon={<Clock className="h-5 w-5" />}
|
||||
label="Fecha"
|
||||
value={`${formatDate(selectedSegment?.booking?.date)}`}
|
||||
withDivider
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<Clock className="h-5 w-5" />}
|
||||
label="Hora"
|
||||
value={`${selectedSegment?.booking?.startTime} a ${selectedSegment?.booking?.endTime}`}
|
||||
withDivider
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
|
||||
<DetailItem
|
||||
icon={<Phone className="h-5 w-5" />}
|
||||
label="Teléfono"
|
||||
value={selectedSegment?.booking?.customerPhone ?? '-'}
|
||||
className="sm:pt-10"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline" className="data-[variant=drawer]:h-11">
|
||||
Cerrar
|
||||
</Button>
|
||||
</ResponsiveDialogClose>
|
||||
</ResponsiveDialogFooter>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
<Separator className="dark:bg-slate-800 bg-slate-300" />
|
||||
|
||||
{booking?.status !== 'COMPLETED' && (
|
||||
<section className="space-y-3">
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-100">Acciones disponibles</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
Elegí qué hacer según lo que ocurrió con el cliente.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<ActionButton
|
||||
icon={<CheckCircle2 className="h-5 w-5" />}
|
||||
title="Completar reserva"
|
||||
description="El cliente se presentó para usar la cancha."
|
||||
className="border-emerald-500/40 bg-emerald-500/10 text-lg text-emerald-600 hover:bg-emerald-500/15 hover:text-emerald-800"
|
||||
onClick={() => {
|
||||
updateStatus('COMPLETED');
|
||||
}}
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<XCircle className="h-5 w-5" />}
|
||||
title="Cancelar reserva"
|
||||
description="El cliente avisó que no va a venir. La cancha vuelve a estar disponible."
|
||||
className="border-red-500/40 bg-red-500/10 text-lg text-red-600 hover:bg-red-500/15 hover:text-red-800"
|
||||
onClick={() => setConfirmCancelOpen(true)}
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<MessageCircle className="h-5 w-5" />}
|
||||
title="Enviar recordatorio"
|
||||
description="Enviar un mensaje por WhatsApp al cliente."
|
||||
className="border-sky-500/40 bg-sky-500/10 text-lg text-sky-600 hover:bg-sky-500/15 hover:text-sky-800"
|
||||
onClick={sendWhatsappReminder}
|
||||
/>
|
||||
|
||||
<ActionButton
|
||||
icon={<AlertTriangle className="h-5 w-5" />}
|
||||
title="Marcar como No Show"
|
||||
description="El cliente no vino y no canceló."
|
||||
className="border-amber-500/40 bg-amber-500/10 text-lg text-amber-600 hover:bg-amber-500/15 hover:text-amber-800"
|
||||
onClick={() => {
|
||||
updateStatus('NOSHOW');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<ResponsiveDialogFooter className="data-[variant=drawer]:px-0">
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline" className="data-[variant=drawer]:h-11">
|
||||
Cerrar
|
||||
</Button>
|
||||
</ResponsiveDialogClose>
|
||||
</ResponsiveDialogFooter>
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
{cancelConfirmDialog}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user