78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useTransition } from 'react';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Send } from 'lucide-react';
|
|
|
|
import { dispatchNewsletter } from '@kit/newsletter/actions/newsletter-actions';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@kit/ui/alert-dialog';
|
|
import { Button } from '@kit/ui/button';
|
|
import { useActionWithToast } from '@kit/ui/use-action-with-toast';
|
|
|
|
interface DispatchNewsletterButtonProps {
|
|
newsletterId: string;
|
|
recipientCount: number;
|
|
}
|
|
|
|
export function DispatchNewsletterButton({
|
|
newsletterId,
|
|
recipientCount,
|
|
}: DispatchNewsletterButtonProps) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const { execute, isPending: isDispatching } = useActionWithToast(
|
|
dispatchNewsletter,
|
|
{
|
|
successMessage: 'Newsletter wird versendet',
|
|
errorMessage: 'Fehler beim Versenden',
|
|
onSuccess: () => {
|
|
startTransition(() => {
|
|
router.refresh();
|
|
});
|
|
},
|
|
},
|
|
);
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
disabled={isDispatching || isPending || recipientCount === 0}
|
|
data-test="newsletter-send-btn"
|
|
>
|
|
<Send className="mr-2 h-4 w-4" />
|
|
Newsletter versenden
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Newsletter versenden?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Der Newsletter wird an {recipientCount} Empfänger versendet. Dieser
|
|
Vorgang kann nicht rückgängig gemacht werden.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Abbrechen</AlertDialogCancel>
|
|
<AlertDialogAction onClick={() => execute({ newsletterId })}>
|
|
Jetzt versenden
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|