feat(dashboard,medusa,types): Add Product Tag management (#8349)

Resolves CC-69

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

@@ -1,14 +1,22 @@
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
-import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
+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 TAGS_QUERY_KEY = "tags" as const
-export const tagsQueryKeys = queryKeysFactory(TAGS_QUERY_KEY)
+export const productTagsQueryKeys = queryKeysFactory(TAGS_QUERY_KEY)
 
-export const useTag = (
+export const useProductTag = (
   id: string,
+  query?: HttpTypes.AdminProductTagParams,
   options?: Omit<
     UseQueryOptions<
       HttpTypes.AdminProductTagResponse,
@@ -20,7 +28,7 @@ export const useTag = (
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryKey: tagsQueryKeys.detail(id),
+    queryKey: productTagsQueryKeys.detail(id, query),
     queryFn: async () => sdk.admin.productTag.retrieve(id),
     ...options,
   })
@@ -28,7 +36,7 @@ export const useTag = (
   return { ...data, ...rest }
 }
 
-export const useTags = (
+export const useProductTags = (
   query?: HttpTypes.AdminProductTagListParams,
   options?: Omit<
     UseQueryOptions<
@@ -41,10 +49,80 @@ export const useTags = (
   >
 ) => {
   const { data, ...rest } = useQuery({
-    queryKey: tagsQueryKeys.list(query),
+    queryKey: productTagsQueryKeys.list(query),
     queryFn: async () => sdk.admin.productTag.list(query),
     ...options,
   })
 
   return { ...data, ...rest }
 }
+
+export const useCreateProductTag = (
+  query?: HttpTypes.AdminProductTagParams,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTagResponse,
+    FetchError,
+    HttpTypes.AdminCreateProductTag
+  >
+) => {
+  return useMutation({
+    mutationFn: async (data) => sdk.admin.productTag.create(data, query),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productTagsQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateProductTag = (
+  id: string,
+  query?: HttpTypes.AdminProductTagParams,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTagResponse,
+    FetchError,
+    HttpTypes.AdminUpdateProductTag
+  >
+) => {
+  return useMutation({
+    mutationFn: async (data) => sdk.admin.productTag.update(id, data, query),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productTagsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productTagsQueryKeys.detail(data.product_tag.id, query),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteProductTag = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminProductTagDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: async () => sdk.admin.productTag.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: productTagsQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: productTagsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

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

@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next"
 import { Filter } from "../../../components/table/data-table"
+import { useProductTags } from "../../api"
 import { useProductTypes } from "../../api/product-types"
 import { useSalesChannels } from "../../api/sales-channels"
 
@@ -8,6 +9,7 @@ const excludeableFields = [
   "collections",
   "categories",
   "product_types",
+  "product_tags",
 ] as const
 
 export const useProductTableFilters = (
@@ -27,6 +29,13 @@ export const useProductTableFilters = (
     }
   )
 
+  const isProductTagExcluded = exclude?.includes("product_tags")
+
+  const { product_tags } = useProductTags({
+    limit: 1000,
+    offset: 0,
+  })
+
   // const { product_tags } = useAdminProductTags({
   //   limit: 1000,
   //   offset: 0,
@@ -84,6 +93,21 @@ export const useProductTableFilters = (
     filters = [...filters, typeFilter]
   }
 
+  if (product_tags && !isProductTagExcluded) {
+    const tagFilter: Filter = {
+      key: "tags",
+      label: t("fields.tag"),
+      type: "select",
+      multiple: true,
+      options: product_tags.map((t) => ({
+        label: t.value,
+        value: t.id,
+      })),
+    }
+
+    filters = [...filters, tagFilter]
+  }
+
   // if (product_tags) {
   //   const tagFilter: Filter = {
   //     key: "tags",
@@ -144,21 +168,21 @@ export const useProductTableFilters = (
   //   filters = [...filters, collectionFilter]
   // }
 
-  const giftCardFilter: Filter = {
-    key: "is_giftcard",
-    label: t("fields.giftCard"),
-    type: "select",
-    options: [
-      {
-        label: t("fields.true"),
-        value: "true",
-      },
-      {
-        label: t("fields.false"),
-        value: "false",
-      },
-    ],
-  }
+  // const giftCardFilter: Filter = {
+  //   key: "is_giftcard",
+  //   label: t("fields.giftCard"),
+  //   type: "select",
+  //   options: [
+  //     {
+  //       label: t("fields.true"),
+  //       value: "true",
+  //     },
+  //     {
+  //       label: t("fields.false"),
+  //       value: "false",
+  //     },
+  //   ],
+  // }
 
   const statusFilter: Filter = {
     key: "status",
@@ -194,7 +218,7 @@ export const useProductTableFilters = (
     type: "date",
   }))
 
-  filters = [...filters, statusFilter, giftCardFilter, ...dateFilters]
+  filters = [...filters, statusFilter, ...dateFilters]
 
   return filters
 }