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

package/src/hooks/api/products.tsx

@@ -11,6 +11,7 @@ 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)
@@ -18,72 +19,6 @@ 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,
@@ -375,6 +310,31 @@ 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/columns/use-product-option-table-columns.tsx

@@ -0,0 +1,44 @@
+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"
+import { Badge } from "@medusajs/ui"
+
+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.status"),
+        cell: ({ getValue }) => {
+          const isExclusive = getValue()
+          return (
+            <Badge size="xsmall" color={isExclusive ? "grey" : "blue"}>
+              {t(`general.${isExclusive ? "exclusive" : "global"}`)}
+            </Badge>
+          )
+        },
+      }),
+    ],
+    [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.type"),
+        type: "radio",
+        options: [
+          {
+            label: t("general.exclusive"),
+            value: "true",
+          },
+          {
+            label: t("general.global"),
+            value: "false",
+          },
+        ],
+      }),
+      ...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 ? JSON.parse(is_exclusive) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

package/src/i18n/translations/$schema.json

@@ -178,6 +178,12 @@
         },
         "noMoreData": {
           "type": "string"
+        },
+        "exclusive": {
+          "type": "string"
+        },
+        "global": {
+          "type": "string"
         }
       },
       "required": [
@@ -237,7 +243,9 @@
         "unsavedChangesDescription",
         "includesTaxTooltip",
         "excludesTaxTooltip",
-        "noMoreData"
+        "noMoreData",
+        "exclusive",
+        "global"
       ],
       "additionalProperties": false
     },
@@ -509,6 +517,9 @@
         },
         "cannotUndo": {
           "type": "string"
+        },
+        "manage": {
+          "type": "string"
         }
       },
       "required": [
@@ -555,7 +566,8 @@
         "hide",
         "export",
         "import",
-        "cannotUndo"
+        "cannotUndo",
+        "manage"
       ],
       "additionalProperties": false
     },
@@ -1692,6 +1704,9 @@
                   },
                   "required": ["label", "hint"],
                   "additionalProperties": false
+                },
+                "selectValuesHint": {
+                  "type": "string"
                 }
               },
               "required": [
@@ -1701,7 +1716,8 @@
                 "optionTitle",
                 "optionValues",
                 "productVariants",
-                "productOptions"
+                "productOptions",
+                "selectValuesHint"
               ],
               "additionalProperties": false
             },
@@ -2652,11 +2668,39 @@
               "required": ["header", "successToast"],
               "additionalProperties": false
             },
+            "manage": {
+              "type": "object",
+              "properties": {
+                "header": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "hint": {
+                  "type": "string"
+                },
+                "placeholder": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "header",
+                "description",
+                "label",
+                "hint",
+                "placeholder"
+              ],
+              "additionalProperties": false
+            },
             "deleteWarning": {
               "type": "string"
             }
           },
-          "required": ["header", "edit", "create", "deleteWarning"],
+          "required": ["header", "edit", "create", "manage", "deleteWarning"],
           "additionalProperties": false
         },
         "organization": {
@@ -3157,6 +3201,128 @@
       ],
       "additionalProperties": false
     },
+    "productOptions": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        },
+        "subtitle": {
+          "type": "string"
+        },
+        "values": {
+          "type": "object",
+          "properties": {
+            "header": {
+              "type": "string"
+            }
+          },
+          "required": ["header"],
+          "additionalProperties": false
+        },
+        "create": {
+          "type": "object",
+          "properties": {
+            "header": {
+              "type": "string"
+            },
+            "hint": {
+              "type": "string"
+            },
+            "successToast": {
+              "type": "string"
+            },
+            "tabs": {
+              "type": "object",
+              "properties": {
+                "details": {
+                  "type": "string"
+                },
+                "organize": {
+                  "type": "string"
+                }
+              },
+              "required": ["details", "organize"],
+              "additionalProperties": false
+            }
+          },
+          "required": ["header", "hint", "successToast", "tabs"],
+          "additionalProperties": false
+        },
+        "edit": {
+          "type": "object",
+          "properties": {
+            "header": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "successToast": {
+              "type": "string"
+            }
+          },
+          "required": ["header", "description", "successToast"],
+          "additionalProperties": false
+        },
+        "delete": {
+          "type": "object",
+          "properties": {
+            "confirmation": {
+              "type": "string"
+            },
+            "successToast": {
+              "type": "string"
+            }
+          },
+          "required": ["confirmation", "successToast"],
+          "additionalProperties": false
+        },
+        "fields": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "object",
+              "properties": {
+                "label": {
+                  "type": "string"
+                },
+                "placeholder": {
+                  "type": "string"
+                }
+              },
+              "required": ["label", "placeholder"],
+              "additionalProperties": false
+            },
+            "values": {
+              "type": "object",
+              "properties": {
+                "label": {
+                  "type": "string"
+                },
+                "placeholder": {
+                  "type": "string"
+                }
+              },
+              "required": ["label", "placeholder"],
+              "additionalProperties": false
+            }
+          },
+          "required": ["title", "values"],
+          "additionalProperties": false
+        }
+      },
+      "required": [
+        "domain",
+        "subtitle",
+        "values",
+        "create",
+        "edit",
+        "delete",
+        "fields"
+      ],
+      "additionalProperties": false
+    },
     "inventory": {
       "type": "object",
       "properties": {
@@ -12073,6 +12239,7 @@
     "products",
     "collections",
     "categories",
+    "productOptions",
     "inventory",
     "giftCards",
     "customers",

package/src/i18n/translations/en.json

@@ -57,7 +57,9 @@
     "unsavedChangesDescription": "You have unsaved changes that will be lost if you exit this form.",
     "includesTaxTooltip": "Prices in this column are tax inclusive.",
     "excludesTaxTooltip": "Prices in this column are tax exclusive.",
-    "noMoreData": "No more data"
+    "noMoreData": "No more data",
+    "exclusive": "Product-specific",
+    "global": "Global"
   },
   "json": {
     "header": "JSON",
@@ -141,7 +143,8 @@
     "hide": "Hide",
     "export": "Export",
     "import": "Import",
-    "cannotUndo": "This action cannot be undone"
+    "cannotUndo": "This action cannot be undone",
+    "manage": "Manage"
   },
   "operators": {
     "in": "In"
@@ -448,7 +451,8 @@
         "productOptions": {
           "label": "Product options",
           "hint": "Define the options for the product, e.g. color, size, etc."
-        }
+        },
+        "selectValuesHint": "Select which values to use for each option"
       },
       "successToast": "Product {{title}} was successfully created."
     },
