@medusajs/dashboard 3.0.0-snapshot-20251114155958 → 3.0.0-snapshot-20251126221441

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

@@ -15,7 +15,7 @@ import {
   TrianglesMini,
   XMarkMini,
 } from "@medusajs/icons"
-import { Badge, clx, Text } from "@medusajs/ui"
+import { clx, Text } from "@medusajs/ui"
 import { matchSorter } from "match-sorter"
 import {
   ComponentPropsWithoutRef,
@@ -59,7 +59,6 @@ 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>(
@@ -77,7 +76,6 @@ const ComboboxImpl = <T extends Value = string>(
     noResultsPlaceholder,
     allowClear,
     forceHideInput,
-    displayMode = "count",
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -145,15 +143,6 @@ 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.
@@ -246,179 +235,109 @@ const ComboboxImpl = <T extends Value = string>(
         startTransition(() => handleSearchChange(query))
       }}
     >
-      {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)}
+      <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
               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-1 outline-none focus:cursor-text"
+                "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                {
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
+                }
               )}
-              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"
             >
-              <span className="tabular-nums">{selectedValues.length}</span>
-              <XMarkMini className="text-ui-fg-muted" />
-            </button>
+              <Text size="small" leading="compact">
+                {t("general.selected")}
+              </Text>
+            </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)}
+          {hideInput && (
+            <div
               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",
+                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
                 {
-                  "opacity-0": hideInput,
-                  "ps-2": !showTag,
-                  "ps-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !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"
             >
-              <XMarkMini className="text-ui-fg-muted" />
-            </button>
+              <Text size="small" leading="compact" className="truncate">
+                {selectedLabel}
+              </Text>
+            </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 flex size-8 items-center justify-center rounded-r outline-none"
-                >
-                  <TrianglesMini />
-                </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}
           />
         </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 {
-  Buildings,
   BuildingStorefront,
+  Buildings,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
+import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,7 +107,8 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-      <DropdownMenu dir={direction}>
+    <DropdownMenu
+          dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -205,10 +206,6 @@ 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,6 +136,18 @@ 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: () =>
@@ -153,13 +165,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
-                        {
-                          path: "options/manage",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-options-manage"
-                            ),
-                        },
                       ],
                     },
                     {
@@ -220,63 +225,6 @@ 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,7 +17,6 @@ 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/price-lists.tsx

@@ -14,7 +14,12 @@ import { customerGroupsQueryKeys } from "./customer-groups"
 import { productsQueryKeys } from "./products"
 
 const PRICE_LISTS_QUERY_KEY = "price-lists" as const
+const PRICE_LIST_PRICES_QUERY_KEY = "price-list-prices" as const
+
 export const priceListsQueryKeys = queryKeysFactory(PRICE_LISTS_QUERY_KEY)
+export const priceListPricesQueryKeys = queryKeysFactory(
+  PRICE_LIST_PRICES_QUERY_KEY
+)
 
 export const usePriceList = (
   id: string,
@@ -31,7 +36,7 @@ export const usePriceList = (
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: () => sdk.admin.priceList.retrieve(id, query),
-    queryKey: priceListsQueryKeys.detail(id),
+    queryKey: priceListsQueryKeys.detail(id, query),
     ...options,
   })
 
@@ -124,6 +129,29 @@ export const useDeletePriceList = (
   })
 }
 
+export const usePriceListPrices = (
+  id: string,
+  query?: HttpTypes.AdminPriceListPriceListParams,
+  options?: UseQueryOptions<
+    HttpTypes.AdminPriceListPriceListResponse,
+    FetchError,
+    HttpTypes.AdminPriceListPriceListResponse,
+    QueryKey
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () =>
+      sdk.client.fetch<HttpTypes.AdminPriceListPriceListResponse>(
+        `/admin/price-lists/${id}/prices`,
+        { query, method: "GET" }
+      ),
+    queryKey: priceListPricesQueryKeys.detail(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
 export const useBatchPriceListPrices = (
   id: string,
   query?: HttpTypes.AdminPriceListParams,
@@ -141,6 +169,9 @@ export const useBatchPriceListPrices = (
         queryKey: priceListsQueryKeys.detail(id),
       })
       queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: priceListPricesQueryKeys.detail(id),
+      })
 
       options?.onSuccess?.(data, variables, context)
     },

package/src/hooks/api/products.tsx

@@ -11,7 +11,6 @@ import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { inventoryItemsQueryKeys } from "./inventory.tsx"
-import { productOptionsQueryKeys } from "./product-options.tsx"
 
 const PRODUCTS_QUERY_KEY = "products" as const
 export const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY)
@@ -19,6 +18,72 @@ export const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY)
 const VARIANTS_QUERY_KEY = "product_variants" as const
 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,
@@ -310,31 +375,6 @@ 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: productOptionsQueryKeys.lists(),
-      })
-
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
 export const useExportProducts = (
   query?: HttpTypes.AdminProductListParams,
   options?: UseMutationOptions<

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

@@ -4,7 +4,6 @@ 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"