From e809912ae37e08b922913d45dc880f8b2efc635f Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sun, 17 Mar 2024 19:54:56 +0100
Subject: [PATCH] N-FIN-47: add optional confirmation dialog to new component

---
 src/components/form/serverActionTrigger.tsx | 52 +++++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/components/form/serverActionTrigger.tsx b/src/components/form/serverActionTrigger.tsx
index ce5b431..252b70f 100644
--- a/src/components/form/serverActionTrigger.tsx
+++ b/src/components/form/serverActionTrigger.tsx
@@ -9,11 +9,29 @@ import { toast } from 'sonner';
 import { sonnerContent } from '@/components/ui/sonner';
 import type { VariantProps } from 'class-variance-authority';
 import { ActionResponse } from '@/lib/types/actionResponse';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+
+export interface ConfirmationDialogProps {
+    title: string;
+    description?: string;
+    actionText?: string;
+}
 
 export interface ButtonWithActionProps<T = any>
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    dialog?: ConfirmationDialogProps;
     action: () => Promise<ActionResponse<T>>;
     callback?: (data: T) => void;
 }
@@ -36,14 +54,40 @@ const ServerActionTrigger = React.forwardRef<HTMLButtonElement, ButtonWithAction
             }
         };
 
-        // TODO: add optional confirmation dialog
-
-        return (
+        return props.dialog ? (
+            <AlertDialog>
+                <AlertDialogTrigger asChild>
+                    <Comp
+                        className={cn(buttonVariants({variant, size, className}))}
+                        {...{...props, action: undefined, callback: undefined}}
+                        ref={ref}
+                    />
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{props.dialog.title}</AlertDialogTitle>
+                        {props.dialog?.description && (
+                            <AlertDialogDescription>
+                                {props.dialog.description}
+                            </AlertDialogDescription>
+                        )}
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            Cancel
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleSubmit}>
+                            {props.dialog.actionText || 'Confirm'}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        ) : (
             <Comp
                 className={cn(buttonVariants({variant, size, className}))}
                 ref={ref}
-                {...{...props, action: undefined, callback: undefined}}
                 onClick={handleSubmit}
+                {...props}
             />
         );
     },