feat(dashboard,js-sdk,types,admin-shared): Add Product Types domain (m…

…edusajs#7732)

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

@@ -55,6 +55,13 @@ const PRODUCT_CATEGORY_INJECTION_ZONES = [
   "product_category.list.after",
 ] as const
 
+const PRODUCT_TYPE_INJECTION_ZONES = [
+  "product_type.details.before",
+  "product_type.details.after",
+  "product_type.list.before",
+  "product_type.list.after",
+] as const
+
 const PRICE_LIST_INJECTION_ZONES = [
   "price_list.details.before",
   "price_list.details.after",
@@ -198,4 +205,5 @@ export const INJECTION_ZONES = [
   ...WORKFLOW_INJECTION_ZONES,
   ...CAMPAIGN_INJECTION_ZONES,
   ...TAX_INJECTION_ZONES,
+  ...PRODUCT_TYPE_INJECTION_ZONES,
 ] as const

packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -49,6 +49,10 @@ const useSettingRoutes = (): NavItemProps[] => {
         label: t("salesChannels.domain"),
         to: "/settings/sales-channels",
       },
+      {
+        label: t("productTypes.domain"),
+        to: "/settings/product-types",
+      },
       {
         label: t("shippingProfile.domain"),
         to: "/settings/shipping-profiles",

packages/admin-next/dashboard/src/hooks/api/product-types.tsx

@@ -1,26 +1,34 @@
-import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
-import { client } from "../../lib/client"
-import { queryKeysFactory } from "../../lib/query-key-factory"
+import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
+import {
+  QueryKey,
+  UseMutationOptions,
+  UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryClient } from "../../lib/query-client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
 
 const PRODUCT_TYPES_QUERY_KEY = "product_types" as const
-const productTypesQueryKeys = queryKeysFactory(PRODUCT_TYPES_QUERY_KEY)
+export const productTypesQueryKeys = queryKeysFactory(PRODUCT_TYPES_QUERY_KEY)
 
 export const useProductType = (
   id: string,
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminProductTypeParams,
   options?: Omit<
     UseQueryOptions<
-      { product_type: HttpTypes.AdminProductType },
-      Error,
-      { product_type: HttpTypes.AdminProductType },
+      HttpTypes.AdminProductTypeResponse,
+      FetchError,
+      HttpTypes.AdminProductTypeResponse,
       QueryKey
     >,
     "queryKey" | "queryFn"
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryFn: () => client.productTypes.retrieve(id, query),
+    queryFn: () => sdk.admin.productType.retrieve(id, query),
     queryKey: productTypesQueryKeys.detail(id),
     ...options,
   })
@@ -29,22 +37,84 @@ export const useProductType = (
 }
 
 export const useProductTypes = (
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminProductTypeListParams,
   options?: Omit<
     UseQueryOptions<
-      { product_types: HttpTypes.AdminProductType[] },
-      Error,
-      { product_types: HttpTypes.AdminProductType[] },
+      HttpTypes.AdminProductTypeListResponse,
+      FetchError,
+      HttpTypes.AdminProductTypeListResponse,
       QueryKey
     >,
     "queryKey" | "queryFn"
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryFn: () => client.productTypes.list(query),
+    queryFn: () => sdk.admin.productType.list(query),
     queryKey: productTypesQueryKeys.list(query),
     ...options,
   })
 
   return { ...data, ...rest }
 }
+
+export const useCreateProductType = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTypeResponse,
+    FetchError,
+    HttpTypes.AdminCreateProductType
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productType.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: productTypesQueryKeys.lists() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductType = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTypeResponse,
+    FetchError,
+    HttpTypes.AdminUpdateProductType
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.productType.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productTypesQueryKeys.detail(id),
+      })
+      queryClient.invalidateQueries({ queryKey: productTypesQueryKeys.lists() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductType = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTypeDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.productType.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productTypesQueryKeys.detail(id),
+      })
+      queryClient.invalidateQueries({ queryKey: productTypesQueryKeys.lists() })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

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

@@ -1,3 +1,4 @@
+import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
   QueryKey,
@@ -223,11 +224,11 @@ export const useProduct = (
 }
 
 export const useProducts = (
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminProductListParams,
   options?: Omit<
     UseQueryOptions<
       HttpTypes.AdminProductListResponse,
-      Error,
+      FetchError,
       HttpTypes.AdminProductListResponse,
       QueryKey
     >,

packages/admin-next/dashboard/src/hooks/table/filters/use-date-table-filters.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useDateTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  return dateFilters
+}

