feat: Revamp product details page and several product fixes and cleanups (#6988)

packages/admin-next/dashboard/src/hooks/api/products.tsx

@@ -7,11 +7,7 @@ import {
 } from "@tanstack/react-query"
 import { client } from "../../lib/client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
-import {
-  ProductDeleteRes,
-  ProductListRes,
-  ProductRes,
-} from "../../types/api-responses"
+import { ProductDeleteRes, ProductRes } from "../../types/api-responses"
 import { queryClient } from "../../lib/medusa"
 
 const PRODUCTS_QUERY_KEY = "products" as const
@@ -20,6 +16,63 @@ export const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY)
 const VARIANTS_QUERY_KEY = "product_variants" as const
 export const variantsQueryKeys = queryKeysFactory(VARIANTS_QUERY_KEY)
 
+const OPTIONS_QUERY_KEY = "product_options" as const
+export const optionsQueryKeys = queryKeysFactory(OPTIONS_QUERY_KEY)
+
+export const useCreateProductOption = (
+  productId: string,
+  options?: UseMutationOptions<any, Error, any>
+) => {
+  return useMutation({
+    mutationFn: (payload: any) =>
+      client.products.createOption(productId, payload),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductOption = (
+  productId: string,
+  optionId: string,
+  options?: UseMutationOptions<any, Error, any>
+) => {
+  return useMutation({
+    mutationFn: (payload: any) =>
+      client.products.updateOption(productId, optionId, payload),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: optionsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: optionsQueryKeys.detail(optionId),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOption = (
+  productId: string,
+  optionId: string,
+  options?: UseMutationOptions<any, Error, void>
+) => {
+  return useMutation({
+    mutationFn: () => client.products.deleteOption(productId, optionId),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(optionId),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
 export const useProductVariant = (
   productId: string,
   variantId: string,
@@ -55,6 +108,26 @@ export const useProductVariants = (
   return { ...data, ...rest }
 }
 
+export const useUpdateProductVariant = (
+  productId: string,
+  variantId: string,
+  options?: UseMutationOptions<any, Error, any>
+) => {
+  return useMutation({
+    mutationFn: (payload: any) =>
+      client.products.updateVariant(productId, variantId, payload),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.detail(variantId),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
 export const useDeleteVariant = (
   productId: string,
   variantId: string,
@@ -78,7 +151,7 @@ export const useProduct = (
   id: string,
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<ProductRes, Error, ProductRes, QueryKey>,
+    UseQueryOptions<any, Error, any, QueryKey>,
     "queryFn" | "queryKey"
   >
 ) => {
@@ -94,7 +167,7 @@ export const useProduct = (
 export const useProducts = (
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<ProductListRes, Error, ProductListRes, QueryKey>,
+    UseQueryOptions<any, Error, any, QueryKey>,
     "queryFn" | "queryKey"
   >
 ) => {