feat: customer groups react hooks (#1153)

* fix: msw handlers for medusa-react storybook

* feat: add customer groups query hooks

* feat: add create/update customer groups hooks

* feat: add customer group batch  hooks

* feat: add test files, fix import

* add customer groups fixture

* add customer gorup mock endpoints

* add test cases

* add hook comments

* fix: typos

* fix: comments refactor

* fix: comment

Co-authored-by: fPolic <frane@medusajs.com>

packages/medusa-react/src/hooks/admin/customer-groups/index.ts

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

packages/medusa-react/src/hooks/admin/customer-groups/mutations.ts

@@ -0,0 +1,116 @@
+import {
+  AdminCustomerGroupsRes,
+  AdminDeleteCustomerGroupsGroupCustomerBatchReq,
+  AdminPostCustomerGroupsGroupCustomersBatchReq,
+  AdminPostCustomerGroupsGroupReq,
+  AdminPostCustomerGroupsReq,
+} from "@medusajs/medusa"
+import { useMutation, UseMutationOptions, useQueryClient } from "react-query"
+import { Response } from "@medusajs/medusa-js"
+
+import { useMedusa } from "../../../contexts/medusa"
+import { buildOptions } from "../../utils/buildOptions"
+import { adminCustomerGroupKeys } from "./queries"
+
+/**
+ * Hook returns functions for creating customer groups.
+ *
+ * @param options
+ */
+export const useAdminCreateCustomerGroup = (
+  options?: UseMutationOptions<
+    Response<AdminCustomerGroupsRes>,
+    Error,
+    AdminPostCustomerGroupsReq
+  >
+) => {
+  const { client } = useMedusa()
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    (payload: AdminPostCustomerGroupsReq) =>
+      client.admin.customerGroups.create(payload),
+    buildOptions(queryClient, adminCustomerGroupKeys.lists(), options)
+  )
+}
+
+/**
+ * Hook return functions for updating a customer group.
+ *
+ * @param id - id of the customer group that is being updated
+ * @param options
+ */
+export const useAdminUpdateCustomerGroup = (
+  id: string,
+  options?: UseMutationOptions<
+    Response<AdminCustomerGroupsRes>,
+    Error,
+    AdminPostCustomerGroupsGroupReq
+  >
+) => {
+  const { client } = useMedusa()
+  const queryClient = useQueryClient()
+  return useMutation(
+    (payload: AdminPostCustomerGroupsGroupReq) =>
+      client.admin.customerGroups.update(id, payload),
+    buildOptions(
+      queryClient,
+      [adminCustomerGroupKeys.lists(), adminCustomerGroupKeys.detail(id)],
+      options
+    )
+  )
+}
+
+/**
+ * Hook returns functions for addition of multiple customers to a customer group.
+ *
+ * @param id - id of the customer group in which customers are being added
+ * @param options
+ */
+export const useAdminAddCustomersToCustomerGroup = (
+  id: string,
+  options?: UseMutationOptions<
+    Response<AdminCustomerGroupsRes>,
+    Error,
+    AdminPostCustomerGroupsGroupCustomersBatchReq
+  >
+) => {
+  const { client } = useMedusa()
+  const queryClient = useQueryClient()
+  return useMutation(
+    (payload: AdminPostCustomerGroupsGroupCustomersBatchReq) =>
+      client.admin.customerGroups.addCustomers(id, payload),
+    buildOptions(
+      queryClient,
+      [adminCustomerGroupKeys.lists(), adminCustomerGroupKeys.detail(id)],
+      options
+    )
+  )
+}
+
+/**
+ * Hook returns function for removal of multiple customers from a customer group.
+ *
+ * @param id - id of a group from which customers will be removed
+ * @param options
+ */
+export const useAdminRemoveCustomersFromCustomerGroup = (
+  id: string,
+  options?: UseMutationOptions<
+    Response<AdminCustomerGroupsRes>,
+    Error,
+    AdminDeleteCustomerGroupsGroupCustomerBatchReq
+  >
+) => {
+  const { client } = useMedusa()
+  const queryClient = useQueryClient()
+  return useMutation(
+    (payload: AdminDeleteCustomerGroupsGroupCustomerBatchReq) =>
+      client.admin.customerGroups.removeCustomers(id, payload),
+    buildOptions(
+      queryClient,
+      [adminCustomerGroupKeys.lists(), adminCustomerGroupKeys.detail(id)],
+      options
+    )
+  )
+}

packages/medusa-react/src/hooks/admin/customer-groups/queries.ts

@@ -0,0 +1,65 @@
+import {
+  AdminCustomerGroupsListRes,
+  AdminCustomerGroupsRes,
+  AdminGetCustomerGroupsParams,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+
+import { useMedusa } from "../../../contexts"
+import { UseQueryOptionsWrapper } from "../../../types"
+import { queryKeysFactory } from "../../utils/index"
+
+const ADMIN_CUSTOMER_GROUPS_QUERY_KEY = `admin_customer_groups` as const
+
+export const adminCustomerGroupKeys = queryKeysFactory(
+  ADMIN_CUSTOMER_GROUPS_QUERY_KEY
+)
+
+type CustomerGroupQueryKeys = typeof adminCustomerGroupKeys
+
+/**
+ * Hook retrieves a customer group by id.
+ *
+ * @param id - customer group id
+ * @param options
+ */
+export const useAdminCustomerGroup = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<AdminCustomerGroupsRes>,
+    Error,
+    ReturnType<CustomerGroupQueryKeys["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    adminCustomerGroupKeys.detail(id),
+    () => client.admin.customerGroups.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+/**
+ * Hook retrieves a list of customer gorups.
+ *
+ * @param query - pagination/filtering params
+ * @param options
+ */
+export const useAdminCustomerGroups = (
+  query?: AdminGetCustomerGroupsParams,
+  options?: UseQueryOptionsWrapper<
+    Response<AdminCustomerGroupsListRes>,
+    Error,
+    ReturnType<CustomerGroupQueryKeys["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    adminCustomerGroupKeys.list(query),
+    () => client.admin.customerGroups.list(query),
+    options
+  )
+  return { ...data, ...rest } as const
+}

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

@@ -2,6 +2,7 @@ export * from "./auth"
 export * from "./collections"
 export * from "./claims"
 export * from "./customers"
+export * from "./customer-groups"
 export * from "./discounts"
 export * from "./draft-orders"
 export * from "./gift-cards"