diff --git a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx index 9a8d8288..add5ce6d 100644 --- a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx +++ b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx @@ -1,4 +1,5 @@ import { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet' +import { useEmployeePaymentMethodsGetBankAccountsSuspense } from '@gusto/embedded-api/react-query/employeePaymentMethodsGetBankAccounts' import { usePayrollsUpdateMutation } from '@gusto/embedded-api/react-query/payrollsUpdate' import type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype' import type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/models/components/payrollupdate' @@ -39,6 +40,9 @@ export const Root = ({ const { LoadingIndicator, baseSubmitHandler } = useBase() const { data: employeeData } = useEmployeesGetSuspense({ employeeId }) + const { data: bankAccountsList } = useEmployeePaymentMethodsGetBankAccountsSuspense({ + employeeId, + }) const memoizedEmployeeId = useMemo(() => [employeeId], []) const { preparedPayroll, paySchedule, isLoading } = usePreparedPayrollData({ companyId, @@ -50,6 +54,8 @@ export const Root = ({ const employee = employeeData.employee! const employeeCompensation = preparedPayroll?.employeeCompensations?.at(0) + const bankAccounts = bankAccountsList.employeeBankAccountList || [] + const hasDirectDepositSetup = bankAccounts.length > 0 const transformEmployeeCompensation = ({ paymentMethod, @@ -103,6 +109,7 @@ export const Root = ({ paySchedule={paySchedule} isOffCycle={preparedPayroll?.offCycle} withReimbursements={withReimbursements} + hasDirectDepositSetup={hasDirectDepositSetup} /> ) } diff --git a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.test.tsx b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.test.tsx index aa998d39..964bda6b 100644 --- a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.test.tsx +++ b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.test.tsx @@ -1037,4 +1037,68 @@ describe('PayrollEditEmployeePresentation', () => { }) }) }) + + describe('Payment Method Visibility Based on Direct Deposit Setup', () => { + it('shows payment method control when employee has direct deposit set up', () => { + renderWithProviders( + , + ) + + expect(screen.getByText('Payment method')).toBeInTheDocument() + expect(screen.getByLabelText('Direct deposit')).toBeInTheDocument() + expect(screen.getByLabelText('Check')).toBeInTheDocument() + }) + + it('hides payment method control when employee does not have direct deposit set up', () => { + renderWithProviders( + , + ) + + expect(screen.queryByText('Payment method')).not.toBeInTheDocument() + expect(screen.queryByLabelText('Direct deposit')).not.toBeInTheDocument() + expect(screen.queryByLabelText('Check')).not.toBeInTheDocument() + }) + + it('shows payment method control by default when hasDirectDepositSetup is not provided', () => { + const propsWithoutDirectDepositFlag = { + ...defaultProps, + hasDirectDepositSetup: undefined, + } + + renderWithProviders() + + expect(screen.getByText('Payment method')).toBeInTheDocument() + expect(screen.getByLabelText('Direct deposit')).toBeInTheDocument() + expect(screen.getByLabelText('Check')).toBeInTheDocument() + }) + + it('allows form submission without payment method when employee has no direct deposit', async () => { + const compensationWithCheckPayment = { + ...mockEmployeeCompensation, + paymentMethod: PaymentMethods.Check, + } + + renderWithProviders( + , + ) + + const user = userEvent.setup() + const saveButton = screen.getByRole('button', { name: 'Save' }) + await user.click(saveButton) + + await waitFor(() => { + expect(defaultProps.onSave).toHaveBeenCalled() + }) + + expect(defaultProps.onSave).toHaveBeenCalledWith( + expect.objectContaining({ + paymentMethod: PaymentMethods.Check, + }), + ) + }) + }) }) diff --git a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx index 21d92c71..bde15024 100644 --- a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx +++ b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx @@ -49,6 +49,7 @@ interface PayrollEditEmployeeProps { paySchedule?: PayScheduleObject isOffCycle?: boolean withReimbursements?: boolean + hasDirectDepositSetup?: boolean } export const PayrollEditEmployeeFormSchema = z.object({ @@ -134,6 +135,7 @@ export const PayrollEditEmployeePresentation = ({ paySchedule, isOffCycle = false, withReimbursements = true, + hasDirectDepositSetup = true, }: PayrollEditEmployeeProps) => { const { Button, Heading, Text } = useComponentContext() @@ -475,25 +477,27 @@ export const PayrollEditEmployeePresentation = ({ )} -
- {t('paymentMethodTitle')} - -
+ {hasDirectDepositSetup && ( +
+ {t('paymentMethodTitle')} + +
+ )} {!isSmallOrGreater && actions}