@medusajs/dashboard 3.0.0-snapshot-20251202221811 → 3.0.0-snapshot-20251208164410

package/src/components/inputs/combobox/combobox.tsx

@@ -15,7 +15,7 @@ import {
   TrianglesMini,
   XMarkMini,
 } from "@medusajs/icons"
-import { clx, Text } from "@medusajs/ui"
+import { Badge, clx, Text } from "@medusajs/ui"
 import { matchSorter } from "match-sorter"
 import {
   ComponentPropsWithoutRef,
@@ -59,6 +59,7 @@ interface ComboboxProps<T extends Value = Value>
   noResultsPlaceholder?: ReactNode
   allowClear?: boolean
   forceHideInput?: boolean // always hide input -> used for singe value select that don't have query/filter
+  displayMode?: "count" | "chips" // how to display multiple selected values
 }
 
 const ComboboxImpl = <T extends Value = string>(
@@ -76,6 +77,7 @@ const ComboboxImpl = <T extends Value = string>(
     noResultsPlaceholder,
     allowClear,
     forceHideInput,
+    displayMode = "count",
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -143,6 +145,15 @@ const ComboboxImpl = <T extends Value = string>(
     }
   }
 
+  const handleRemoveValue = (valueToRemove: string) => {
+    if (!isArrayValue || !Array.isArray(selectedValues)) {
+      return
+    }
+
+    const newValues = selectedValues.filter((v) => v !== valueToRemove) as T
+    handleValueChange(newValues)
+  }
+
   /**
    * Filter and sort the options based on the search value,
    * and whether the value is already selected.
@@ -235,109 +246,179 @@ const ComboboxImpl = <T extends Value = string>(
         startTransition(() => handleSearchChange(query))
       }}
     >
-      <div
-        className={clx(
-          "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
-          "h-8 w-full rounded-md",
-          "bg-ui-bg-field transition-fg shadow-borders-base",
-          "has-[input:focus]:shadow-borders-interactive-with-active",
-          "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-          "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-          className
-        )}
-        style={
-          {
-            "--tag-width": `${tagWidth}px`,
-          } as CSSProperties
-        }
-      >
-        {showTag && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.preventDefault()
-              handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
-            }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none"
-          >
-            <span className="tabular-nums">{selectedValues.length}</span>
-            <XMarkMini className="text-ui-fg-muted" />
-          </button>
-        )}
-        <div className="relative flex size-full items-center">
-          {showSelected && (
-            <div
+      {displayMode === "chips" && isArrayValue ? (
+        <div
+          className={clx(
+            "relative flex cursor-pointer flex-wrap items-center gap-1.5",
+            "min-h-8 w-full rounded-md",
+            "bg-ui-bg-field transition-fg shadow-borders-base",
+            "has-[input:focus]:shadow-borders-interactive-with-active",
+            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+            "p-1",
+            className
+          )}
+        >
+          {Array.isArray(selectedValues) &&
+            selectedValues.map((value) => {
+              const option = options.find((o) => o.value === value)
+              if (!option) return null
+
+              return (
+                <Badge
+                  key={value}
+                  size="2xsmall"
+                  className="gap-x-0.5 pl-1.5 pr-1 transition-fg"
+                >
+                  {option.label}
+                  <button
+                    tabIndex={-1}
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      handleRemoveValue(value)
+                    }}
+                    className="text-ui-fg-subtle transition-fg outline-none"
+                  >
+                    <XMarkMini />
+                  </button>
+                </Badge>
+              )
+            })}
+          <div className="relative flex flex-1 items-center min-w-[120px]">
+            <PrimitiveCombobox
+              autoSelect
+              ref={comboboxRef}
+              onFocus={() => setOpen(true)}
               className={clx(
-                "pointer-events-none absolute inset-y-0 flex size-full items-center",
-                {
-                  "start-[calc(var(--tag-width)+8px)]": showTag,
-                  "start-2": !showTag,
-                }
+                "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-1 outline-none focus:cursor-text"
               )}
+              placeholder={
+                Array.isArray(selectedValues) && selectedValues.length > 0
+                  ? undefined
+                  : placeholder
+              }
+              {...inputProps}
+            />
+          </div>
+          <PrimitiveComboboxDisclosure
+            render={(props) => {
+              return (
+                <button
+                  {...props}
+                  type="button"
+                  className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 top-0 flex h-8 w-8 items-center justify-center rounded-r outline-none"
+                >
+                  <TrianglesMini />
+                </button>
+              )
+            }}
+          />
+        </div>
+      ) : (
+        <div
+          className={clx(
+            "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+            "h-8 w-full rounded-md",
+            "bg-ui-bg-field transition-fg shadow-borders-base",
+            "has-[input:focus]:shadow-borders-interactive-with-active",
+            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+            className
+          )}
+          style={
+            {
+              "--tag-width": `${tagWidth}px`,
+            } as CSSProperties
+          }
+        >
+          {showTag && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault()
+                handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
+              }}
+              className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none"
             >
-              <Text size="small" leading="compact">
-                {t("general.selected")}
-              </Text>
-            </div>
+              <span className="tabular-nums">{selectedValues.length}</span>
+              <XMarkMini className="text-ui-fg-muted" />
+            </button>
           )}
-          {hideInput && (
-            <div
+          <div className="relative flex size-full items-center">
+            {showSelected && (
+              <div
+                className={clx(
+                  "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                  {
+                    "start-[calc(var(--tag-width)+8px)]": showTag,
+                    "start-2": !showTag,
+                  }
+                )}
+              >
+                <Text size="small" leading="compact">
+                  {t("general.selected")}
+                </Text>
+              </div>
+            )}
+            {hideInput && (
+              <div
+                className={clx(
+                  "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
+                  {
+                    "start-[calc(var(--tag-width)+8px)]": showTag,
+                    "start-2": !showTag,
+                  }
+                )}
+              >
+                <Text size="small" leading="compact" className="truncate">
+                  {selectedLabel}
+                </Text>
+              </div>
+            )}
+            <PrimitiveCombobox
+              autoSelect
+              ref={comboboxRef}
+              onFocus={() => setOpen(true)}
               className={clx(
-                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
+                "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text",
                 {
-                  "start-[calc(var(--tag-width)+8px)]": showTag,
-                  "start-2": !showTag,
+                  "opacity-0": hideInput,
+                  "ps-2": !showTag,
+                  "ps-[calc(var(--tag-width)+8px)]": showTag,
                 }
               )}
+              placeholder={hidePlaceholder ? undefined : placeholder}
+              {...inputProps}
+            />
+          </div>
+          {allowClear && controlledValue && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault()
+                handleValueChange(undefined)
+              }}
+              className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
             >
-              <Text size="small" leading="compact" className="truncate">
-                {selectedLabel}
-              </Text>
-            </div>
+              <XMarkMini className="text-ui-fg-muted" />
+            </button>
           )}
-          <PrimitiveCombobox
-            autoSelect
-            ref={comboboxRef}
-            onFocus={() => setOpen(true)}
-            className={clx(
-              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text",
-              "hover:bg-ui-bg-field-hover",
-              {
-                "opacity-0": hideInput,
-                "ps-2": !showTag,
-                "ps-[calc(var(--tag-width)+8px)]": showTag,
-              }
-            )}
-            placeholder={hidePlaceholder ? undefined : placeholder}
-            {...inputProps}
+          <PrimitiveComboboxDisclosure
+            render={(props) => {
+              return (
+                <button
+                  {...props}
+                  type="button"
+                  className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
+                >
+                  <TrianglesMini />
+                </button>
+              )
+            }}
           />
         </div>
-        {allowClear && controlledValue && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.preventDefault()
-              handleValueChange(undefined)
-            }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
-          >
-            <XMarkMini className="text-ui-fg-muted" />
-          </button>
-        )}
-        <PrimitiveComboboxDisclosure
-          render={(props) => {
-            return (
-              <button
-                {...props}
-                type="button"
-                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
-              >
-                <TrianglesMini />
-              </button>
-            )
-          }}
-        />
-      </div>
+      )}
       <PrimitiveComboboxPopover
         gutter={4}
         sameWidth

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