fix: migrate return reasons list to new DataTable component

packages/admin/dashboard/src/hooks/api/return-reasons.tsx

@@ -130,3 +130,30 @@ export const useDeleteReturnReason = (
     ...options,
   })
 }
+
+export const useDeleteReturnReasonLazy = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminReturnReasonDeleteResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.returnReason.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: returnReasonsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: returnReasonsQueryKeys.detail(variables),
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: returnReasonsQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx

@@ -1,32 +1,39 @@
 import { HttpTypes } from "@medusajs/types"
-import { Badge } from "@medusajs/ui"
-import { createColumnHelper } from "@tanstack/react-table"
 import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { createDataTableColumnHelper } from "@medusajs/ui"
+import { DescriptionCell } from "../../../components/table/table-cells/sales-channel/description-cell"
 
-const columnHelper = createColumnHelper<HttpTypes.AdminReturnReason>()
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminReturnReason>()
 
 export const useReturnReasonTableColumns = () => {
+  const { t } = useTranslation()
+
   return useMemo(
     () => [
+      columnHelper.accessor("label", {
+        header: () => t("fields.label"),
+        enableSorting: true,
+        sortLabel: t("fields.label"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+      }),
       columnHelper.accessor("value", {
-        cell: ({ getValue }) => <Badge size="2xsmall">{getValue()}</Badge>,
+        header: () => t("fields.value"),
+        enableSorting: true,
+        sortLabel: t("fields.value"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
       }),
-      columnHelper.accessor("label", {
-        cell: ({ row }) => {
-          const { label, description } = row.original
-          return (
-            <div className=" py-4">
-              <div className="flex h-full w-full flex-col justify-center">
-                <span className="truncate font-medium">{label}</span>
-                <span className="truncate">
-                  {description ? description : "-"}
-                </span>
-              </div>
-            </div>
-          )
-        },
+      columnHelper.accessor("description", {
+        header: () => t("fields.description"),
+        cell: ({ getValue }) => <DescriptionCell description={getValue()} />,
+        enableSorting: true,
+        sortLabel: t("fields.description"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
       }),
     ],
-    []
+    [t]
   )
 }

packages/admin/dashboard/src/routes/return-reasons/return-reason-list/components/return-reason-list-table/return-reason-list-table.tsx

@@ -1,29 +1,32 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Container, Heading, Text } from "@medusajs/ui"
+import {
+  Container,
+  createDataTableColumnHelper,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
-import { createColumnHelper } from "@tanstack/react-table"
-import { useMemo } from "react"
+import { useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
-
-import { ActionMenu } from "../../../../../components/common/action-menu"
-import { _DataTable } from "../../../../../components/table/data-table"
-import { useReturnReasons } from "../../../../../hooks/api/return-reasons"
+import { useNavigate } from "react-router-dom"
+import { DataTable } from "../../../../../components/data-table"
+import {
+  useDeleteReturnReasonLazy,
+  useReturnReasons,
+} from "../../../../../hooks/api/return-reasons"
 import { useReturnReasonTableColumns } from "../../../../../hooks/table/columns"
 import { useReturnReasonTableQuery } from "../../../../../hooks/table/query"
-import { useDataTable } from "../../../../../hooks/use-data-table"
-import { useDeleteReturnReasonAction } from "../../../common/hooks/use-delete-return-reason-action"
 
 const PAGE_SIZE = 20
 
 export const ReturnReasonListTable = () => {
   const { t } = useTranslation()
-  const { searchParams, raw } = useReturnReasonTableQuery({
+  const { searchParams } = useReturnReasonTableQuery({
     pageSize: PAGE_SIZE,
   })
 
-  const { return_reasons, count, isPending, isError, error } = useReturnReasons(
+  const { return_reasons, count, isLoading, isError, error } = useReturnReasons(
     searchParams,
     {
       placeholderData: keepPreviousData,
@@ -32,97 +35,104 @@ export const ReturnReasonListTable = () => {
 
   const columns = useColumns()
 
-  const { table } = useDataTable({
-    data: return_reasons,
-    columns,
-    count,
-    getRowId: (row) => row.id,
-    pageSize: PAGE_SIZE,
-  })
-
   if (isError) {
     throw error
   }
 
   return (
     <Container className="divide-y px-0 py-0">
-      <div className="flex items-center justify-between px-6 py-4">
-        <div>
-          <Heading>{t("returnReasons.domain")}</Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("returnReasons.subtitle")}
-          </Text>
-        </div>
-        <Button variant="secondary" size="small" asChild>
-          <Link to="create">{t("actions.create")}</Link>
-        </Button>
-      </div>
-      <_DataTable
-        table={table}
-        queryObject={raw}
-        count={count}
-        isLoading={isPending}
+      <DataTable
+        data={return_reasons}
         columns={columns}
+        rowCount={count}
         pageSize={PAGE_SIZE}
-        noHeader={true}
-        pagination
-        search
+        getRowId={(row) => row.id}
+        heading={t("returnReasons.domain")}
+        subHeading={t("returnReasons.subtitle")}
+        emptyState={{
+          empty: {
+            heading: t("general.noRecordsMessage"),
+          },
+          filtered: {
+            heading: t("general.noRecordsMessage"),
+            description: t("general.noRecordsMessageFiltered"),
+          },
+        }}
+        actions={[
+          {
+            label: t("actions.create"),
+            to: "create",
+          },
+        ]}
+        isLoading={isLoading}
+        enableSearch={true}
       />
     </Container>
   )
 }
 
-type ReturnReasonRowActionsProps = {
-  returnReason: HttpTypes.AdminReturnReason
-}
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminReturnReason>()
 
-const ReturnReasonRowActions = ({
-  returnReason,
-}: ReturnReasonRowActionsProps) => {
+const useColumns = () => {
   const { t } = useTranslation()
-  const handleDelete = useDeleteReturnReasonAction(returnReason)
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+  const base = useReturnReasonTableColumns()
 
-  return (
-    <ActionMenu
-      groups={[
-        {
-          actions: [
+  const { mutateAsync } = useDeleteReturnReasonLazy()
+
+  const handleDelete = useCallback(
+    async (returnReason: HttpTypes.AdminReturnReason) => {
+      const confirm = await prompt({
+        title: t("general.areYouSure"),
+        description: t("returnReasons.delete.confirmation", {
+          label: returnReason.label,
+        }),
+        confirmText: t("actions.delete"),
+        cancelText: t("actions.cancel"),
+      })
+
+      if (!confirm) {
+        return
+      }
+
+      await mutateAsync(returnReason.id, {
+        onSuccess: () => {
+          toast.success(t("returnReasons.delete.successToast"))
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      })
+    },
+    [t, prompt, mutateAsync]
+  )
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.action({
+        actions: (ctx) => [
+          [
             {
               icon: <PencilSquare />,
               label: t("actions.edit"),
-              to: `${returnReason.id}/edit`,
+              onClick: () =>
+                navigate(
+                  `/settings/return-reasons/${ctx.row.original.id}/edit`
+                ),
             },
           ],
-        },
-        {
-          actions: [
+          [
             {
               icon: <Trash />,
               label: t("actions.delete"),
-              onClick: handleDelete,
+              onClick: () => handleDelete(ctx.row.original),
             },
           ],
-        },
-      ]}
-    />
-  )
-}
-
-const columnHelper = createColumnHelper<HttpTypes.AdminReturnReason>()
-
-const useColumns = () => {
-  const base = useReturnReasonTableColumns()
-
-  return useMemo(
-    () => [
-      ...base,
-      columnHelper.display({
-        id: "actions",
-        cell: ({ row }) => (
-          <ReturnReasonRowActions returnReason={row.original} />
-        ),
+        ],
       }),
     ],
-    [base]
+    [base, handleDelete, navigate, t]
   )
 }