@medusajs/dashboard 2.10.4-preview-20250923120202 → 2.10.4-preview-20250923180156

package/src/components/layout/user-menu/user-menu.tsx

@@ -29,10 +29,12 @@ import { useLogout, useMe } from "../../../hooks/api"
 import { queryClient } from "../../../lib/query-client"
 import { useGlobalShortcuts } from "../../../providers/keybind-provider/hooks"
 import { useTheme } from "../../../providers/theme-provider"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export const UserMenu = () => {
   const { t } = useTranslation()
   const location = useLocation()
+  const direction = useDocumentDirection()
 
   const [openMenu, setOpenMenu] = useState(false)
   const [openModal, setOpenModal] = useState(false)
@@ -44,33 +46,33 @@ export const UserMenu = () => {
 
   return (
     <div>
-      <DropdownMenu open={openMenu} onOpenChange={setOpenMenu}>
+      <DropdownMenu dir={direction} open={openMenu} onOpenChange={setOpenMenu}>
         <UserBadge />
         <DropdownMenu.Content className="min-w-[var(--radix-dropdown-menu-trigger-width)] max-w-[var(--radix-dropdown-menu-trigger-width)]">
           <UserItem />
           <DropdownMenu.Separator />
           <DropdownMenu.Item asChild>
             <Link to="/settings/profile" state={{ from: location.pathname }}>
-              <UserIcon className="text-ui-fg-subtle mr-2" />
+              <UserIcon className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.profileSettings")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item asChild>
             <Link to="https://docs.medusajs.com" target="_blank">
-              <BookOpen className="text-ui-fg-subtle mr-2" />
+              <BookOpen className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.documentation")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild>
             <Link to="https://medusajs.com/changelog/" target="_blank">
-              <TimelineVertical className="text-ui-fg-subtle mr-2" />
+              <TimelineVertical className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.changelog")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item onClick={toggleModal}>
-            <Keyboard className="text-ui-fg-subtle mr-2" />
+            <Keyboard className="text-ui-fg-subtle me-2" />
             {t("app.menus.user.shortcuts")}
           </DropdownMenu.Item>
           <ThemeToggle />
@@ -93,7 +95,7 @@ const UserBadge = () => {
 
   if (isPending) {
     return (
-      <button className="shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5">
+      <button className="shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 ps-1 pe-2.5">
         <Skeleton className="h-5 w-5 rounded-full" />
         <Skeleton className="h-[9px] w-[70px]" />
       </button>
@@ -109,7 +111,7 @@ const UserBadge = () => {
       <DropdownMenu.Trigger
         disabled={!user}
         className={clx(
-          "bg-ui-bg-subtle grid w-full cursor-pointer grid-cols-[24px_1fr_15px] items-center gap-2 rounded-md py-1 pl-0.5 pr-2 outline-none",
+          "bg-ui-bg-subtle grid w-full cursor-pointer grid-cols-[24px_1fr_15px] items-center gap-2 rounded-md py-1 ps-0.5 pe-2 outline-none",
           "hover:bg-ui-bg-subtle-hover",
           "data-[state=open]:bg-ui-bg-subtle-hover",
           "focus-visible:shadow-borders-focus"
@@ -148,9 +150,9 @@ const ThemeToggle = () => {
 
   return (
     <DropdownMenu.SubMenu>
-      <DropdownMenu.SubMenuTrigger className="rounded-md">
-        <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
-        {t("app.menus.user.theme.label")}
+      <DropdownMenu.SubMenuTrigger dir="ltr" className="rounded-md rtl:rotate-180">
+        <CircleHalfSolid className="text-ui-fg-subtle me-2" />
+        <span className="rtl:rotate-180">{t("app.menus.user.theme.label")}</span>
       </DropdownMenu.SubMenuTrigger>
       <DropdownMenu.SubMenuContent>
         <DropdownMenu.RadioGroup value={theme}>

package/src/components/search/search.tsx

@@ -44,6 +44,7 @@ import {
 } from "./constants"
 import { SearchArea } from "./types"
 import { useSearchResults } from "./use-search-results"
+import { useDocumentDirection } from "../../hooks/use-document-direction"
 
 export const Search = () => {
   const [area, setArea] = useState<SearchArea>("all")
@@ -54,6 +55,7 @@ export const Search = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
 
+
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
 
@@ -367,7 +369,7 @@ const CommandInput = forwardRef<
   ) => {
     const { t } = useTranslation()
     const innerRef = useRef<HTMLInputElement>(null)
-
+    const direction = useDocumentDirection()
     useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
       ref,
       () => innerRef.current
@@ -376,7 +378,7 @@ const CommandInput = forwardRef<
     return (
       <div className="flex flex-col border-b">
         <div className="px-4 pt-4">
-          <DropdownMenu>
+          <DropdownMenu dir={direction}>
             <DropdownMenu.Trigger asChild>
               <Badge
                 size="2xsmall"
@@ -432,7 +434,7 @@ const CommandInput = forwardRef<
             )}
             {...props}
           />
-          <div className="absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-end gap-x-2">
+          <div className="absolute end-4 top-1/2 flex -translate-y-1/2 items-center justify-end gap-x-2">
             {isFetching && (
               <Spinner className="text-ui-fg-muted animate-spin" />
             )}

package/src/components/table/data-table/data-table-order-by/data-table-order-by.tsx

@@ -4,6 +4,8 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
+import { useDocumentDirection } from "../../../../hooks/use-document-direction"
+
 export type DataTableOrderByKey<TData> = {
   key: keyof TData
   label: string
@@ -54,6 +56,7 @@ export const DataTableOrderBy = <TData,>({
   }>(initState(searchParams, prefix))
   const param = prefix ? `${prefix}_order` : "order"
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -97,7 +100,7 @@ export const DataTableOrderBy = <TData,>({
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <DescendingSorting />

package/src/components/table/data-table/data-table-root/data-table-root.tsx

@@ -262,7 +262,7 @@ export const DataTableRoot = <TData,>({
                         <Table.Cell
                           key={cell.id}
                           className={clx({
-                            "!pl-0 !pr-0": shouldRenderAsLink,
+                            "!ps-0 !pe-0": shouldRenderAsLink,
                             "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
@@ -288,9 +288,9 @@ export const DataTableRoot = <TData,>({
                             >
                               <div
                                 className={clx(
-                                  "flex size-full items-center pr-6",
+                                  "flex size-full items-center pe-6",
                                   {
-                                    "pl-6": isTabableLink && !hasLeftOffset,
+                                    "ps-6": isTabableLink && !hasLeftOffset,
                                   }
                                 )}
                               >

package/src/dashboard-app/forms/form-extension-zone/form-extension-zone.tsx

@@ -102,7 +102,7 @@ const FormExtensionFieldComponent = ({
       return <Input {...field} placeholder={placeholder} type="number" />
     }
     case "boolean": {
-      return <Switch {...field} />
+      return <Switch className="rtl:rotate-180" dir="ltr" {...field} />
     }
     default: {
       return (

package/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 || []),
           ],
         },

package/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,
+  })
+}

package/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"

package/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]
+  )
+}

package/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"

package/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,
+  }
+}

package/src/hooks/use-document-direction.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Hook to get the current document direction (ltr/rtl) and listen for changes
+ * @returns The current document direction as "ltr" | "rtl" | undefined
+ */
+export const useDocumentDirection = (): "ltr" | "rtl" | undefined => {
+  const [direction, setDirection] = useState<"ltr" | "rtl" | undefined>(() => {
+    // Initialize with current value
+    if (typeof document !== "undefined") {
+      return (
+        (document.documentElement.getAttribute("dir") as "ltr" | "rtl") ||
+        undefined
+      )
+    }
+    return undefined
+  })
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof document === "undefined") {
+      return
+    }
+
+    // Create a MutationObserver to watch for changes to the dir attribute
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "dir" &&
+          mutation.target === document.documentElement
+        ) {
+          const newDirection = document.documentElement.getAttribute("dir") as
+            | "ltr"
+            | "rtl"
+          setDirection(newDirection || undefined)
+        }
+      })
+    })
+
+    // Start observing the document element for attribute changes
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"],
+    })
+
+    // Cleanup observer on unmount
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return direction
+}