feat: Improve how options are defined and handled for product (#7007)

* feat: Improve how options are defined and handled for product

* fix: Updating option values supports passing without id

packages/admin-next/dashboard/src/v2-routes/products/product-detail/components/product-variant-section/use-variant-table-columns.tsx

@@ -82,7 +82,7 @@ export const useProductVariantTableColumns = (product?: Product) => {
         ),
         cell: ({ row }) => {
           const variantOpt: any = row.original.options.find(
-            (opt: any) => opt.option_value.option_id === option.id
+            (opt: any) => opt.option_id === option.id
           )
           if (!variantOpt) {
             return <PlaceholderCell />
@@ -94,7 +94,7 @@ export const useProductVariantTableColumns = (product?: Product) => {
                 size="2xsmall"
                 className="flex min-w-[20px] items-center justify-center"
               >
-                {variantOpt.option_value.value}
+                {variantOpt.value}
               </Badge>
             </div>
           )

packages/admin-next/dashboard/src/v2-routes/products/product-edit-variant/components/product-edit-variant-form/product-edit-variant-form.tsx

@@ -53,10 +53,8 @@ export const ProductEditVariantForm = ({
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const defaultOptions = product.options.reduce((acc: any, option: any) => {
-    const varOpt = variant.options.find(
-      (o: any) => o.option_value.option_id === option.id
-    )
-    acc[option.title] = varOpt?.option_value?.value
+    const varOpt = variant.options.find((o: any) => o.option_id === option.id)
+    acc[option.title] = varOpt?.value
     return acc
   }, {})
 

packages/admin-next/dashboard/src/v2-routes/products/product-edit-variant/loader.ts

@@ -0,0 +1,34 @@
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { queryClient } from "../../../lib/medusa"
+import { productsQueryKeys } from "../../../hooks/api/products"
+import { client } from "../../../lib/client"
+
+const queryKey = (id: string) => {
+  return [productsQueryKeys.detail(id)]
+}
+
+const queryFn = async (id: string) => {
+  const productRes = await client.products.retrieve(id)
+  return {
+    initialData: productRes,
+    isStockAndInventoryEnabled: false,
+  }
+}
+
+const editProductVariantQuery = (id: string) => ({
+  queryKey: queryKey(id),
+  queryFn: async () => queryFn(id),
+})
+
+export const editProductVariantLoader = async ({
+  params,
+}: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = editProductVariantQuery(id!)
+
+  return (
+    queryClient.getQueryData<ReturnType<typeof queryFn>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}