Ask for confirmation to delete an expense (#124)

* feat: added a popup asking for confirmation to delete an expense

* fix: changed cancel option as a button and formatting issues

* fix: removed unnecessary tags and replaced generic tags with proper components

* Small fix to avoid warning in console

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/components/delete-popup.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Trash2 } from 'lucide-react'
+import { AsyncButton } from './async-button'
+import { Button } from './ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from './ui/dialog'
+
+export function DeletePopup({ onDelete }: { onDelete: () => Promise<void> }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive">
+          <Trash2 className="w-4 h-4 mr-2" />
+          Delete
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogTitle>Delete this expense?</DialogTitle>
+        <DialogDescription>
+          Do you really want to delete this expense? This action is
+          irreversible.
+        </DialogDescription>
+        <DialogFooter className="flex flex-col gap-2">
+          <AsyncButton
+            type="button"
+            variant="destructive"
+            loadingContent="Deleting…"
+            action={onDelete}
+          >
+            Yes
+          </AsyncButton>
+          <DialogClose asChild>
+            <Button variant={'secondary'}>Cancel</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/expense-form.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { AsyncButton } from '@/components/async-button'
 import { CategorySelector } from '@/components/category-selector'
 import { ExpenseDocumentsInput } from '@/components/expense-documents-input'
 import { SubmitButton } from '@/components/submit-button'
@@ -39,12 +38,13 @@ import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Save, Trash2 } from 'lucide-react'
+import { Save } from 'lucide-react'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { match } from 'ts-pattern'
+import { DeletePopup } from './delete-popup'
 import { extractCategoryFromTitle } from './expense-form-actions'
 
 export type Props = {
@@ -598,15 +598,7 @@ export function ExpenseForm({
             {isCreate ? <>Create</> : <>Save</>}
           </SubmitButton>
           {!isCreate && onDelete && (
-            <AsyncButton
+            <DeletePopup onDelete={onDelete}></DeletePopup>
-              type="button"
-              variant="destructive"
-              loadingContent="Deleting…"
-              action={onDelete}
-            >
-              <Trash2 className="w-4 h-4 mr-2" />
-              Delete
-            </AsyncButton>
           )}
           <Button variant="ghost" asChild>
             <Link href={`/groups/${group.id}`}>Cancel</Link>