feat(booking-ui): conditionally render action buttons based on booking status
This commit is contained in:
Jose Selesan
@@ -179,53 +179,55 @@ export function BookingToolsDialog() {
|
||||
|
||||
<Separator className="dark:bg-slate-800 bg-slate-300" />
|
||||
|
||||
<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');
|
||||
}}
|
||||
/>
|
||||
{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={() => {
|
||||
updateStatus('CANCELLED');
|
||||
}}
|
||||
/>
|
||||
<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');
|
||||
}}
|
||||
/>
|
||||
|
||||
<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={<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>
|
||||
<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>
|
||||
@@ -321,42 +323,44 @@ function MobileBookingToolsSheet({
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
|
||||
<h3 className="text-sm font-medium">Acciones</h3>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<MobileActionButton
|
||||
icon={<CheckCircle2 className="size-5" />}
|
||||
label="Completar"
|
||||
className="border-primary/45 bg-primary/12 text-primary"
|
||||
onClick={onComplete}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<MessageCircle className="size-5" />}
|
||||
label="Recordar"
|
||||
className="border-reserved/45 bg-reserved/12 text-reserved"
|
||||
onClick={onReminder}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<XCircle className="size-5" />}
|
||||
label="Cancelar"
|
||||
className="border-destructive/45 bg-destructive/12 text-destructive"
|
||||
onClick={onCancel}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<AlertTriangle className="size-5" />}
|
||||
label="No show"
|
||||
className="border-warning/50 bg-warning/12 text-warning"
|
||||
onClick={onNoShow}
|
||||
/>
|
||||
</div>
|
||||
<ResponsiveDialogFooter className="px-0 pb-0 pt-3">
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline" className="h-11 w-full rounded-lg">
|
||||
Cerrar
|
||||
</Button>
|
||||
</ResponsiveDialogClose>
|
||||
</ResponsiveDialogFooter>
|
||||
</section>
|
||||
{booking?.status !== 'COMPLETED' && (
|
||||
<section className="shrink-0 border-t border-border/70 bg-popover/95 px-4 py-3">
|
||||
<h3 className="text-sm font-medium">Acciones</h3>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<MobileActionButton
|
||||
icon={<CheckCircle2 className="size-5" />}
|
||||
label="Completar"
|
||||
className="border-primary/45 bg-primary/12 text-primary"
|
||||
onClick={onComplete}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<MessageCircle className="size-5" />}
|
||||
label="Recordar"
|
||||
className="border-reserved/45 bg-reserved/12 text-reserved"
|
||||
onClick={onReminder}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<XCircle className="size-5" />}
|
||||
label="Cancelar"
|
||||
className="border-destructive/45 bg-destructive/12 text-destructive"
|
||||
onClick={onCancel}
|
||||
/>
|
||||
<MobileActionButton
|
||||
icon={<AlertTriangle className="size-5" />}
|
||||
label="No show"
|
||||
className="border-warning/50 bg-warning/12 text-warning"
|
||||
onClick={onNoShow}
|
||||
/>
|
||||
</div>
|
||||
<ResponsiveDialogFooter className="px-0 pb-0 pt-3">
|
||||
<ResponsiveDialogClose asChild>
|
||||
<Button variant="outline" className="h-11 w-full rounded-lg">
|
||||
Cerrar
|
||||
</Button>
|
||||
</ResponsiveDialogClose>
|
||||
</ResponsiveDialogFooter>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user