packages/admin-next/dashboard/src/hooks/table/filters/use-product-table-filters.tsx

@@ -7,17 +7,25 @@ const excludeableFields = [
   "sales_channel_id",
   "collections",
   "categories",
+  "product_types",
 ] as const
 
 export const useProductTableFilters = (
   exclude?: (typeof excludeableFields)[number][]
 ) => {
   const { t } = useTranslation()
 
-  const { product_types } = useProductTypes({
-    limit: 1000,
-    offset: 0,
-  })
+  const isProductTypeExcluded = exclude?.includes("product_types")
+
+  const { product_types } = useProductTypes(
+    {
+      limit: 1000,
+      offset: 0,
+    },
+    {
+      enabled: !isProductTypeExcluded,
+    }
+  )
 
   // const { product_tags } = useAdminProductTags({
   //   limit: 1000,
@@ -61,7 +69,7 @@ export const useProductTableFilters = (
 
   let filters: Filter[] = []
 
-  if (product_types) {
+  if (product_types && !isProductTypeExcluded) {
     const typeFilter: Filter = {
       key: "type_id",
       label: t("fields.type"),

packages/admin-next/dashboard/src/hooks/table/query/use-product-table-query.tsx

@@ -44,7 +44,7 @@ export const useProductTableQuery = ({
     q,
   } = queryObject
 
-  const searchParams: HttpTypes.AdminProductParams = {
+  const searchParams: HttpTypes.AdminProductListParams = {
     limit: pageSize,
     offset: offset ? Number(offset) : 0,
     sales_channel_id: sales_channel_id?.split(","),

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -1647,6 +1647,25 @@
       }
     }
   },
+  "productTypes": {
+    "domain": "Product Types",
+    "create": {
+      "header": "Create Product Type",
+      "hint": "Create a new product type to categorize your products.",
+      "successToast": "Product type {{value}} was successfully created."
+    },
+    "edit": {
+      "header": "Edit Product Type",
+      "successToast": "Product type {{value}} was successfully updated."
+    },
+    "delete": {
+      "confirmation": "You are about to delete the product type {{value}}. This action cannot be undone.",
+      "successToast": "Product type {{value}} was successfully deleted."
+    },
+    "fields": {
+      "value": "Value"
+    }
+  },
   "errors": {
     "serverError": "Server error - Try again later.",
     "invalidCredentials": "Wrong email or password"
@@ -1758,8 +1777,8 @@
     "sent": "Sent",
     "salesChannels": "Sales Channels",
     "product": "Product",
-    "createdAt": "Created at",
-    "updatedAt": "Updated at",
+    "createdAt": "Created",
+    "updatedAt": "Updated",
     "revokedAt": "Revoked at",
     "true": "True",
     "false": "False",

packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx

@@ -848,6 +848,43 @@ export const RouteMap: RouteObject[] = [
               },
             ],
           },
+          {
+            path: "product-types",
+            element: <Outlet />,
+            handle: {
+              crumb: () => "Product Types",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () =>
+                  import("../../routes/product-types/product-type-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../routes/product-types/product-type-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import("../../routes/product-types/product-type-detail"),
+                handle: {
+                  crumb: (data: HttpTypes.AdminProductTypeResponse) =>
+                    data.product_type.value,
+                },
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import("../../routes/product-types/product-type-edit"),
+                  },
+                ],
+              },
+            ],
+          },
           {
             path: "shipping-profiles",
             element: <Outlet />,

packages/admin-next/dashboard/src/routes/product-types/common/hooks/use-delete-product-type-action.tsx

@@ -0,0 +1,42 @@
+import { toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useDeleteProductType } from "../../../../hooks/api/product-types"
+
+export const useDeleteProductTypeAction = (id: string) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteProductType(id)
+
+  const handleDelete = async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("productTypes.delete.confirmation"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        toast.success(t("general.success"), {
+          description: t("productTypes.delete.successToast"),
+          dismissLabel: t("actions.close"),
+          dismissable: true,
+        })
+      },
+      onError: (e) => {
+        toast.error(t("general.error"), {
+          description: e.message,
+          dismissLabel: t("actions.close"),
+          dismissable: true,
+        })
+      },
+    })
+  }
+
+  return handleDelete
+}