@medusajs/dashboard 3.0.0-snapshot-20251104011621 → 3.0.0-snapshot-20251106181920

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "3.0.0-snapshot-20251104011621",
+  "version": "3.0.0-snapshot-20251106181920",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
@@ -46,10 +46,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251104011621",
-    "@medusajs/icons": "3.0.0-snapshot-20251104011621",
-    "@medusajs/js-sdk": "3.0.0-snapshot-20251104011621",
-    "@medusajs/ui": "4.0.27-snapshot-20251104011621",
+    "@medusajs/admin-shared": "3.0.0-snapshot-20251106181920",
+    "@medusajs/icons": "3.0.0-snapshot-20251106181920",
+    "@medusajs/js-sdk": "3.0.0-snapshot-20251106181920",
+    "@medusajs/ui": "4.0.28-snapshot-20251106181920",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -81,10 +81,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251104011621",
-    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20251104011621",
-    "@medusajs/types": "3.0.0-snapshot-20251104011621",
-    "@medusajs/ui-preset": "3.0.0-snapshot-20251104011621"
+    "@medusajs/admin-shared": "3.0.0-snapshot-20251106181920",
+    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20251106181920",
+    "@medusajs/types": "3.0.0-snapshot-20251106181920",
+    "@medusajs/ui-preset": "3.0.0-snapshot-20251106181920"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/components/common/infinite-list/infinite-list.tsx

@@ -65,6 +65,13 @@ export const InfiniteList = <
   const parentRef = useRef<HTMLDivElement>(null)
   const startObserver = useRef<IntersectionObserver>()
   const endObserver = useRef<IntersectionObserver>()
