myeasycms-v2/apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/dispatch-newsletter-button.tsx

'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
        render={
          <Button
            disabled={isDispatching || isPending || recipientCount === 0}
            data-test="newsletter-send-btn"
          >
            <Send className="mr-2 h-4 w-4" aria-hidden="true" />
            Newsletter versenden
          </Button>
        }
      />
      <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>
  );
}