74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useTransition } from "react";
|
|
import { Mail } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { FamilyInvitationView } from "@/lib/family-invitation-view";
|
|
import { resendFamilyInvitationAction } from "./actions";
|
|
|
|
const labels = {
|
|
active: "Konto aktiviert",
|
|
open: "Aktivierung offen",
|
|
sending: "Versand läuft",
|
|
sent: "Einladung versendet",
|
|
failed: "Versand fehlgeschlagen",
|
|
expired: "Einladung abgelaufen",
|
|
};
|
|
|
|
export function InvitationStatus({
|
|
userId,
|
|
name,
|
|
invitation,
|
|
blocked = false,
|
|
}: {
|
|
userId: string;
|
|
name: string;
|
|
invitation: FamilyInvitationView;
|
|
blocked?: boolean;
|
|
}) {
|
|
const [pending, startTransition] = useTransition();
|
|
return (
|
|
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
|
|
<Badge variant={invitation.status === "active" ? "success" : "warning"}>
|
|
{labels[invitation.status]}
|
|
</Badge>
|
|
{invitation.status !== "active" && (
|
|
<>
|
|
{invitation.expiresAt && (
|
|
<span className="text-[var(--ink-muted)]">
|
|
{invitation.status === "expired"
|
|
? "Gültig gewesen bis"
|
|
: "Link gültig bis"}{" "}
|
|
{new Intl.DateTimeFormat("de-DE", {
|
|
dateStyle: "short",
|
|
timeZone: "Europe/Berlin",
|
|
}).format(new Date(invitation.expiresAt))}
|
|
</span>
|
|
)}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
disabled={blocked || pending || invitation.status === "sending"}
|
|
aria-label={`Einladung erneut senden an ${name}`}
|
|
onClick={() =>
|
|
startTransition(async () => {
|
|
const result = await resendFamilyInvitationAction(userId);
|
|
if (result.error) toast.error(result.error);
|
|
else if (result.warning) toast.warning(result.warning);
|
|
else toast.success("Einladung versendet.");
|
|
})
|
|
}
|
|
>
|
|
<Mail className="h-3 w-3" />
|
|
{pending ? "Wird versendet…" : "Einladung erneut senden"}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|