+  const fetchNextPageRef = useRef(fetchNextPage)
+  const fetchPreviousPageRef = useRef(fetchPreviousPage)
+
+  useEffect(() => {
+    fetchNextPageRef.current = fetchNextPage
+    fetchPreviousPageRef.current = fetchPreviousPage
+  }, [fetchNextPage, fetchPreviousPage])
 
   useEffect(() => {
     if (isPending) {
@@ -78,7 +85,7 @@ export const InfiniteList = <
         (entries) => {
           if (entries[0].isIntersecting && hasPreviousPage) {
             startObserver.current?.disconnect()
-            fetchPreviousPage()
+            fetchPreviousPageRef.current()
           }
         },
         {
@@ -90,7 +97,7 @@ export const InfiniteList = <
         (entries) => {
           if (entries[0].isIntersecting && hasNextPage) {
             endObserver.current?.disconnect()
-            fetchNextPage()
+            fetchNextPageRef.current()
           }
         },
         {
@@ -113,8 +120,6 @@ export const InfiniteList = <
       endObserver.current?.disconnect()
     }
   }, [
-    fetchNextPage,
-    fetchPreviousPage,
     hasNextPage,
     hasPreviousPage,
     isFetching,

package/src/components/layout/main-layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import {
-  BuildingStorefront,
   Buildings,
+  BuildingStorefront,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
+import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,8 +107,7 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-    <DropdownMenu
-          dir={direction}>
+      <DropdownMenu dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -206,6 +205,10 @@ const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
           label: t("categories.domain"),
           to: "/categories",
         },
+        {
+          label: t("productOptions.domain"),
+          to: "/product-options",
+        },
         // TODO: Enable when domin is introduced
         // {
         //   label: t("giftCards.domain"),

package/src/dashboard-app/dashboard-app.tsx

@@ -42,6 +42,13 @@ type DashboardAppProps = {
   plugins: DashboardPlugin[]
 }
 
+/**
+ * Matches segments that are optional and at the end of the path.
+ * Example: /path/to/:id?
+ * Such paths can be added to the menu items without the optional segment.
+ */
+const OPTIONAL_LAST_SEGMENT_MATCH = /\/([^\/])+\?$/
+
 export class DashboardApp {
   private widgets: WidgetMap
   private menus: MenuMap
@@ -129,10 +136,11 @@ export class DashboardApp {
     allMenuItems.sort((a, b) => a.path.length - b.path.length)
 
     allMenuItems.forEach((item) => {
-      if (item.path.includes("/:")) {
+      item.path = item.path.replace(OPTIONAL_LAST_SEGMENT_MATCH, "")
+      if (item.path.includes("/:") || item.path.endsWith("/*")) {
         if (process.env.NODE_ENV === "development") {
           console.warn(
-            `[@medusajs/dashboard] Menu item for path "${item.path}" can't be added to the sidebar as it contains a parameter.`
+            `[@medusajs/dashboard] Menu item for path "${item.path}" can't be added to the sidebar as it contains a mandatory parameter.`
           )
         }
         return

package/src/dashboard-app/routes/get-route.map.tsx

@@ -136,18 +136,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-prices"),
                         },
-                        {
-                          path: "options/create",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-create-option"
-                            ),
-                        },
-                        {
-                          path: "options/:option_id/edit",
-                          lazy: () =>
-                            import("../../routes/products/product-edit-option"),
-                        },
                         {
                           path: "variants/create",
                           lazy: () =>
@@ -165,6 +153,13 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
+                        {
+                          path: "options/manage",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-options-manage"
+                            ),
+                        },
                       ],
                     },
                     {
@@ -225,6 +220,63 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "/product-options",
+              errorElement: <ErrorBoundary />,
+              handle: {
+                breadcrumb: () => t("productOptions.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/product-options/product-option-list"),
+                  children: [
+                    {
+                      path: "create",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-create"
+                        ),
+                    },
+                  ],
+                },
+                {
+                  path: ":id",
+                  lazy: async () => {
+                    const { Component, Breadcrumb, loader } = await import(
+                      "../../routes/product-options/product-option-detail"
+                    )
+
+                    return {
+                      Component,
+                      loader,
+                      handle: {
+                        breadcrumb: (match: UIMatch<any>) => (
+                          <Breadcrumb {...match} />
+                        ),
+                      },
+                    }
+                  },
+                  children: [
+                    {
+                      path: "edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-edit"
+                        ),
+                    },
+                    {
+                      path: "metadata/edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-metadata"
+                        ),
+                    },
+                  ],
+                },
+              ],
+            },
             {
               path: "/categories",
               errorElement: <ErrorBoundary />,

package/src/dashboard-app/routes/utils.ts

@@ -37,9 +37,10 @@ const createBranchRoute = (segment: string): RouteObject => ({
 const createLeafRoute = (
   Component: ComponentType,
   loader?: LoaderFunction,
-  handle?: object
+  handle?: object,
+  path: string = ""
 ): RouteObject => ({
-  path: "",
+  path,
   ErrorBoundary: ErrorBoundary,
   async lazy() {
     const result: {
@@ -149,7 +150,6 @@ const addRoute = (
 
   if (isComponentSegment || remainingSegments.length === 0) {
     route.children ||= []
-    const leaf = createLeafRoute(Component, loader)
 
     if (handle) {
       route.handle = handle
@@ -159,9 +159,17 @@ const addRoute = (
       route.loader = loader
     }
 
-    leaf.children = processParallelRoutes(parallelRoutes, currentFullPath)
-    route.children.push(leaf)
-
+    // Since splat segments must occur at the end of a route, react-router enforces the segment to be a leaf.
+    // Therefore we can't create a child leaf route with `path: ""` and must instead modify the route itself
+    if (currentSegment === "*?" || currentSegment === "*") {
+      const leaf = createLeafRoute(Component, loader, handle, currentSegment)
+      leaf.children = processParallelRoutes(parallelRoutes, currentFullPath)
+      Object.assign(route, leaf)
+    } else {
+      const leaf = createLeafRoute(Component, loader)
+      leaf.children = processParallelRoutes(parallelRoutes, currentFullPath)
+      route.children.push(leaf)
+    }
     if (remainingSegments.length > 0) {
       addRoute(
         remainingSegments,

package/src/hooks/api/index.ts

@@ -17,6 +17,7 @@ export * from "./payment-collections"
 export * from "./payments"
 export * from "./plugins"
 export * from "./price-lists"
+export * from "./product-options"
 export * from "./product-types"
 export * from "./product-variants"
 export * from "./products"

package/src/hooks/api/product-options.tsx

@@ -0,0 +1,151 @@
+import { FetchError } from "@medusajs/js-sdk"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { HttpTypes } from "@medusajs/types"
+import { queryClient } from "../../lib/query-client.ts"
+
+const PRODUCT_OPTIONS_QUERY_KEY = "product_options" as const
+export const productOptionsQueryKeys = queryKeysFactory(
+  PRODUCT_OPTIONS_QUERY_KEY
+)
+
+export const useProductOption = (
+  id: string,
+  query?: HttpTypes.AdminProductOptionParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: productOptionsQueryKeys.detail(id, query),
+    queryFn: () => sdk.admin.productOption.retrieve(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useProductOptions = (
+  query?: HttpTypes.AdminProductOptionListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionListResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.productOption.list(query),
+    queryKey: productOptionsQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCreateProductOption = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminCreateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminUpdateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOptionLazy = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

package/src/hooks/api/products.tsx

@@ -21,69 +21,6 @@ export const variantsQueryKeys = queryKeysFactory(VARIANTS_QUERY_KEY)
 const OPTIONS_QUERY_KEY = "product_options" as const
 export const optionsQueryKeys = queryKeysFactory(OPTIONS_QUERY_KEY)
 
-export const useCreateProductOption = (
-  productId: string,
-  options?: UseMutationOptions<any, FetchError, any>
-) => {
-  return useMutation({
-    mutationFn: (payload: HttpTypes.AdminCreateProductOption) =>
-      sdk.admin.product.createOption(productId, payload),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useUpdateProductOption = (
-  productId: string,
-  optionId: string,
-  options?: UseMutationOptions<any, FetchError, any>
-) => {
-  return useMutation({
-    mutationFn: (payload: HttpTypes.AdminUpdateProductOption) =>
-      sdk.admin.product.updateOption(productId, optionId, payload),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: optionsQueryKeys.detail(optionId),
-      })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useDeleteProductOption = (
-  productId: string,
-  optionId: string,
-  options?: UseMutationOptions<any, FetchError, void>
-) => {
-  return useMutation({
-    mutationFn: () => sdk.admin.product.deleteOption(productId, optionId),
-    onSuccess: (data: any, variables: any, context: any) => {
-      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
-      queryClient.invalidateQueries({
-        queryKey: optionsQueryKeys.detail(optionId),
-      })
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
 export const useProductVariant = (
   productId: string,
   variantId: string,
@@ -375,6 +312,29 @@ export const useDeleteProduct = (
   })
 }
 
+export const useLinkProductOptions = (
+  productId: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductResponse,
+    FetchError,
+    HttpTypes.AdminLinkProductOptions
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.product.linkOptions(productId, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId),
+      })
+      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
 export const useExportProducts = (
   query?: HttpTypes.AdminProductListParams,
   options?: UseMutationOptions<

package/src/hooks/table/columns/use-product-option-table-columns.tsx

@@ -0,0 +1,43 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+import { HttpTypes } from "@medusajs/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminProductOption>()
+
+export const useProductOptionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("values", {
+        header: t("fields.values"),
+        cell: ({ getValue }) => {
+          const values = getValue()
+          const count = values?.length || 0
+          const displayText =
+            count > 0 ? `${count} ${count === 1 ? "value" : "values"}` : "-"
+
+          return <TextCell text={displayText} />
+        },
+      }),
+      columnHelper.accessor("is_exclusive", {
+        header: t("fields.exclusive"),
+        cell: ({ getValue }) => {
+          const isExclusive = getValue()
+          return (
+            <TextCell
+              text={isExclusive ? t("fields.true") : t("fields.false")}
+            />
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/filters/index.ts

@@ -4,6 +4,7 @@ export * from "./use-customer-table-filters"
 export * from "./use-date-table-filters"
 export * from "./use-order-table-filters"
 export * from "./use-product-table-filters"
+export * from "./use-product-option-table-filters"
 export * from "./use-product-tag-table-filters"
 export * from "./use-product-type-table-filters"
 export * from "./use-promotion-table-filters"

package/src/hooks/table/filters/use-product-option-table-filters.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next"
+import { createDataTableFilterHelper } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import { useDataTableDateFilters } from "../../../components/data-table/helpers/general/use-data-table-date-filters.tsx"
+import { useMemo } from "react"
+
+const filterHelper = createDataTableFilterHelper<HttpTypes.AdminProductOption>()
+
+export const useProductOptionTableFilters = () => {
+  const { t } = useTranslation()
+  const dateFilters = useDataTableDateFilters()
+
+  return useMemo(
+    () => [
+      filterHelper.accessor("is_exclusive", {
+        label: t("fields.exclusive"),
+        type: "radio",
+        options: [
+          {
+            label: t("fields.true"),
+            value: "false",
+          },
+          {
+            label: t("fields.false"),
+            value: "true",
+          },
+        ],
+      }),
+      ...dateFilters,
+    ],
+    [dateFilters, t]
+  )
+}

package/src/hooks/table/query/use-product-option-table-query.tsx

@@ -0,0 +1,34 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductOptionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductOptionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductOptionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at", "is_exclusive"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, q, order, is_exclusive } = queryObject
+
+  const searchParams: HttpTypes.AdminProductOptionListParams = {
+    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,
+    is_exclusive: is_exclusive === "true" ? true : is_exclusive === "false" ? false : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}