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

package/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -1,32 +1,30 @@
-import { XMarkMini } from "@medusajs/icons"
 import {
   Alert,
-  Button,
   Checkbox,
   clx,
   Heading,
   Hint,
-  IconButton,
   InlineTip,
-  Input,
   Label,
   Text,
 } from "@medusajs/ui"
 import {
-  Controller,
   FieldArrayWithId,
   useFieldArray,
   UseFormReturn,
   useWatch,
 } from "react-hook-form"
 import { useTranslation } from "react-i18next"
+import { useMemo, useState } from "react"
 
 import { Form } from "../../../../../../../components/common/form"
 import { SortableList } from "../../../../../../../components/common/sortable-list"
 import { SwitchBox } from "../../../../../../../components/common/switch-box"
-import { ChipInput } from "../../../../../../../components/inputs/chip-input"
+import { Combobox } from "../../../../../../../components/inputs/combobox"
 import { ProductCreateSchemaType } from "../../../../types"
 import { decorateVariantsWithDefaultValues } from "../../../../utils"
+import { useProductOptions } from "../../../../../../../hooks/api"
+import { AdminProductOption } from "@medusajs/types"
 
 type ProductCreateVariantsSectionProps = {
   form: UseFormReturn<ProductCreateSchemaType>
@@ -65,11 +63,6 @@ export const ProductCreateVariantsSection = ({
 }: ProductCreateVariantsSectionProps) => {
   const { t } = useTranslation()
 
-  const options = useFieldArray({
-    control: form.control,
-    name: "options",
-  })
-
   const variants = useFieldArray({
     control: form.control,
     name: "variants",
@@ -97,90 +90,173 @@ export const ProductCreateVariantsSection = ({
   const showInvalidVariantsMessage =
     form.formState.errors.variants?.root?.message === "invalid_length"
 
-  const handleOptionValueUpdate = (index: number, value: string[]) => {
-    const { isTouched: hasUserSelectedVariants } =
-      form.getFieldState("variants")
-
-    const newOptions = [...watchedOptions]
-    newOptions[index].values = value
+  const { product_options = [], isLoading } = useProductOptions({
+    is_exclusive: false,
+  })
 
-    const permutations = getPermutations(
-      newOptions.filter(({ values }) => values.length)
+  const productOptionChoices = useMemo(() => {
+    return product_options.map((option) => ({
+      value: option.id,
+      label: option.title,
+    }))
+  }, [product_options])
+
+  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>([])
+  const [selectedOptionValues, setSelectedOptionValues] = useState<
+    Record<string, string[]>
+  >({})
+  const [customValues, setCustomValues] = useState<
+    Record<string, Array<{ id: string; value: string; rank: number }>>
+  >({})
+
+  const handleProductOptionSelect = (optionIds: string[]) => {
+    setSelectedOptionIds(optionIds)
+
+    // Initialize selected values for new options (select all by default)
+    const newSelectedValues: Record<string, string[]> = {}
+    const selectedProductOptions = product_options.filter((option) =>
+      optionIds.includes(option.id)
     )
-    const oldVariants = [...watchedVariants]
 
-    const findMatchingPermutation = (options: Record<string, string>) => {
-      return permutations.find((permutation) =>
-        Object.keys(options).every((key) => options[key] === permutation[key])
-      )
-    }
+    selectedProductOptions.forEach((option) => {
+      // If option was already selected, keep its current value selection
+      if (selectedOptionValues[option.id]) {
+        newSelectedValues[option.id] = selectedOptionValues[option.id]
+      } else {
+        // New option - select all values by default
+        newSelectedValues[option.id] = option.values?.map((v) => v.id) || []
+      }
+    })
 
-    const newVariants = oldVariants.reduce((variants, variant) => {
-      const match = findMatchingPermutation(variant.options)
+    setSelectedOptionValues(newSelectedValues)
+    updateFormWithSelectedValues(selectedProductOptions, newSelectedValues)
+  }
 
-      if (match) {
-        variants.push({
-          ...variant,
-          title: getVariantName(match),
-          options: match,
-        })
+  const handleValueChange = (optionId: string, valueIds: string[]) => {
+    // Ensure at least one value is selected
+    if (valueIds.length === 0) {
+      return
+    }
+
+    // Detect new custom values that aren't in the options yet
+    const allValues = getAllValuesForOption(optionId)
+    const existingValueIds = new Set(allValues.map((v) => v.id))
+
+    const validValueIds: string[] = []
+    const newCustomValues: string[] = []
+    valueIds.forEach((id) => {
+      if (existingValueIds.has(id)) {
+        validValueIds.push(id)
+      } else {
+        newCustomValues.push(id)
       }
+    })
 
-      return variants
-    }, [] as typeof oldVariants)
+    let updatedCustomValues = customValues
+    const updatedValidValueIds = [...validValueIds]
+    newCustomValues.forEach((newValue) => {
+      const tempId = `custom-${Date.now()}-${Math.random()}-${newValue}`
 
-    const usedPermutations = new Set(
-      newVariants.map((variant) => variant.options)
-    )
-    const unusedPermutations = permutations.filter(
-      (permutation) => !usedPermutations.has(permutation)
-    )
+      const existingCustom = updatedCustomValues[optionId] || []
+      const option = product_options.find((opt) => opt.id === optionId)
+      const existingValuesCount =
+        (option?.values?.length || 0) + existingCustom.length
+
+      const newCustomValue = {
+        id: tempId,
+        value: newValue,
+        rank: existingValuesCount + newCustomValues.indexOf(newValue),
+      }
 
-    unusedPermutations.forEach((permutation) => {
-      newVariants.push({
-        title: getVariantName(permutation),
-        options: permutation,
-        should_create: hasUserSelectedVariants ? false : true,
-        variant_rank: newVariants.length,
-        // NOTE - prepare inventory array here for now so we prevent rendering issue if we append the items later
-        inventory: [{ inventory_item_id: "", required_quantity: "" }],
-      })
+      updatedCustomValues = {
+        ...updatedCustomValues,
+        [optionId]: [...(updatedCustomValues[optionId] || []), newCustomValue],
+      }
+
+      updatedValidValueIds.push(tempId)
     })
 
-    form.setValue("variants", newVariants)
-  }
+    if (newCustomValues.length > 0) {
+      setCustomValues(updatedCustomValues)
+    }
 
-  const handleRemoveOption = (index: number) => {
-    if (index === 0) {
-      return
+    const updatedSelectedValues = {
+      ...selectedOptionValues,
+      [optionId]: updatedValidValueIds,
     }
 
-    options.remove(index)
+    setSelectedOptionValues(updatedSelectedValues)
 
-    const newOptions = [...watchedOptions]
-    newOptions.splice(index, 1)
-    const validOptionTitles = new Set(newOptions.map((option) => option.title))
+    const selectedProductOptions = product_options.filter((option) =>
+      selectedOptionIds.includes(option.id)
+    )
+    updateFormWithSelectedValues(
+      selectedProductOptions,
+      updatedSelectedValues,
+      newCustomValues.length > 0 ? updatedCustomValues : undefined
+    )
+  }
 
-    const permutations = getPermutations(newOptions)
-    const oldVariants = [...watchedVariants]
+  const getAllValuesForOption = (
+    optionId: string,
+    customVals?: Record<
+      string,
+      Array<{ id: string; value: string; rank: number }>
+    >
+  ) => {
+    const option = product_options.find((opt) => opt.id === optionId)
+    const existingValues = option?.values || []
+    const customForOption = (customVals || customValues)[optionId] || []
 
-    const newVariants = permutations.reduce((variants, permutation) => {
-      const variant = oldVariants.find(({ options }) =>
-        Object.keys(options)
-          .filter((option) => validOptionTitles.has(option))
-          .every((key) => options[key] === permutation[key])
-      )
+    return [...existingValues, ...customForOption]
+  }
 
-      if (variant) {
-        variants.push({
-          ...variant,
-          title: variant.title,
-          options: permutation,
+  const updateFormWithSelectedValues = (
+    selectedProductOptions: AdminProductOption[],
+    valueSelections: Record<string, string[]>,
+    customVals?: Record<
+      string,
+      Array<{
+        id: string
+        value: string
+        rank: number
+      }>
+    >
+  ) => {
+    const newOptions = selectedProductOptions.map((option) => {
+      const selectedValueIds = valueSelections[option.id] || []
+      const allValues = getAllValuesForOption(option.id, customVals)
+
+      const selectedValues = allValues
+        .filter((v) => selectedValueIds.includes(v.id))
+        .sort((a, b) => {
+          const rankA = a.rank ?? Number.MAX_VALUE
+          const rankB = b.rank ?? Number.MAX_VALUE
+          return rankA - rankB
         })
+        .map((v) => v.value)
+
+      return {
+        id: option.id,
+        title: option.title,
+        values: selectedValues,
+        value_ids: selectedValueIds,
       }
+    })
 
-      return variants
-    }, [] as typeof oldVariants)
+    form.setValue("options", newOptions)
+
+    const permutations = getPermutations(
+      newOptions.filter(({ values }) => values.length)
+    )
+
+    const newVariants = permutations.map((permutation, index) => ({
+      title: getVariantName(permutation),
+      options: permutation,
+      should_create: true,
+      variant_rank: index,
+      inventory: [{ inventory_item_id: "", required_quantity: "" }],
+    }))
 
     form.setValue("variants", newVariants)
   }
@@ -289,138 +365,84 @@ export const ProductCreateVariantsSection = ({
             } else {
               createDefaultOptionAndVariant()
             }
+            setSelectedOptionIds([])
+            setSelectedOptionValues({})
+            setCustomValues({})
           }}
         />
       </div>
       {watchedAreVariantsEnabled && (
         <>
           <div className="flex flex-col gap-y-6">
-            <Form.Field
-              control={form.control}
-              name="options"
-              render={() => {
-                return (
-                  <Form.Item>
-                    <div className="flex flex-col gap-y-6">
-                      <div className="flex items-start justify-between gap-x-4">
-                        <div className="flex flex-col">
-                          <Form.Label>
-                            {t("products.create.variants.productOptions.label")}
-                          </Form.Label>
-                          <Form.Hint>
-                            {t("products.create.variants.productOptions.hint")}
-                          </Form.Hint>
-                        </div>
-                        <Button
-                          size="small"
-                          variant="secondary"
-                          type="button"
-                          onClick={() => {
-                            options.append({
-                              title: "",
-                              values: [],
-                            })
-                          }}
-                        >
-                          {t("actions.add")}
-                        </Button>
-                      </div>
-                      {showInvalidOptionsMessage && (
-                        <Alert dismissible variant="error">
-                          {t("products.create.errors.options")}
-                        </Alert>
-                      )}
-                      <ul className="flex flex-col gap-y-4">
-                        {options.fields.map((option, index) => {
-                          const hasError =
-                            !!form.formState.errors.options?.[index]
-                          return (
-                            <li
-                              key={option.id}
-                              className={clx(
-                                "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5",
-                                {
-                                  "border-ui-border-error shadow-borders-error":
-                                    hasError,
-                                }
-                              )}
-                            >
-                              <div className="grid grid-cols-[min-content,1fr] items-center gap-1.5">
-                                <div className="flex items-center px-2 py-1.5">
-                                  <Label
-                                    size="xsmall"
-                                    weight="plus"
-                                    className="text-ui-fg-subtle"
-                                    htmlFor={`options.${index}.title`}
-                                  >
-                                    {t("fields.title")}
-                                  </Label>
-                                </div>
-                                <Input
-                                  className="bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover"
-                                  {...form.register(
-                                    `options.${index}.title` as const
-                                  )}
-                                  placeholder={t(
-                                    "products.fields.options.optionTitlePlaceholder"
-                                  )}
-                                />
-                                <div className="flex items-center px-2 py-1.5">
-                                  <Label
-                                    size="xsmall"
-                                    weight="plus"
-                                    className="text-ui-fg-subtle"
-                                    htmlFor={`options.${index}.values`}
-                                  >
-                                    {t("fields.values")}
-                                  </Label>
-                                </div>
-                                <Controller
-                                  control={form.control}
-                                  name={`options.${index}.values` as const}
-                                  render={({
-                                    field: { onChange, ...field },
-                                  }) => {
-                                    const handleValueChange = (
-                                      value: string[]
-                                    ) => {
-                                      handleOptionValueUpdate(index, value)
-                                      onChange(value)
-                                    }
-
-                                    return (
-                                      <ChipInput
-                                        {...field}
-                                        variant="contrast"
-                                        onChange={handleValueChange}
-                                        placeholder={t(
-                                          "products.fields.options.variantionsPlaceholder"
-                                        )}
-                                      />
-                                    )
-                                  }}
-                                />
-                              </div>
-                              <IconButton
-                                type="button"
-                                size="small"
-                                variant="transparent"
-                                className="text-ui-fg-muted"
-                                disabled={index === 0}
-                                onClick={() => handleRemoveOption(index)}
-                              >
-                                <XMarkMini />
-                              </IconButton>
-                            </li>
-                          )
-                        })}
-                      </ul>
-                    </div>
-                  </Form.Item>
-                )
-              }}
+            <div className="flex flex-col">
+              <Label weight="plus">
+                {t("products.create.variants.productOptions.label")}
+              </Label>
+              <Hint>{t("products.create.variants.productOptions.hint")}</Hint>
+            </div>
+            {showInvalidOptionsMessage && (
+              <Alert dismissible variant="error">
+                {t("products.create.errors.options")}
+              </Alert>
+            )}
+            <Combobox
+              value={selectedOptionIds}
+              onChange={(value) => handleProductOptionSelect(value as string[])}
+              options={productOptionChoices}
+              placeholder={t("products.fields.options.optionTitlePlaceholder")}
+              disabled={isLoading}
+              displayMode="chips"
             />
           </div>
+          {selectedOptionIds.length > 0 && (
+            <div className="flex flex-col gap-y-4">
+              <div className="flex flex-col">
+                <Label weight="plus">{t("fields.values")}</Label>
+                <Hint>{t("products.create.variants.selectValuesHint")}</Hint>
+              </div>
+              <div className="flex flex-col gap-y-3">
+                {product_options
+                  .filter((option) => selectedOptionIds.includes(option.id))
+                  .map((option) => {
+                    // Get all values (existing + custom) for this option
+                    const allValues = getAllValuesForOption(option.id)
+
+                    const valueOptions = allValues
+                      .sort((a, b) => {
+                        const rankA = a.rank ?? Number.MAX_VALUE
+                        const rankB = b.rank ?? Number.MAX_VALUE
+                        return rankA - rankB
+                      })
+                      .map((v) => ({
+                        value: v.id,
+                        label: v.value,
+                      }))
+
+                    return (
+                      <div key={option.id} className="flex flex-col gap-y-2">
+                        <Label size="small" weight="plus">
+                          {option.title}
+                        </Label>
+                        <Combobox
+                          value={selectedOptionValues[option.id] || []}
+                          onChange={(value) =>
+                            handleValueChange(option.id, value as string[])
+                          }
+                          onCreateOption={(_) => {
+                            // Todo
+                          }}
+                          options={valueOptions}
+                          placeholder={t(
+                            "products.fields.options.variantionsPlaceholder"
+                          )}
+                          displayMode="chips"
+                        />
+                      </div>
+                    )
+                  })}
+              </div>
+            </div>
+          )}
           <div className="grid grid-cols-1 gap-x-4 gap-y-8">
             <div className="flex flex-col gap-y-6">
               <div className="flex flex-col">

package/src/routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -78,13 +78,10 @@ export const ProductCreateForm = ({
       return {}
     }
 
-    return regions.reduce(
-      (acc, reg) => {
-        acc[reg.id] = reg.currency_code
-        return acc
-      },
-      {} as Record<string, string>
-    )
+    return regions.reduce((acc, reg) => {
+      acc[reg.id] = reg.currency_code
+      return acc
+    }, {} as Record<string, string>)
   }, [regions])
 
   /**

package/src/routes/products/product-create/constants.ts

@@ -47,8 +47,10 @@ export type ProductCreateVariantSchema = z.infer<
 >
 
 const ProductCreateOptionSchema = z.object({
+  id: z.string().optional(),
   title: z.string(),
   values: z.array(z.string()).min(1),
+  value_ids: z.array(z.string()).optional(),
 })
 
 export type ProductCreateOptionSchema = z.infer<

package/src/routes/products/product-create/utils.ts

@@ -13,6 +13,8 @@ export const normalizeProductFormValues = (
     ?.filter((media) => !media.isThumbnail)
     .map((media) => ({ url: media.url }))
 
+  const options = values.options.filter((o) => o.title) // clean temp. values
+
   return {
     status: values.status,
     is_giftcard: false,
@@ -41,7 +43,10 @@ export const normalizeProductFormValues = (
     length: values.length ? parseFloat(values.length) : undefined,
     height: values.height ? parseFloat(values.height) : undefined,
     weight: values.weight ? parseFloat(values.weight) : undefined,
-    options: values.options.filter((o) => o.title), // clean temp. values
+    options: options.map((option) => {
+      const { id, value_ids, ...rest } = option
+      return id ? { id, value_ids } : { ...rest, is_exclusive: true }
+    }),
     variants: normalizeVariants(
       values.variants.filter((variant) => variant.should_create),
       values.regionsCurrencyMap

package/src/routes/products/product-detail/components/product-option-section/product-option-section.tsx

@@ -1,38 +1,16 @@
-import { PencilSquare, Plus, Trash } from "@medusajs/icons"
-import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
+import { PencilSquare } from "@medusajs/icons"
+import { Badge, Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
-import { useDeleteProductOption } from "../../../../../hooks/api/products"
 import { HttpTypes } from "@medusajs/types"
 
 const OptionActions = ({
-  product,
   option,
 }: {
-  product: HttpTypes.AdminProduct
   option: HttpTypes.AdminProductOption
 }) => {
   const { t } = useTranslation()
-  const { mutateAsync } = useDeleteProductOption(product.id, option.id)
-  const prompt = usePrompt()
-
-  const handleDelete = async () => {
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("products.options.deleteWarning", {
-        title: option.title,
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!res) {
-      return
-    }
-
-    await mutateAsync()
-  }
 
   return (
     <ActionMenu
@@ -41,20 +19,11 @@ const OptionActions = ({
           actions: [
             {
               label: t("actions.edit"),
-              to: `options/${option.id}/edit`,
+              to: `/product-options/${option.id}/edit`,
               icon: <PencilSquare />,
             },
           ],
         },
-        {
-          actions: [
-            {
-              label: t("actions.delete"),
-              onClick: handleDelete,
-              icon: <Trash />,
-            },
-          ],
-        },
       ]}
     />
   )
@@ -78,9 +47,9 @@ export const ProductOptionSection = ({
             {
               actions: [
                 {
-                  label: t("actions.create"),
-                  to: "options/create",
-                  icon: <Plus />,
+                  label: t("actions.manage"),
+                  to: "options/manage",
+                  icon: <PencilSquare />,
                 },
               ],
             },
@@ -93,18 +62,31 @@ export const ProductOptionSection = ({
           <SectionRow
             title={option.title}
             key={option.id}
-            value={option.values?.map((val) => {
-              return (
-                <Badge
-                  key={val.value}
-                  size="2xsmall"
-                  className="flex min-w-[20px] items-center justify-center"
-                >
-                  {val.value}
-                </Badge>
-              )
-            })}
-            actions={<OptionActions product={product} option={option} />}
+            value={option.values
+              ?.sort((a, b) => {
+                if (a.rank == null && b.rank == null) {
+                  return 0
+                }
+                if (a.rank == null) {
+                  return 1
+                }
+                if (b.rank == null) {
+                  return -1
+                }
+                return a.rank - b.rank
+              })
+              .map((val) => {
+                return (
+                  <Badge
+                    key={val.value}
+                    size="2xsmall"
+                    className="flex min-w-[20px] items-center justify-center"
+                  >
+                    {val.value}
+                  </Badge>
+                )
+              })}
+            actions={<OptionActions option={option} />}
           />
         )
       })}

package/src/routes/products/product-options-manage/components/product-options-manage-form/index.ts

@@ -0,0 +1 @@
+export { ProductOptionsManageForm } from "./product-options-manage-form"