feat: enhance API response handling and add new components for module management

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

@@ -0,0 +1,77 @@
+'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>
+  );
+}

apps/web/app/[locale]/home/[account]/newsletter/[campaignId]/page.tsx

@@ -5,7 +5,6 @@ import { ArrowLeft, Send, Users } from 'lucide-react';
 import { createNewsletterApi } from '@kit/newsletter/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
-import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 import { AccountNotFound } from '~/components/account-not-found';
@@ -18,6 +17,8 @@ import {
   NEWSLETTER_RECIPIENT_STATUS_LABEL,
 } from '~/lib/status-badges';
 
+import { DispatchNewsletterButton } from './dispatch-newsletter-button';
+
 interface PageProps {
   params: Promise<{ account: string; campaignId: string }>;
 }
@@ -99,10 +100,10 @@ export default async function NewsletterDetailPage({ params }: PageProps) {
             {/* Actions */}
             {status === 'draft' && (
               <div className="mt-6">
-                <Button data-test="newsletter-send-btn">
-                  <Send className="mr-2 h-4 w-4" />
-                  Newsletter versenden
-                </Button>
+                <DispatchNewsletterButton
+                  newsletterId={campaignId}
+                  recipientCount={recipients.length}
+                />
               </div>
             )}
           </CardContent>