feat: customer bulk endpoint form managing customer groups (#9761)

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin/dashboard/src/hooks/api/customers.tsx

@@ -10,6 +10,7 @@ import {
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
+import { customerGroupsQueryKeys } from "./customer-groups"
 
 const CUSTOMERS_QUERY_KEY = "customers" as const
 export const customersQueryKeys = queryKeysFactory(CUSTOMERS_QUERY_KEY)
@@ -115,3 +116,35 @@ export const useDeleteCustomer = (
     ...options,
   })
 }
+
+export const useBatchCustomerCustomerGroups = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminCustomerResponse,
+    FetchError,
+    HttpTypes.AdminBatchLink
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) =>
+      sdk.admin.customer.batchCustomerGroups(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: customerGroupsQueryKeys.details(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: customerGroupsQueryKeys.lists(),
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: customersQueryKeys.lists(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: customersQueryKeys.details(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

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

@@ -829,6 +829,12 @@
         "list": {
           "noRecordsMessage": "Please create a customer group first."
         }
+      },
+      "removed": {
+        "success": "Customer removed from: {{groups}}.",
+        "list": {
+          "noRecordsMessage": "Please create a customer group first."
+        }
       }
     },
     "edit": {

packages/admin/dashboard/src/routes/customers/customer-detail/components/customer-group-section/customer-group-section.tsx

@@ -28,6 +28,7 @@ import { useCustomerGroupTableQuery } from "../../../../../hooks/table/query/use
 import { useDataTable } from "../../../../../hooks/use-data-table.tsx"
 import { sdk } from "../../../../../lib/client/index.ts"
 import { queryClient } from "../../../../../lib/query-client.ts"
+import { useBatchCustomerCustomerGroups } from "../../../../../hooks/api"
 
 type CustomerGroupSectionProps = {
   customer: HttpTypes.AdminCustomer
@@ -57,6 +58,9 @@ export const CustomerGroupSection = ({
       }
     )
 
+  const { mutateAsync: batchCustomerCustomerGroups } =
+    useBatchCustomerCustomerGroups(customer.id)
+
   const filters = useCustomerGroupTableFilters()
   const columns = useColumns(customer.id)
 
@@ -94,20 +98,15 @@ export const CustomerGroupSection = ({
     }
 
     try {
-      /**
-       * TODO: use this for now until add customer groups to customers batch is implemented
-       */
-      const promises = customerGroupIds.map((id) =>
-        sdk.admin.customerGroup.batchCustomers(id, {
-          remove: [customer.id],
+      await batchCustomerCustomerGroups({ remove: customerGroupIds })
+
+      toast.success(
+        t("customers.groups.removed.success", {
+          groups: customer_groups!
+            .filter((cg) => customerGroupIds.includes(cg.id))
+            .map((cg) => cg?.name),
         })
       )
-
-      await Promise.all(promises)
-
-      await queryClient.invalidateQueries({
-        queryKey: customerGroupsQueryKeys.lists(),
-      })
     } catch (e) {
       toast.error(e.message)
     }

packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx

@@ -17,16 +17,12 @@ import {
 } from "../../../../../components/modals"
 import { DataTable } from "../../../../../components/table/data-table"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import {
-  customerGroupsQueryKeys,
-  useCustomerGroups,
-} from "../../../../../hooks/api/customer-groups"
+import { useCustomerGroups } from "../../../../../hooks/api/customer-groups"
 import { useCustomerGroupTableColumns } from "../../../../../hooks/table/columns/use-customer-group-table-columns"
 import { useCustomerGroupTableFilters } from "../../../../../hooks/table/filters/use-customer-group-table-filters"
 import { useCustomerGroupTableQuery } from "../../../../../hooks/table/query/use-customer-group-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
-import { sdk } from "../../../../../lib/client"
-import { queryClient } from "../../../../../lib/query-client"
+import { useBatchCustomerCustomerGroups } from "../../../../../hooks/api"
 
 type AddCustomerGroupsFormProps = {
   customerId: string
@@ -45,6 +41,9 @@ export const AddCustomerGroupsForm = ({
   const { handleSuccess } = useRouteModal()
   const [isPending, setIsPending] = useState(false)
 
+  const { mutateAsync: batchCustomerCustomerGroups } =
+    useBatchCustomerCustomerGroups(customerId)
+
   const form = useForm<zod.infer<typeof AddCustomerGroupsSchema>>({
     defaultValues: {
       customer_group_ids: [],
@@ -117,16 +116,7 @@ export const AddCustomerGroupsForm = ({
   const handleSubmit = form.handleSubmit(async (data) => {
     setIsPending(true)
     try {
-      /**
-       * TODO: use this for now until add customer groups to customers batch is implemented
-       */
-      const promises = data.customer_group_ids.map((id) =>
-        sdk.admin.customerGroup.batchCustomers(id, {
-          add: [customerId],
-        })
-      )
-
-      await Promise.all(promises)
+      await batchCustomerCustomerGroups({ add: data.customer_group_ids })
 
       toast.success(
         t("customers.groups.add.success", {
@@ -137,10 +127,6 @@ export const AddCustomerGroupsForm = ({
         })
       )
 
-      await queryClient.invalidateQueries({
-        queryKey: customerGroupsQueryKeys.lists(),
-      })
-
       handleSuccess(`/customers/${customerId}`)
     } catch (e) {
       toast.error(e.message)