@@ -705,6 +709,13 @@
         "header": "Create Option",
         "successToast": "Option {{title}} was successfully created."
       },
+      "manage": {
+        "header": "Manage Product Options",
+        "description": "Associate or disassociate product options from this product.",
+        "label": "Product Options",
+        "hint": "Select which options should be associated to this product.",
+        "placeholder": "Select options"
+      },
       "deleteWarning": "You are about to delete the product option: {{title}}. This action cannot be undone."
     },
     "organization": {
@@ -841,6 +852,41 @@
       }
     }
   },
+  "productOptions": {
+    "domain": "Options",
+    "subtitle": "Manage product options and their associated values.",
+    "values": {
+      "header": "Values"
+    },
+    "create": {
+      "header": "Create Product Option",
+      "hint": "Create a new product option and manage its values.",
+      "successToast": "Product option \"{{title}}\" was successfully created.",
+      "tabs": {
+        "details": "Details",
+        "organize": "Organize"
+      }
+    },
+    "edit": {
+      "header": "Edit Product Option",
+      "description": "Edit the product option to update its details and associated values.",
+      "successToast": "Product option \"{{title}}\" was successfully updated."
+    },
+    "delete": {
+      "confirmation": "You are about to delete the product option \"{{title}}\". This action cannot be undone.",
+      "successToast": "Product option was successfully deleted."
+    },
+    "fields": {
+      "title": {
+        "label": "Title",
+        "placeholder": "Size"
+      },
+      "values": {
+        "label": "Values",
+        "placeholder": "S, M, L"
+      }
+    }
+  },
   "inventory": {
     "domain": "Inventory",
     "subtitle": "Manage your inventory items",

package/src/routes/product-options/common/hooks/use-delete-product-option-action.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom"
+import { toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useDeleteProductOption } from "../../../../hooks/api"
+import { HttpTypes } from "@medusajs/types"
+
+export const useDeleteProductOptionAction = ({
+  id,
+  title,
+}: HttpTypes.AdminProductOption) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+
+  const { mutateAsync } = useDeleteProductOption(id)
+
+  return async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("productOptions.delete.confirmation", { title }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/product-options", {
+          replace: true,
+        })
+        toast.success(t("productOptions.delete.successToast", { title }))
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-details.tsx

@@ -0,0 +1,71 @@
+import { Heading, Input, Text } from "@medusajs/ui"
+import { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { Form } from "../../../../../components/common/form"
+import { ChipInput } from "../../../../../components/inputs/chip-input"
+import { CreateProductOptionSchema } from "./schema"
+
+type CreateProductOptionDetailsProps = {
+  form: UseFormReturn<CreateProductOptionSchema>
+}
+
+export const CreateProductOptionDetails = ({
+  form,
+}: CreateProductOptionDetailsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col items-center p-16">
+      <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+        <div>
+          <Heading>{t("productOptions.create.header")}</Heading>
+          <Text size="small" className="text-ui-fg-subtle">
+            {t("productOptions.create.hint")}
+          </Text>
+        </div>
+        <Form.Field
+          control={form.control}
+          name="title"
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Label>
+                  {t("productOptions.fields.title.label")}
+                </Form.Label>
+                <Form.Control>
+                  <Input
+                    autoComplete="off"
+                    {...field}
+                    placeholder={t("productOptions.fields.title.placeholder")}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+        <Form.Field
+          control={form.control}
+          name="values"
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Label>
+                  {t("productOptions.fields.values.label")}
+                </Form.Label>
+                <Form.Control>
+                  <ChipInput
+                    {...field}
+                    placeholder={t("productOptions.fields.values.placeholder")}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </div>
+    </div>
+  )
+}