feat(dashboard,admin-shared,js-sdk): product option redesign (client-side)

.changeset/shaggy-parents-guess.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-shared": minor
+"@medusajs/dashboard": minor
+---
+
+feat(dashboard,admin-shared): product option redesign (client-side)

packages/admin/admin-shared/src/extensions/widgets/constants.ts

@@ -55,6 +55,15 @@ const PRODUCT_CATEGORY_INJECTION_ZONES = [
   "product_category.list.after",
 ] as const
 
+const PRODUCT_OPTION_INJECTION_ZONES = [
+  "product_option.details.before",
+  "product_option.details.after",
+  "product_option.details.side.before",
+  "product_option.details.side.after",
+  "product_option.list.before",
+  "product_option.list.after",
+] as const
+
 const SHIPPING_OPTION_TYPE_INJECTION_ZONES = [
   "shipping_option_type.details.before",
   "shipping_option_type.details.after",
@@ -216,6 +225,7 @@ export const INJECTION_ZONES = [
   ...PRODUCT_COLLECTION_INJECTION_ZONES,
   ...PRODUCT_CATEGORY_INJECTION_ZONES,
   ...PRODUCT_TYPE_INJECTION_ZONES,
+  ...PRODUCT_OPTION_INJECTION_ZONES,
   ...SHIPPING_OPTION_TYPE_INJECTION_ZONES,
   ...PRODUCT_TAG_INJECTION_ZONES,
   ...PRICE_LIST_INJECTION_ZONES,

packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import {
-  BuildingStorefront,
   Buildings,
+  BuildingStorefront,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
+import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,8 +107,7 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-    <DropdownMenu
-          dir={direction}>
+      <DropdownMenu dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -206,6 +205,10 @@ const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
           label: t("categories.domain"),
           to: "/categories",
         },
+        {
+          label: t("productOptions.domain"),
+          to: "/product-options",
+        },
         // TODO: Enable when domin is introduced
         // {
         //   label: t("giftCards.domain"),

packages/admin/dashboard/src/dashboard-app/routes/get-route.map.tsx

@@ -136,18 +136,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-prices"),
                         },
-                        {
-                          path: "options/create",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-create-option"
-                            ),
-                        },
-                        {
-                          path: "options/:option_id/edit",
-                          lazy: () =>
-                            import("../../routes/products/product-edit-option"),
-                        },
                         {
                           path: "variants/create",
                           lazy: () =>
@@ -165,6 +153,13 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
+                        {
+                          path: "options/manage",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-options-manage"
+                            ),
+                        },
                       ],
                     },
                     {
@@ -225,6 +220,63 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "/product-options",
+              errorElement: <ErrorBoundary />,
+              handle: {
+                breadcrumb: () => t("productOptions.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/product-options/product-option-list"),
+                  children: [
+                    {
+                      path: "create",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-create"
+                        ),
+                    },
+                  ],
+                },
+                {
+                  path: ":id",
+                  lazy: async () => {
+                    const { Component, Breadcrumb, loader } = await import(
+                      "../../routes/product-options/product-option-detail"
+                    )
+
+                    return {
+                      Component,
+                      loader,
+                      handle: {
+                        breadcrumb: (match: UIMatch<any>) => (
+                          <Breadcrumb {...match} />
+                        ),
+                      },
+                    }
+                  },
+                  children: [
+                    {
+                      path: "edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-edit"
+                        ),
+                    },
+                    {
+                      path: "metadata/edit",
+                      lazy: () =>
+                        import(
+                          "../../routes/product-options/product-option-metadata"
+                        ),
+                    },
+                  ],
+                },
+              ],
+            },
             {
               path: "/categories",
               errorElement: <ErrorBoundary />,

packages/admin/dashboard/src/hooks/api/index.ts

@@ -17,6 +17,7 @@ export * from "./payment-collections"
 export * from "./payments"
 export * from "./plugins"
 export * from "./price-lists"
+export * from "./product-options"
 export * from "./product-types"
 export * from "./product-variants"
 export * from "./products"

packages/admin/dashboard/src/hooks/api/product-options.tsx

@@ -0,0 +1,151 @@
+import { FetchError } from "@medusajs/js-sdk"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { HttpTypes } from "@medusajs/types"
+import { queryClient } from "../../lib/query-client.ts"
+
+const PRODUCT_OPTIONS_QUERY_KEY = "product_options" as const
+export const productOptionsQueryKeys = queryKeysFactory(
+  PRODUCT_OPTIONS_QUERY_KEY
+)
+
+export const useProductOption = (
+  id: string,
+  query?: HttpTypes.AdminProductOptionParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: productOptionsQueryKeys.detail(id, query),
+    queryFn: () => sdk.admin.productOption.retrieve(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useProductOptions = (
+  query?: HttpTypes.AdminProductOptionListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminProductOptionListResponse,
+      FetchError,
+      HttpTypes.AdminProductOptionListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.productOption.list(query),
+    queryKey: productOptionsQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCreateProductOption = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminCreateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionResponse,
+    FetchError,
+    HttpTypes.AdminUpdateProductOption
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productOption.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOption = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductOptionLazy = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductOptionDeleteResponse,
+    FetchError,
+    string
+  >
+) => {
+  return useMutation({
+    mutationFn: (id: string) => sdk.admin.productOption.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productOptionsQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}