feat: Implement Batching for Payroll Updates (#764)

feat: implement batching for payroll updates to support v2025-06-15 API changes

- Update PayrollConfiguration and PayrollEditEmployee to use useBatchedMutation
- Set batch size to 100 to align with API maximum for employee compensations
- Simplify implementation by passing inline async functions to useBatchedMutation
- Remove unnecessary useCallback wrappers as useBatchedMutation handles refs internally
- Future-proofs components for bulk payroll update operations

Author: jeffredodd

src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx

@@ -12,6 +12,7 @@ import type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/mod
 import { usePreparedPayrollData } from '../usePreparedPayrollData'
 import { payrollSubmitHandler, type ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'
 import { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'
+import { useBatchedMutation } from '@/hooks/useBatchedMutation'
 import type { BaseComponentInterface } from '@/components/Base/Base'
 import { BaseComponent } from '@/components/Base/Base'
 import { componentEvents } from '@/shared/constants'
@@ -112,7 +113,21 @@ export const Root = ({
 
   const { mutateAsync: calculatePayroll } = usePayrollsCalculateMutation()
 
-  const { mutateAsync: updatePayroll, isPending: isUpdatingPayroll } = usePayrollsUpdateMutation()
+  const { mutateAsync: baseUpdatePayroll } = usePayrollsUpdateMutation()
+
+  const { mutateAsync: updatePayroll, isPending: isUpdatingPayroll } = useBatchedMutation(
+    async (batch: PayrollUpdateEmployeeCompensations[]) => {
+      const result = await baseUpdatePayroll({
+        request: {
+          companyId,
+          payrollId,
+          payrollUpdate: { employeeCompensations: batch },
+        },
+      })
+      return result.payrollPrepared!
+    },
+    { batchSize: 100 },
+  )
 
   const {
     preparedPayroll,
@@ -170,19 +185,11 @@ export const Root = ({
     })
     await baseSubmitHandler({}, async () => {
       const transformedCompensation = transformEmployeeCompensation(employeeCompensation)
-      const result = await updatePayroll({
-        request: {
-          companyId,
-          payrollId,
-          payrollUpdate: {
-            employeeCompensations: [
-              { ...transformedCompensation, excluded: !transformedCompensation.excluded },
-            ],
-          },
-        },
-      })
+      const [result] = await updatePayroll([
+        { ...transformedCompensation, excluded: !transformedCompensation.excluded },
+      ])
       onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, {
-        payrollPrepared: result.payrollPrepared,
+        payrollPrepared: result,
       })
       // Refresh preparedPayroll to get updated data
       await handlePreparePayroll()

src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx

@@ -5,6 +5,7 @@ import type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/mod
 import { useMemo } from 'react'
 import { usePreparedPayrollData } from '../usePreparedPayrollData'
 import { PayrollEditEmployeePresentation } from './PayrollEditEmployeePresentation'
+import { useBatchedMutation } from '@/hooks/useBatchedMutation'
 import { componentEvents } from '@/shared/constants'
 import type { BaseComponentInterface } from '@/components/Base/Base'
 import { BaseComponent } from '@/components/Base/Base'
@@ -44,7 +45,21 @@ export const Root = ({
     employeeUuids: memoizedEmployeeId,
   })
 
-  const { mutateAsync: updatePayroll, isPending } = usePayrollsUpdateMutation()
+  const { mutateAsync: baseUpdatePayroll } = usePayrollsUpdateMutation()
+
+  const { mutateAsync: updatePayroll, isPending } = useBatchedMutation(
+    async (batch: PayrollUpdateEmployeeCompensations[]) => {
+      const result = await baseUpdatePayroll({
+        request: {
+          companyId,
+          payrollId,
+          payrollUpdate: { employeeCompensations: batch },
+        },
+      })
+      return result.payrollPrepared!
+    },
+    { batchSize: 100 },
+  )
 
   const employee = employeeData.employee!
   const employeeCompensation = preparedPayroll?.employeeCompensations?.at(0)
@@ -64,18 +79,10 @@ export const Root = ({
   const onSave = async (updatedCompensation: PayrollEmployeeCompensationsType) => {
     const transformedCompensation = transformEmployeeCompensation(updatedCompensation)
     await baseSubmitHandler(null, async () => {
-      const result = await updatePayroll({
-        request: {
-          companyId,
-          payrollId,
-          payrollUpdate: {
-            employeeCompensations: [transformedCompensation],
-          },
-        },
-      })
+      const [result] = await updatePayroll([transformedCompensation])
 
       onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, {
-        payrollPrepared: result.payrollPrepared,
+        payrollPrepared: result,
         employee,
       })
     })