feat: Revamp product details page and several product fixes and cleanups

packages/admin-next/dashboard/src/components/common/section/index.ts

@@ -0,0 +1 @@
+export * from "./section-row"

packages/admin-next/dashboard/src/components/common/section/section-row.tsx

@@ -0,0 +1,33 @@
+import { Text } from "@medusajs/ui"
+
+export type SectionRowProps = {
+  title: string
+  value?: React.ReactNode | string | null
+  actions?: React.ReactNode
+}
+
+export const SectionRow = ({ title, value, actions }: SectionRowProps) => {
+  const isValueString = typeof value === "string" || !value
+
+  return (
+    <div
+      className={`text-ui-fg-subtle grid ${
+        !!actions ? "grid-cols-[1fr_1fr_28px]" : "grid-cols-2"
+      } items-center px-6 py-4`}
+    >
+      <Text size="small" weight="plus" leading="compact">
+        {title}
+      </Text>
+
+      {isValueString ? (
+        <Text size="small" leading="compact" className="text-pretty">
+          {value ?? "-"}
+        </Text>
+      ) : (
+        <div className="flex flex-wrap gap-1">{value}</div>
+      )}
+
+      {actions && <div>{actions}</div>}
+    </div>
+  )
+}

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"
   >
 ) => {

packages/admin-next/dashboard/src/lib/addresses.ts

@@ -1,4 +1,5 @@
 import { Address } from "@medusajs/medusa"
+import { countries } from "./countries"
 
 export const isSameAddress = (a: Address | null, b: Address | null) => {
   if (!a || !b) {
@@ -75,3 +76,12 @@ export const getFormattedAddress = ({
 
   return formattedAddress
 }
+
+export const getFormattedCountry = (countryCode: string | null | undefined) => {
+  if (!countryCode) {
+    return ""
+  }
+
+  const country = countries.find((c) => c.iso_2 === countryCode)
+  return country ? country.display_name : countryCode
+}

packages/admin-next/dashboard/src/lib/client/products.ts

@@ -1,24 +1,20 @@
-import {
-  ProductDeleteRes,
-  ProductListRes,
-  ProductRes,
-} from "../../types/api-responses"
+import { ProductDeleteRes, ProductListRes } from "../../types/api-responses"
 import { deleteRequest, getRequest, postRequest } from "./common"
 
 async function retrieveProduct(id: string, query?: Record<string, any>) {
-  return getRequest<ProductRes>(`/admin/products/${id}`, query)
+  return getRequest<any>(`/admin/products/${id}`, query)
 }
 
 async function createProduct(payload: any) {
-  return postRequest<ProductRes>(`/admin/products`, payload)
+  return postRequest<any>(`/admin/products`, payload)
 }
 
 async function listProducts(query?: Record<string, any>) {
   return getRequest<ProductListRes>(`/admin/products`, query)
 }
 
 async function updateProduct(id: string, payload: any) {
-  return postRequest<ProductRes>(`/admin/products/${id}`, payload)
+  return postRequest<any>(`/admin/products/${id}`, payload)
 }
 
 async function deleteProduct(id: string) {
@@ -40,12 +36,38 @@ async function listVariants(productId: string, query?: Record<string, any>) {
   return getRequest<any>(`/admin/products/${productId}/variants`, query)
 }
 
+async function updateVariant(
+  productId: string,
+  variantId: string,
+  payload: any
+) {
+  return postRequest<any>(
+    `/admin/products/${productId}/variants/${variantId}`,
+    payload
+  )
+}
+
 async function deleteVariant(productId: string, variantId: string) {
   return deleteRequest<any>(
     `/admin/products/${productId}/variants/${variantId}`
   )
 }
 
+async function createOption(productId: string, payload: any) {
+  return postRequest<any>(`/admin/products/${productId}/options`, payload)
+}
+
+async function updateOption(productId: string, optionId: string, payload: any) {
+  return postRequest<any>(
+    `/admin/products/${productId}/options/${optionId}`,
+    payload
+  )
+}
+
+async function deleteOption(productId: string, optionId: string) {
+  return deleteRequest<any>(`/admin/products/${productId}/options/${optionId}`)
+}
+
 export const products = {
   retrieve: retrieveProduct,
   list: listProducts,
@@ -54,5 +76,9 @@ export const products = {
   delete: deleteProduct,
   retrieveVariant,
   listVariants,
+  updateVariant,
   deleteVariant,
+  createOption,
+  updateOption,
+  deleteOption,
 }

packages/admin-next/dashboard/src/v2-routes/products/product-create-option/components/create-product-option-form/create-product-option-form.tsx

@@ -1,7 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Product } from "@medusajs/medusa"
 import { Button, Input } from "@medusajs/ui"
-import { useAdminCreateProductOption } from "medusa-react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -10,6 +9,7 @@ import {
   RouteDrawer,
   useRouteModal,
 } from "../../../../../components/route-modal"
+import { useCreateProductOption } from "../../../../../hooks/api/products"
 
 type EditProductOptionsFormProps = {
   product: Product
@@ -32,7 +32,7 @@ export const CreateProductOptionForm = ({
     resolver: zodResolver(CreateProductOptionSchema),
   })
 
-  const { mutateAsync, isLoading } = useAdminCreateProductOption(product.id)
+  const { mutateAsync, isLoading } = useCreateProductOption(product.id)
 
   const handleSubmit = form.handleSubmit(async (values) => {
     mutateAsync(values, {

packages/admin-next/dashboard/src/v2-routes/products/product-create/components/create-product-form/create-product-details.tsx

@@ -87,7 +87,7 @@ export const CreateProductDetails = ({ form }: CreateProductPropsProps) => {
   const { product_categories, isLoading: isLoadingCategories } = useCategories()
 
   const options = form.watch("options")
-  const optionPermutations = permutations(options)
+  const optionPermutations = permutations(options ?? [])
 
   // const { append } = useFieldArray({
   //   name: "images",
@@ -396,7 +396,7 @@ export const CreateProductDetails = ({ form }: CreateProductPropsProps) => {
                     control={form.control}
                     name="options"
                     render={({ field: { onChange, value } }) => {
-                      const normalizedValue = value.map((v) => {
+                      const normalizedValue = (value ?? []).map((v) => {
                         return {
                           key: v.title,
                           value: v.values.join(","),
@@ -443,7 +443,9 @@ export const CreateProductDetails = ({ form }: CreateProductPropsProps) => {
                     control={form.control}
                     name="variants"
                     render={({ field: { value, onChange, ...field } }) => {
-                      const selectedOptions = value.map((v) => v.options)
+                      const selectedOptions = (value ?? []).map(
+                        (v) => v.options
+                      )
                       return (
                         <Form.Item>
                           <Form.Label optional>

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

@@ -56,10 +56,6 @@ export const CreateProductForm = () => {
 
   const form = useForm<Schema>({
     defaultValues: {
-      title: "",
-      subtitle: "",
-      handle: "",
-      description: "",
       discountable: true,
       tags: [],
       sales_channels: [],
@@ -83,11 +79,12 @@ export const CreateProductForm = () => {
         length: values.length ? parseFloat(values.length) : undefined,
         height: values.height ? parseFloat(values.height) : undefined,
         weight: values.weight ? parseFloat(values.weight) : undefined,
-        variants: values.variants,
+        variants: values.variants.map((variant) => ({
+          ...variant,
+          prices: [],
+        })),
       } as any
 
-      delete reqData.sales_channels
-
       await mutateAsync(reqData, {
         onSuccess: ({ product }) => {
           handleSuccess(`../${product.id}`)