feat(medusa, medusa-js, medusa-react): Add endpoint to retrieve product tags from the storefront (#3051)

packages/medusa-react/mocks/handlers/store.ts

@@ -1,5 +1,5 @@
-import { fixtures } from "../data"
 import { rest } from "msw"
+import { fixtures } from "../data"
 
 export const storeHandlers = [
   rest.get("/store/products", (req, res, ctx) => {
@@ -550,4 +550,15 @@ export const storeHandlers = [
       )
     }
   ),
+
+  rest.get("/store/product-tags", (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        product_tags: fixtures.list("product_tag", 10),
+        limit: 5,
+        offset: 0,
+      })
+    )
+  }),
 ]

packages/medusa-react/src/hooks/store/index.ts

@@ -1,16 +1,16 @@
-export * from "./products/"
-export * from "./product-types/"
 export * from "./carts/"
-export * from "./shipping-options/"
-export * from "./regions/"
-export * from "./return-reasons/"
-export * from "./swaps/"
-export * from "./carts/"
-export * from "./orders/"
-export * from "./order-edits"
+export * from "./collections"
 export * from "./customers/"
-export * from "./returns/"
 export * from "./gift-cards/"
 export * from "./line-items/"
-export * from "./collections"
+export * from "./order-edits"
+export * from "./orders/"
 export * from "./payment-collections"
+export * from "./product-tags"
+export * from "./product-types/"
+export * from "./products/"
+export * from "./regions/"
+export * from "./return-reasons/"
+export * from "./returns/"
+export * from "./shipping-options/"
+export * from "./swaps/"

packages/medusa-react/src/hooks/store/product-tags/index.ts

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

packages/medusa-react/src/hooks/store/product-tags/queries.ts

@@ -0,0 +1,32 @@
+import {
+  StoreGetProductTagsParams,
+  StoreProductTagsListRes,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "@tanstack/react-query"
+import { useMedusa } from "../../../contexts"
+import { UseQueryOptionsWrapper } from "../../../types"
+import { queryKeysFactory } from "../../utils"
+
+const PRODUCT_TAGS_QUERY_KEY = `product_tags` as const
+
+export const productTagKeys = queryKeysFactory(PRODUCT_TAGS_QUERY_KEY)
+
+type ProductTypesQueryKeys = typeof productTagKeys
+
+export const useProductTags = (
+  query?: StoreGetProductTagsParams,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreProductTagsListRes>,
+    Error,
+    ReturnType<ProductTypesQueryKeys["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    productTagKeys.list(query),
+    () => client.productTags.list(query),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/test/hooks/store/product-tags/queries.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from "@testing-library/react-hooks"
+import { fixtures } from "../../../../mocks/data/index"
+import { useProductTags } from "../../../../src"
+import { createWrapper } from "../../../utils"
+
+describe("useProductTags hook", () => {
+  test("gets a list of products", async () => {
+    const { result, waitFor } = renderHook(() => useProductTags(), {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => result.current.isSuccess)
+
+    expect(result.current.response.status).toEqual(200)
+    expect(result.current.product_tags).toEqual(
+      fixtures.list("product_tag", 10)
+    )
+  })
+})