feat(contact-us): Add delete functionality to contact us table

- Add delete button with trash icon to contact us table rows
- Implement confirmation modal for delete action
- Create useDeleteContactUs mutation hook with success callback
- Add deleteContactUs method to contact-us service
- Update API endpoints to support BASE() function for dynamic ID routing
- Add state management for modal open/close and current contact selection
- Integrate toast notifications for delete success feedback
- Add tooltip component to delete button for better UX
- Update query key to use BASE() endpoint for consistency

src/components/Tables/contact-us/index.tsx

@@ -1,5 +1,7 @@
 "use client";
+import { TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -9,12 +11,24 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
-import { useContactUsListPresenter } from "./useContactUsListPresenter";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
+import { useContactUsListPresenter } from "./useContactUsListPresenter";
 
 const ContactUsTable = () => {
-  const { columns, pathname, router, isPending, contacts } =
+  const {
-    useContactUsListPresenter();
+    columns,
+    pathname,
+    router,
+    isPending,
+    contacts,
+    onConfirmDelete,
+    setIsModalOpen,
+    setCurrentContact,
+    isModalOpen,
+    currentContact,
+  } = useContactUsListPresenter();
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <Table>
@@ -61,11 +75,44 @@ const ContactUsTable = () => {
                 <TableCell className="text-start" colSpan={100}>
                   {unixToDate({ unix: item?.created_at })}
                 </TableCell>
+                <TableCell className="text-start xl:pr-7.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
+                    <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
+                      className="hover:text-red-500"
+                      onClick={() => {
+                        setCurrentContact(item);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+                      <span className="sr-only">Delete Contact Us </span>
+                      <TrashIcon />
+                    </button>
+                  </div>
+                </TableCell>
               </TableRow>
             ))}
           </EmptyListWrapper>
         </TableBody>
       </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={`Deleting ${currentContact?.full_name}`}
+          message={`Are you sure?`}
+          variant={"default"}
+          size={"md"}
+          confirmText={"Delete"}
+          cancelText={"Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
     </div>
   );
 };

src/components/Tables/contact-us/useContactUsListPresenter.ts

@@ -1,7 +1,14 @@
 "use client";
-import { useReadAllContactUs } from "@/hooks/queries/useContactUsQuery";
+import {
+  useDeleteContactUs,
+  useReadAllContactUs,
+} from "@/hooks/queries/useContactUsQuery";
+import { TContact } from "@/lib/api/types/TContacts";
 import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
 export const useContactUsListPresenter = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentContact, setCurrentContact] = useState<TContact>();
   const columns: string[] = [
     "row",
     "Full name",
@@ -14,11 +21,24 @@ export const useContactUsListPresenter = () => {
   const pathname = usePathname();
   const router = useRouter();
   const { data, isPending } = useReadAllContactUs();
+  const { mutate: deleteContactUS } = useDeleteContactUs(() =>
+    setIsModalOpen(false),
+  );
+
+  const onConfirmDelete = () => {
+    if (!currentContact) return;
+    deleteContactUS(currentContact?.id);
+  };
   return {
     columns,
     pathname,
     router,
     isPending,
     contacts: data?.data.contacts,
+    onConfirmDelete,
+    setIsModalOpen,
+    setCurrentContact,
+    isModalOpen,
+    currentContact,
   };
 };

src/hooks/queries/useContactUsQuery.ts

@@ -1,13 +1,33 @@
 import { API_ENDPOINTS } from "@/lib/api";
 import { contactUsService } from "@/lib/api/services/contact-us-service";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { toast } from "react-toastify";
 
 export const useReadAllContactUs = () => {
-  const queryKey = useMemo(() => [API_ENDPOINTS.CONTACT_US.READ_ALL], []);
+  const queryKey = useMemo(() => [API_ENDPOINTS.CONTACT_US.BASE()], []);
 
   return useQuery({
     queryKey,
     queryFn: () => contactUsService.getAllContactUs(),
   });
 };
+export const useDeleteContactUs = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.CONTACT_US.BASE(), "DELETE CONTACT US"],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: contactUsService.deleteContactUs,
+    onSuccess: (response) => {
+      toast.success(response.data.message);
+
+      successCallback?.();
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.CONTACT_US.BASE()],
+      });
+    },
+  });
+};

src/lib/api/endpoints.ts

@@ -62,6 +62,6 @@ export const API_ENDPOINTS = {
     MARK_AS_SEEN: (id: string) => `notifications/mark-seen/${id}`,
   },
   CONTACT_US: {
-    READ_ALL: "contacts",
+    BASE: (id?: string) => (id ? `contacts/${id}` : "contacts"),
   },
 } as const;

src/lib/api/services/contact-us-service.ts

@@ -5,7 +5,7 @@ import { TContactApiResponseSchema } from "../types/TContacts";
 export const contactUsService = {
   getAllContactUs: async (): Promise<TContactApiResponseSchema> => {
     try {
-      return (await api.get(API_ENDPOINTS.CONTACT_US.READ_ALL)).data;
+      return (await api.get(API_ENDPOINTS.CONTACT_US.BASE())).data;
     } catch (error) {
       console.error(
         "ERROR caught in contact-us service => getAllContactUs",
@@ -14,4 +14,15 @@ export const contactUsService = {
       throw error;
     }
   },
+  deleteContactUs: async (id: string) => {
+    try {
+      return (await api.delete(API_ENDPOINTS.CONTACT_US.BASE(id))).data;
+    } catch (error) {
+      console.error(
+        "ERROR caught in contact-us service => deleteContactUs",
+        error,
+      );
+      throw error;
+    }
+  },
 };

src/lib/api/types/TContacts.ts

@@ -20,5 +20,5 @@ export const contactsListResponseSchema = z.object({
 export const contactsApiResponse = createApiResponseSchema(
   contactsListResponseSchema,
 );
-
+export type TContact = z.infer<typeof contactsListSchema>;
 export type TContactApiResponseSchema = z.infer<typeof contactsApiResponse>;