99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import { Clock, Loader2, Trash2, UserCheck, UserMinus } from 'lucide-react'
|
|
import { Button, Modal } from '../../../components/ui'
|
|
import { useGroupDetail } from './GroupDetailProvider'
|
|
|
|
export function RemoveAttendeeModal() {
|
|
const {
|
|
attendeeToRemove,
|
|
cancelRemoveAttendee,
|
|
confirmRemoveAttendee,
|
|
group,
|
|
firstWaitlistEntry,
|
|
waitlistTotal,
|
|
isSubmittingRemoval,
|
|
} = useGroupDetail()
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={attendeeToRemove !== null}
|
|
onClose={cancelRemoveAttendee}
|
|
title="Quitar del grupo"
|
|
maxWidth="md"
|
|
>
|
|
{attendeeToRemove ? (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-foreground/70">
|
|
{attendeeToRemove.fullName} dejará de ser miembro del grupo{' '}
|
|
<strong className="text-primary">{group?.name}</strong>
|
|
{firstWaitlistEntry ? ' y el cupo quedará libre.' : '.'}
|
|
{attendeeToRemove.phone ? (
|
|
<span className="mt-1 block text-xs text-foreground/50">Teléfono: {attendeeToRemove.phone}</span>
|
|
) : null}
|
|
</p>
|
|
|
|
{firstWaitlistEntry ? (
|
|
<div className="space-y-3 rounded-xl border border-accent/20 bg-accent-soft p-4">
|
|
<div className="flex items-center gap-2 text-xs font-semibold text-primary">
|
|
<Clock className="size-4 text-accent" />
|
|
<span>
|
|
Hay {waitlistTotal} persona{waitlistTotal === 1 ? '' : 's'} esperando un cupo
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-foreground/80">
|
|
¿Quieres pasar a <strong className="text-primary">{firstWaitlistEntry.fullName}</strong>, el
|
|
primero de la lista de espera, al grupo?
|
|
</p>
|
|
<div className="flex flex-col gap-2.5 pt-1">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => confirmRemoveAttendee(true)}
|
|
disabled={isSubmittingRemoval}
|
|
className="gap-2"
|
|
>
|
|
{isSubmittingRemoval ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<UserCheck className="size-4" />
|
|
)}
|
|
<span>Quitar y pasar a {firstWaitlistEntry.fullName} al grupo</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => confirmRemoveAttendee(false)}
|
|
disabled={isSubmittingRemoval}
|
|
className="gap-2"
|
|
>
|
|
{isSubmittingRemoval ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<UserMinus className="size-4" />
|
|
)}
|
|
<span>Solo quitar del grupo</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-end gap-2.5 border-t border-border pt-2">
|
|
<Button variant="ghost" onClick={cancelRemoveAttendee}>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => confirmRemoveAttendee(false)}
|
|
disabled={isSubmittingRemoval}
|
|
className="gap-2"
|
|
>
|
|
{isSubmittingRemoval ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Trash2 className="size-4" />
|
|
)}
|
|
<span>Quitar del grupo</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</Modal>
|
|
)
|
|
} |