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

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

@@ -1,30 +1,32 @@
+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 { Combobox } from "../../../../../../../components/inputs/combobox"
+import { ChipInput } from "../../../../../../../components/inputs/chip-input"
 import { ProductCreateSchemaType } from "../../../../types"
 import { decorateVariantsWithDefaultValues } from "../../../../utils"
-import { useProductOptions } from "../../../../../../../hooks/api"
-import { AdminProductOption } from "@medusajs/types"
 
 type ProductCreateVariantsSectionProps = {
   form: UseFormReturn<ProductCreateSchemaType>
@@ -63,6 +65,11 @@ export const ProductCreateVariantsSection = ({
 }: ProductCreateVariantsSectionProps) => {
   const { t } = useTranslation()
 
+  const options = useFieldArray({
+    control: form.control,
+    name: "options",
+  })
+
   const variants = useFieldArray({
     control: form.control,
     name: "variants",
@@ -90,173 +97,90 @@ export const ProductCreateVariantsSection = ({
   const showInvalidVariantsMessage =
     form.formState.errors.variants?.root?.message === "invalid_length"
 
-  const { product_options = [], isLoading } = useProductOptions({
-    is_exclusive: false,
-  })
-
-  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 handleOptionValueUpdate = (index: number, value: string[]) => {
+    const { isTouched: hasUserSelectedVariants } =
+      form.getFieldState("variants")
 
-    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 newOptions = [...watchedOptions]
+    newOptions[index].values = value
 
-    setSelectedOptionValues(newSelectedValues)
-    updateFormWithSelectedValues(selectedProductOptions, newSelectedValues)
-  }
+    const permutations = getPermutations(
+      newOptions.filter(({ values }) => values.length)
+    )
+    const oldVariants = [...watchedVariants]
 
-  const handleValueChange = (optionId: string, valueIds: string[]) => {
-    // Ensure at least one value is selected
-    if (valueIds.length === 0) {
-      return
+    const findMatchingPermutation = (options: Record<string, string>) => {
+      return permutations.find((permutation) =>
+        Object.keys(options).every((key) => options[key] === permutation[key])
+      )
     }
 
-    // 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)
-      }
-    })
-
-    let updatedCustomValues = customValues
-    const updatedValidValueIds = [...validValueIds]
-    newCustomValues.forEach((newValue) => {
-      const tempId = `custom-${Date.now()}-${Math.random()}-${newValue}`
-
-      const existingCustom = updatedCustomValues[optionId] || []
-      const option = product_options.find((opt) => opt.id === optionId)
-      const existingValuesCount =
-        (option?.values?.length || 0) + existingCustom.length
+    const newVariants = oldVariants.reduce((variants, variant) => {
+      const match = findMatchingPermutation(variant.options)
 
-      const newCustomValue = {
-        id: tempId,
-        value: newValue,
-        rank: existingValuesCount + newCustomValues.indexOf(newValue),
+      if (match) {
+        variants.push({
+          ...variant,
+          title: getVariantName(match),
+          options: match,
+        })
       }
 
-      updatedCustomValues = {
-        ...updatedCustomValues,
-        [optionId]: [...(updatedCustomValues[optionId] || []), newCustomValue],
-      }
+      return variants
+    }, [] as typeof oldVariants)
+
+    const usedPermutations = new Set(
+      newVariants.map((variant) => variant.options)
+    )
+    const unusedPermutations = permutations.filter(
+      (permutation) => !usedPermutations.has(permutation)
+    )
 
-      updatedValidValueIds.push(tempId)
+    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: "" }],
+      })
     })
 
-    if (newCustomValues.length > 0) {
-      setCustomValues(updatedCustomValues)
-    }
+    form.setValue("variants", newVariants)
+  }
 
-    const updatedSelectedValues = {
-      ...selectedOptionValues,
-      [optionId]: updatedValidValueIds,
+  const handleRemoveOption = (index: number) => {
+    if (index === 0) {
+      return
     }
 
-    setSelectedOptionValues(updatedSelectedValues)
+    options.remove(index)
 
-    const selectedProductOptions = product_options.filter((option) =>
-      selectedOptionIds.includes(option.id)
-    )
-    updateFormWithSelectedValues(
-      selectedProductOptions,
-      updatedSelectedValues,
-      newCustomValues.length > 0 ? updatedCustomValues : undefined
-    )
-  }
+    const newOptions = [...watchedOptions]
+    newOptions.splice(index, 1)
+    const validOptionTitles = new Set(newOptions.map((option) => option.title))
 
-  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 permutations = getPermutations(newOptions)
+    const oldVariants = [...watchedVariants]
 
-    return [...existingValues, ...customForOption]
-  }
+    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])
+      )
 
