feat(admin-shared,dashboard,js-sdk,types): refund reasons in dashboard (medusajs#13575)

CLOSES CORE-1209

This PR just adds the stuff necessary to support refund reasons in the dashboard. It adds the option in the settings tab and allows viewing, creating, editing and deleting refund reasons. I hate to open such a big PR but most of it is copy pasted from the return reasons. Major difference is only the fact that refund reasons don't have a `value` field

Author: willbouch

.changeset/quick-rice-deny.md

@@ -0,0 +1,9 @@
+---
+"@medusajs/admin-shared": patch
+"@medusajs/dashboard": patch
+"@medusajs/js-sdk": patch
+"@medusajs/types": patch
+"@medusajs/payment": patch
+---
+
+feat(admin-shared,dashboard,js-sdk,types,payment): refund reasons in dashboard

packages/admin/admin-shared/src/extensions/widgets/constants.ts

@@ -189,6 +189,11 @@ const RETURN_REASON_INJECTION_ZONES = [
   "return_reason.list.after",
 ] as const
 
+const REFUND_REASON_INJECTION_ZONES = [
+  "refund_reason.list.before",
+  "refund_reason.list.after",
+] as const
+
 const INVENTORY_ITEM_INJECTION_ZONES = [
   "inventory_item.details.before",
   "inventory_item.details.after",
@@ -229,5 +234,6 @@ export const INJECTION_ZONES = [
   ...CAMPAIGN_INJECTION_ZONES,
   ...TAX_INJECTION_ZONES,
   ...RETURN_REASON_INJECTION_ZONES,
+  ...REFUND_REASON_INJECTION_ZONES,
   ...INVENTORY_ITEM_INJECTION_ZONES,
 ] as const

packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -43,6 +43,10 @@ const useSettingRoutes = (): INavItem[] => {
         label: t("returnReasons.domain"),
         to: "/settings/return-reasons",
       },
+      {
+        label: t("refundReasons.domain"),
+        to: "/settings/refund-reasons",
+      },
       {
         label: t("salesChannels.domain"),
         to: "/settings/sales-channels",

packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx

@@ -1780,6 +1780,42 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "refund-reasons",
+              element: <Outlet />,
+              handle: {
+                breadcrumb: () => t("refundReasons.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/refund-reasons/refund-reason-list"),
+                  children: [
+                    {
+                      path: "create",
+                      lazy: () =>
+                        import(
+                          "../../routes/refund-reasons/refund-reason-create"
+                        ),
+                    },
+
+                    {
+                      path: ":id",
+                      children: [
+                        {
+                          path: "edit",
+                          lazy: () =>
+                            import(
+                              "../../routes/refund-reasons/refund-reason-edit"
+                            ),
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
             ...(settingsRoutes?.[0]?.children || []),
           ],
         },

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

@@ -1,29 +1,124 @@
 import { HttpTypes } from "@medusajs/types"
-import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query"
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+
+import { FetchError } from "@medusajs/js-sdk"
 import { sdk } from "../../lib/client"
+import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
-import { FetchError } from "@medusajs/js-sdk"
 
-const REFUND_REASON_QUERY_KEY = "refund-reason" as const
-export const refundReasonQueryKeys = queryKeysFactory(REFUND_REASON_QUERY_KEY)
+const REFUND_REASONS_QUERY_KEY = "refund_reasons" as const
+export const refundReasonsQueryKeys = queryKeysFactory(REFUND_REASONS_QUERY_KEY)
 
 export const useRefundReasons = (
-  query?: HttpTypes.RefundReasonFilters,
+  query?: HttpTypes.AdminRefundReasonListParams,
   options?: Omit<
     UseQueryOptions<
-      HttpTypes.RefundReasonsResponse,
+      HttpTypes.AdminRefundReasonListResponse,
       FetchError,
-      HttpTypes.RefundReasonsResponse,
-      QueryKey
+      HttpTypes.AdminRefundReasonListResponse
     >,
-    "queryKey" | "queryFn"
+    "queryFn" | "queryKey"
   >
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: () => sdk.admin.refundReason.list(query),
-    queryKey: [],
+    queryKey: refundReasonsQueryKeys.list(query),
     ...options,
   })
 
   return { ...data, ...rest }
 }
+
+export const useRefundReason = (
+  id: string,
+  query?: HttpTypes.AdminRefundReasonParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminRefundReasonResponse,
+      FetchError,
+      HttpTypes.AdminRefundReasonResponse
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.refundReason.retrieve(id, query),
+    queryKey: refundReasonsQueryKeys.detail(id),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCreateRefundReason = (
+  query?: HttpTypes.AdminRefundReasonParams,
+  options?: UseMutationOptions<
+    HttpTypes.RefundReasonResponse,
+    FetchError,
+    HttpTypes.AdminCreateRefundReason
+  >
+) => {
+  return useMutation({
+    mutationFn: async (data) => sdk.admin.refundReason.create(data, query),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: refundReasonsQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateRefundReason = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminRefundReasonResponse,
+    FetchError,
+    HttpTypes.AdminUpdateRefundReason
+  >
+) => {
+  return useMutation({
+    mutationFn: async (data) => sdk.admin.refundReason.update(id, data),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: refundReasonsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: refundReasonsQueryKeys.detail(data.refund_reason.id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteRefundReasonLazy = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminRefundReasonDeleteResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.refundReason.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: refundReasonsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: refundReasonsQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin/dashboard/src/hooks/table/columns/index.ts

@@ -6,6 +6,7 @@ export * from "./use-order-table-columns"
 export * from "./use-product-table-columns"
 export * from "./use-product-tag-table-columns"
 export * from "./use-product-type-table-columns"
+export * from "./use-refund-reason-table-columns"
 export * from "./use-region-table-columns"
 export * from "./use-return-reason-table-columns"
 export * from "./use-tax-rates-table-columns"

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

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+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 = createDataTableColumnHelper<HttpTypes.AdminRefundReason>()
+
+export const useRefundReasonTableColumns = () => {
+  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("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/hooks/table/query/index.ts

@@ -6,6 +6,7 @@ export * from "./use-order-table-query"
 export * from "./use-product-table-query"
 export * from "./use-product-tag-table-query"
 export * from "./use-product-type-table-query"
+export * from "./use-refund-reason-table-query"
 export * from "./use-region-table-query"
 export * from "./use-return-reason-table-query"
 export * from "./use-shipping-option-table-query"

packages/admin/dashboard/src/hooks/table/query/use-refund-reason-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseRefundReasonTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useRefundReasonTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseRefundReasonTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminRefundReasonListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}