fix(dashboard): variants disappearing when removing an option on product creation (#13150)

* fix(dashboard): variants disappearing when removing an option on product creation

* error border on option without values

---------

Co-authored-by: william bouchard <williambouchard@williams-MacBook-Pro.local>

.changeset/tasty-donuts-laugh.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): variants disappearing when removing an option on product creation

packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -3,6 +3,7 @@ import {
   Alert,
   Button,
   Checkbox,
+  clx,
   Heading,
   Hint,
   IconButton,
@@ -10,13 +11,12 @@ import {
   Input,
   Label,
   Text,
-  clx,
 } from "@medusajs/ui"
 import {
   Controller,
   FieldArrayWithId,
-  UseFormReturn,
   useFieldArray,
+  UseFormReturn,
   useWatch,
 } from "react-hook-form"
 import { useTranslation } from "react-i18next"
@@ -104,7 +104,9 @@ export const ProductCreateVariantsSection = ({
     const newOptions = [...watchedOptions]
     newOptions[index].values = value
 
-    const permutations = getPermutations(newOptions)
+    const permutations = getPermutations(
+      newOptions.filter(({ values }) => values.length)
+    )
     const oldVariants = [...watchedVariants]
 
     const findMatchingPermutation = (options: Record<string, string>) => {
@@ -157,46 +159,29 @@ export const ProductCreateVariantsSection = ({
 
     const newOptions = [...watchedOptions]
     newOptions.splice(index, 1)
+    const validOptionTitles = new Set(newOptions.map((option) => option.title))
 
     const permutations = getPermutations(newOptions)
     const oldVariants = [...watchedVariants]
 
-    const findMatchingPermutation = (options: Record<string, string>) => {
+    const newVariants = permutations.reduce((variants, permutation) => {
-      return permutations.find((permutation) =>
+      const variant = oldVariants.find(({ options }) =>
-        Object.keys(options).every((key) => options[key] === permutation[key])
+        Object.keys(options)
+          .filter((option) => validOptionTitles.has(option))
+          .every((key) => options[key] === permutation[key])
       )
-    }
 
-    const newVariants = oldVariants.reduce((variants, variant) => {
+      if (variant) {
-      const match = findMatchingPermutation(variant.options)
-
-      if (match) {
         variants.push({
           ...variant,
-          title: getVariantName(match),
+          title: variant.title,
-          options: match,
+          options: permutation,
         })
       }
 
       return variants
     }, [] as typeof oldVariants)
 
-    const usedPermutations = new Set(
-      newVariants.map((variant) => variant.options)
-    )
-    const unusedPermutations = permutations.filter(
-      (permutation) => !usedPermutations.has(permutation)
-    )
-
-    unusedPermutations.forEach((permutation) => {
-      newVariants.push({
-        title: getVariantName(permutation),
-        options: permutation,
-        should_create: false,
-        variant_rank: newVariants.length,
-      })
-    })
-
     form.setValue("variants", newVariants)
   }
 
@@ -347,10 +332,18 @@ export const ProductCreateVariantsSection = ({
                       )}
                       <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="bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5"
+                              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">