feat: hide direct deposit for employees without account set up

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}
     />
   )
 }

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(
+        <PayrollEditEmployeePresentation {...defaultProps} hasDirectDepositSetup={true} />,
+      )
+
+      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(
+        <PayrollEditEmployeePresentation {...defaultProps} hasDirectDepositSetup={false} />,
+      )
+
+      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(<PayrollEditEmployeePresentation {...propsWithoutDirectDepositFlag} />)
+
+      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(
+        <PayrollEditEmployeePresentation
+          {...defaultProps}
+          hasDirectDepositSetup={false}
+          employeeCompensation={compensationWithCheckPayment}
+        />,
+      )
+
+      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,
+        }),
+      )
+    })
+  })
 })

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 = ({
               </Grid>
             </div>
           )}
-          <div className={styles.fieldGroup}>
-            <Heading as="h4">{t('paymentMethodTitle')}</Heading>
-            <RadioGroupField
-              name="paymentMethod"
-              isRequired
-              label={t('paymentMethodLabel')}
-              description={t('paymentMethodDescription')}
-              options={[
-                {
-                  value: PayrollEmployeeCompensationsTypePaymentMethod.DirectDeposit,
-                  label: t('paymentMethodOptions.directDeposit'),
-                },
-                {
-                  value: PayrollEmployeeCompensationsTypePaymentMethod.Check,
-                  label: t('paymentMethodOptions.check'),
-                },
-              ]}
-            />
-          </div>
+          {hasDirectDepositSetup && (
+            <div className={styles.fieldGroup}>
+              <Heading as="h4">{t('paymentMethodTitle')}</Heading>
+              <RadioGroupField
+                name="paymentMethod"
+                isRequired
+                label={t('paymentMethodLabel')}
+                description={t('paymentMethodDescription')}
+                options={[
+                  {
+                    value: PayrollEmployeeCompensationsTypePaymentMethod.DirectDeposit,
+                    label: t('paymentMethodOptions.directDeposit'),
+                  },
+                  {
+                    value: PayrollEmployeeCompensationsTypePaymentMethod.Check,
+                    label: t('paymentMethodOptions.check'),
+                  },
+                ]}
+              />
+            </div>
+          )}
         </Form>
         {!isSmallOrGreater && actions}
       </FormProvider>