Adding new version of the ButtonWithConfirm component.

src/components/ui/button.tsx

@@ -35,6 +35,8 @@ const buttonVariants = cva(
   }
 )
 
+export type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
 function Button({
   className,
   variant,

src/components/wrappers/common/button/button-with-confirm.tsx

@@ -1,45 +1,161 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-import { Loader2 } from "lucide-react";
-
-export type VariantButton = {
-    secondary: string;
-    default: string;
-    outline: string;
-    ghost: string;
-    link: string;
-    destructive: string;
-};
+// "use client";
+//
+// import { Button } from "@/components/ui/button";
+// import { useState } from "react";
+// import { Loader2 } from "lucide-react";
+//
+// export type VariantButton = {
+//     secondary: string;
+//     default: string;
+//     outline: string;
+//     ghost: string;
+//     link: string;
+//     destructive: string;
+// };
+//
+// export type ButtonWithConfirmProps = {
+//     icon?: any;
+//     text: string;
+//     variant?: keyof VariantButton;
+//     className?: string;
+//     onClick?: () => void;
+//     isPending?: boolean;
+// };
+//
+// export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
+//     const [isConfirming, setIsConfirming] = useState(false);
+//
+//     return (
+//         <Button
+//             onClick={() => {
+//                 if (isConfirming && props.onClick) {
+//                     props.onClick();
+//                 } else {
+//                     setIsConfirming(true);
+//                 }
+//             }}
+//             variant={props.variant ? props.variant : "default"}
+//             className={props.className}
+//         >
+//             {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
+//             {isConfirming ? "Are you sure ?" : `${props.text}`}
+//             <>{props.icon ? props.icon : null}</>
+//         </Button>
+//     );
+// };
+"use client"
+import {Button, ButtonVariantsProps} from "@/components/ui/button";
+import {useState} from "react";
+import {Loader2} from "lucide-react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {cn} from "@/lib/utils";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
-    icon?: any;
-    text: string;
-    variant?: keyof VariantButton;
-    className?: string;
-    onClick?: () => void;
+    title: string;
+    description: string;
+    button: {
+        main: {
+            className?: string;
+            text?: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            disabled?: boolean;
+            tooltipText?: string;
+        };
+        confirm: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+        cancel: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+    };
     isPending?: boolean;
 };
 
+
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
     const [isConfirming, setIsConfirming] = useState(false);
 
     return (
-        <Button
-            onClick={() => {
-                if (isConfirming && props.onClick) {
-                    props.onClick();
-                } else {
-                    setIsConfirming(true);
-                }
-            }}
-            variant={props.variant ? props.variant : "default"}
-            className={props.className}
-        >
-            {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
-            {isConfirming ? "Are you sure ?" : `${props.text}`}
-            <>{props.icon ? props.icon : null}</>
-        </Button>
+        <Popover open={isConfirming} onOpenChange={!props.button.main.disabled ? setIsConfirming : undefined}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                        <span
+                            className={cn(
+                                "inline-flex",
+                                props.button.main.disabled ? "cursor-not-allowed" : ""
+                            )}
+                            role="button">
+                          <Button
+                              disabled={!!props.button.main.disabled}
+                              variant={props.button.main.variant ?? "default"}
+                              size={props.button.main.size ?? "default"}
+                              className={props.button.main.className}
+                              onClick={() => {
+                                  if (!props.button.main.disabled) setIsConfirming(true);
+                              }}
+                          >
+                            {props.button.main.icon}
+                              {props.button.main.text && <span>{props.button.main.text}</span>}
+                          </Button>
+                        </span>
+                    </PopoverTrigger>
+                </TooltipTrigger>
+                {props.button.main.tooltipText && props.button.main.disabled && (
+                    <TooltipContent>
+                        <p>{props.button.main.tooltipText}</p>
+                    </TooltipContent>
+                )}
+            </Tooltip>
+            <PopoverContent className="w-80">
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <h4 className="font-medium leading-none">{props.title}</h4>
+                        <p className="text-sm text-muted-foreground">{props.description}</p>
+                    </div>
+                    <div className="grid gap-2">
+                        <Button
+                            onClick={() => {
+                                if (isConfirming && props.button.confirm.onClick) {
+                                    props.button.confirm.onClick();
+                                    setIsConfirming(false);
+                                } else {
+                                    setIsConfirming(true);
+                                }
+                            }}
+                            variant={props.button.confirm.variant ? props.button.confirm.variant : "default"}
+                            size={props.button.main.size ?? "default"}
+                            className={cn(props.button.main.className, "w-full")}
+                        >
+                            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+                            {props.button.confirm.icon ? props.button.confirm.icon : null}
+                            <span>{props.button.confirm.text}</span>
+                        </Button>
+                        <Button
+                            variant={props.button.cancel.variant ? props.button.cancel.variant : "default"}
+                            onClick={props.button.cancel.onClick ? () => props.button.cancel.onClick!() : () => setIsConfirming(false)}
+                            className={cn(props.button.main.className, "w-full")}
+                            size={props.button.main.size ?? "default"}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
     );
 };
+

src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { useMutation } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action";
 
 export type ButtonDeleteAgentProps = {
@@ -29,14 +29,31 @@ export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
 
     return (
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to remove this agent? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
     );
 };

src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx

@@ -1,11 +1,12 @@
 "use client";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { deleteOrganizationAction } from "@/components/wrappers/dashboard/organization/organization.action";
-import { useMutation } from "@tanstack/react-query";
-import { setCurrentOrganizationSlug } from "@/features/dashboard/organization-cookie";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {deleteOrganizationAction} from "@/components/wrappers/dashboard/organization/organization.action";
+import {useMutation} from "@tanstack/react-query";
+import {setCurrentOrganizationSlug} from "@/features/dashboard/organization-cookie";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 import {authClient} from "@/lib/auth/auth-client";
+import {Trash2} from "lucide-react";
 
 export type DeleteOrganizationButtonProps = {
     organizationSlug: string;
@@ -38,13 +39,35 @@ export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) =
     });
 
     return (
+
         <ButtonWithConfirm
-            onClick={() => {
-                mutation.mutate();
+            title="Delete Organization"
+            description="Are you sure you want to remove this organization? This action cannot be undone."
+            button={{
+                main: {
+                    text: "Delete Organization",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
             isPending={mutation.isPending}
-            text="Delete Organization"
-            variant="destructive"
         />
+
+
     );
 };

src/components/wrappers/dashboard/profile/button-delete-account/button-delete-account.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useMutation } from "@tanstack/react-query";
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { signOut } from "@/lib/auth/auth-client";
-import { useRouter } from "next/navigation";
-import { deleteUserAction } from "./delete-account.action";
+import {useMutation} from "@tanstack/react-query";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {signOut} from "@/lib/auth/auth-client";
+import {useRouter} from "next/navigation";
+import {deleteUserAction} from "./delete-account.action";
 
 export type ButtonDeleteAccountProps = {
     text?: string;
@@ -29,14 +29,33 @@ export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
 
     return (
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to delete your account ? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
+
+
     );
 };

src/components/wrappers/dashboard/projects/button-delete-project/button-delete-project.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { useMutation } from "@tanstack/react-query";
-import { deleteProjectAction } from "@/components/wrappers/dashboard/projects/button-delete-project/delete-project.action";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {useMutation} from "@tanstack/react-query";
+import {
+    deleteProjectAction
+} from "@/components/wrappers/dashboard/projects/button-delete-project/delete-project.action";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 
 export type ButtonDeleteProjectProps = {
     text?: string;
@@ -27,15 +29,33 @@ export const ButtonDeleteProject = (props: ButtonDeleteProjectProps) => {
     });
 
     return (
+
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to delete this project ? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
     );
 };