delete invoice

src/pages/receipts/List.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Tabs from '../../components/Tabs'
 import { Edit, FolderOpen, WalletCheck, WalletMinus, WalletRemove, WalletSearch } from 'iconsax-react'
 import Td from '../../components/Td'
-import { useGetInvoices } from './hooks/useReceiptData'
+import { useDeleteInvoice, useGetInvoices } from './hooks/useReceiptData'
 import PageLoading from '../../components/PageLoading'
 import { InvoiceStatus, InvoiceUserItemType, ReceiptItemType } from './types/ReceiptTypes'
 import { NumberFormat } from '../../config/func'
@@ -14,6 +14,9 @@ import { Link, useSearchParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
 import { Pages } from '../../config/Pages'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
 
 const ReceiptsList: FC = () => {
 
@@ -26,7 +29,19 @@ const ReceiptsList: FC = () => {
     const [date, setDate] = useState<string>('')
     const [endDate, setEndDate] = useState<string>('')
     const getInvoices = useGetInvoices(activeTab, customerId, search, date, endDate, page)
+    const deleteInvoice = useDeleteInvoice()
 
+    const handleDeleteInvoice = (id: string) => {
+        deleteInvoice.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                getInvoices.refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
     useEffect(() => {
         const urlCustomerId = searchParams.get('user')
         if (urlCustomerId) {
@@ -161,9 +176,15 @@ const ReceiptsList: FC = () => {
                                                     {item.maxRecurringCycles}
                                                 </Td>
                                                 <Td text={''}>
-                                                    <Link to={Pages.receipts.detail + item.id}>
+                                                    <div className='flex gap-2'>
-                                                        <Edit size={20} color='#888' />
+                                                        <Link to={Pages.receipts.detail + item.id}>
-                                                    </Link>
+                                                            <Edit size={20} color='#888' />
+                                                        </Link>
+                                                        <TrashWithConfrim
+                                                            onDelete={() => handleDeleteInvoice(item.id)}
+                                                            isLoading={deleteInvoice.isPending}
+                                                        />
+                                                    </div>
                                                 </Td>
                                             </tr>
                                         )

src/pages/receipts/hooks/useReceiptData.ts

@@ -36,3 +36,9 @@ export const useUpdateInvoice = () => {
       api.updateInvoice(id, params),
   });
 };
+
+export const useDeleteInvoice = () => {
+  return useMutation({
+    mutationFn: api.deleteInvoice,
+  });
+};

src/pages/receipts/service/ReceiptService.ts

@@ -35,3 +35,8 @@ export const updateInvoice = async (id: string, params: CreateReceiptType) => {
   const { data } = await axios.patch(`/invoices/${id}`, params);
   return data;
 };
+
+export const deleteInvoice = async (id: string) => {
+  const { data } = await axios.delete(`/invoices/${id}`);
+  return data;
+};