fix(admin-ui): Ensure order of variant options matches order of product options (#4178)

.changeset/unlucky-doors-sell.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): On duplicate product ensure order of variant options matches product options

packages/admin-ui/ui/src/components/templates/product-table/use-copy-product.ts

@@ -74,6 +74,22 @@ const useCopyProduct = () => {
       {} as Partial<AdminPostProductsReq>
     )
 
+    const optionRankMap: Record<string, number> = {}
+
+    if (options && options.length) {
+      options.forEach((option, i) => {
+        if (!base.options) {
+          base.options = []
+        }
+
+        optionRankMap[option.id] = i
+
+        base.options.push({
+          title: option.title,
+        })
+      })
+    }
+
     if (variants && variants.length) {
       const copiedVariants: AdminPostProductsReq["variants"] = []
 
@@ -108,7 +124,12 @@ const useCopyProduct = () => {
         }
 
         if (options && options.length) {
-          variantBase.options = options.map((option) => ({
+          // Sort the options by rank by looking up the rank in the optionRankMap
+          const sortedOptions = options.sort(
+            (a, b) => optionRankMap[a.option_id] - optionRankMap[b.option_id]
+          )
+
+          variantBase.options = sortedOptions.map((option) => ({
             value: option.value,
           }))
         }
@@ -119,12 +140,6 @@ const useCopyProduct = () => {
       base.variants = copiedVariants
     }
 
-    if (options && options.length) {
-      base.options = options.map((option) => ({
-        title: option.title,
-      }))
-    }
-
     if (images && images.length) {
       base.images = images.map((image) => image.url)
     }