-  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
+      if (variant) {
+        variants.push({
+          ...variant,
+          title: variant.title,
+          options: permutation,
         })
-        .map((v) => v.value)
-
-      return {
-        id: option.id,
-        title: option.title,
-        values: selectedValues,
-        value_ids: selectedValueIds,
       }
-    })
 
-    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: "" }],
-    }))
+      return variants
+    }, [] as typeof oldVariants)
 
     form.setValue("variants", newVariants)
   }
@@ -365,84 +289,138 @@ export const ProductCreateVariantsSection = ({
             } else {
               createDefaultOptionAndVariant()
             }
-            setSelectedOptionIds([])
-            setSelectedOptionValues({})
-            setCustomValues({})
           }}
         />
       </div>
       {watchedAreVariantsEnabled && (
         <>
           <div className="flex flex-col gap-y-6">
-            <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
+            <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: [],
+                            })
                           }}
-                          options={valueOptions}
-                          placeholder={t(
-                            "products.fields.options.variantionsPlaceholder"
-                          )}
-                          displayMode="chips"
-                        />
+                        >
+                          {t("actions.add")}
+                        </Button>
                       </div>
-                    )
-                  })}
-              </div>
-            </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>
           <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,10 +78,13 @@ 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,10 +47,8 @@ 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,8 +13,6 @@ 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,
@@ -43,10 +41,7 @@ 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: options.map((option) => {
-      const { id, value_ids, ...rest } = option
-      return id ? { id, value_ids } : { ...rest, is_exclusive: true }
-    }),
+    options: values.options.filter((o) => o.title), // clean temp. values
     variants: normalizeVariants(
       values.variants.filter((variant) => variant.should_create),
       values.regionsCurrencyMap

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

@@ -0,0 +1,122 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Input, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import { HttpTypes } from "@medusajs/types"
+import { Form } from "../../../../../components/common/form"
+import { ChipInput } from "../../../../../components/inputs/chip-input"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useCreateProductOption } from "../../../../../hooks/api/products"
+
+type EditProductOptionsFormProps = {
+  product: HttpTypes.AdminProduct
+}
+
+const CreateProductOptionSchema = z.object({
+  title: z.string().min(1),
+  values: z.array(z.string()).optional(),
+})
+
+export const CreateProductOptionForm = ({
+  product,
+}: EditProductOptionsFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof CreateProductOptionSchema>>({
+    defaultValues: {
+      title: "",
+      values: [],
+    },
+    resolver: zodResolver(CreateProductOptionSchema),
+  })
+
+  const { mutateAsync, isPending } = useCreateProductOption(product.id)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(values, {
+      onSuccess: () => {
+        toast.success(
+          t("products.options.create.successToast", {
+            title: values.title,
+          })
+        )
+        handleSuccess()
+      },
+      onError: async (err) => {
+        toast.error(err.message)
+      },
+    })
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+          <Form.Field
+            control={form.control}
+            name="title"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("products.fields.options.optionTitle")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.optionTitlePlaceholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="values"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("products.fields.options.variations")}
+                  </Form.Label>
+                  <Form.Control>
+                    <ChipInput
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.variantionsPlaceholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button type="submit" size="small" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/products/product-create-option/components/create-product-option-form/index.ts

@@ -0,0 +1 @@
+export * from "./create-product-option-form"

package/src/routes/products/product-create-option/index.ts

@@ -0,0 +1 @@
+export { ProductCreateOption as Component } from "./product-create-option"