refactor(onboarding-invite) - move business logic internally (#794)

* refactor(onboarding-invite) - move business logic internally

* add tests

Author: gabrielseco

example/src/ReviewContractorOnboardingStep.tsx

@@ -156,7 +156,6 @@ export const ReviewContractorOnboardingStep = ({
         </BackButton>
         <OnboardingInvite
           className='submit-button'
-          disabled={!onboardingBag.canInvite}
           render={() => {
             return 'Invite Contractor';
           }}

src/flows/ContractorOnboarding/components/OnboardingInvite.tsx

@@ -52,11 +52,13 @@ export function OnboardingInvite({
         const data = await employmentInviteMutationAsync({
           employment_id: contractorOnboardingBag.employmentId,
         });
-        await onSuccess?.({
-          data: data as SuccessResponse,
-          employmentStatus: 'invited',
-        });
-        contractorOnboardingBag.refetchEmployment();
+        if (data) {
+          await onSuccess?.({
+            data: data as SuccessResponse,
+            employmentStatus: 'invited',
+          });
+          contractorOnboardingBag.refetchEmployment();
+        }
       }
     } catch (error: unknown) {
       if (isStructuredError(error)) {
@@ -76,10 +78,16 @@ export function OnboardingInvite({
     throw new Error(`Button component not found`);
   }
 
+  const disabled = Boolean(
+    employmentInviteMutation.isPending ||
+      !contractorOnboardingBag.canInvite ||
+      props.disabled,
+  );
+
   return (
     <CustomButton
       {...props}
-      disabled={employmentInviteMutation.isPending || props.disabled}
+      disabled={disabled}
       onClick={(evt) => {
         handleSubmit();
         props.onClick?.(evt);

src/flows/ContractorOnboarding/tests/OnboardingInvite.test.tsx

@@ -178,29 +178,39 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
   });
 
   it('should refetch employment after inviting the contractor', async () => {
-    const refetchEmploymentMock = vi.fn();
-    mockRender.mockImplementation(({ contractorOnboardingBag, components }) => {
-      contractorOnboardingBag.refetchEmployment = refetchEmploymentMock;
-      const { OnboardingInvite } = components;
-      return (
-        <OnboardingInvite
-          data-testid='onboarding-invite'
-          onSuccess={mockSuccess}
-          onError={mockError}
-          onSubmit={mockSubmit}
-          render={() => 'Invite Contractor'}
-        />
-      );
-    });
+    const getEmploymentSpy = vi.fn();
 
+    server.use(
+      http.get('*/v1/employments/:id', ({ request }) => {
+        getEmploymentSpy(request.url);
+        return HttpResponse.json(mockContractorEmploymentResponse);
+      }),
+    );
     render(<ContractorOnboardingFlow {...defaultProps} />, {
       wrapper: TestProviders,
     });
-    const button = await screen.findByTestId('onboarding-invite');
+
+    // CRITICAL: Wait for initial load to complete
+    await waitForElementToBeRemoved(() => screen.getByTestId('spinner'));
+
+    // Verify initial employment fetch happened
+    expect(getEmploymentSpy).toHaveBeenCalledTimes(1);
+
+    // Find and click the button
+    const button = screen.getByText(/Invite Contractor/i);
     fireEvent.click(button);
+    // Wait for the invite to complete and verify refetch happened
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalled();
+    });
 
     await waitFor(() => {
-      expect(refetchEmploymentMock).toHaveBeenCalled();
+      expect(mockSuccess).toHaveBeenCalled();
+    });
+
+    // Verify employment was fetched again (refetch happened)
+    await waitFor(() => {
+      expect(getEmploymentSpy).toHaveBeenCalledTimes(2);
     });
   });
 
@@ -273,6 +283,86 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
       expect(button).toBeInTheDocument();
       expect(button).toHaveTextContent('Default Button');
     });
+
+    it('should disable button when employment status is "invited"', async () => {
+      server.use(
+        http.get('*/v1/employments/*', () => {
+          return HttpResponse.json({
+            ...mockContractorEmploymentResponse,
+            data: {
+              ...mockContractorEmploymentResponse.data,
+              employment: {
+                ...mockContractorEmploymentResponse.data.employment,
+                status: 'invited',
+              },
+            },
+          });
+        }),
+      );
+
+      mockRender.mockImplementation(({ components }) => {
+        const { OnboardingInvite } = components;
+        return (
+          <OnboardingInvite
+            data-testid='onboarding-invite'
+            onSuccess={mockSuccess}
+            onError={mockError}
+            onSubmit={mockSubmit}
+            render={() => 'Invite Contractor'}
+          />
+        );
+      });
+
+      render(<ContractorOnboardingFlow {...defaultProps} />, {
+        wrapper: TestProviders,
+      });
+
+      const button = await screen.findByTestId('onboarding-invite');
+
+      await waitFor(() => {
+        expect(button).toBeDisabled();
+      });
+    });
+
+    it('should disable button when employment status is "created_awaiting_reserve"', async () => {
+      server.use(
+        http.get('*/v1/employments/*', () => {
+          return HttpResponse.json({
+            ...mockContractorEmploymentResponse,
+            data: {
+              ...mockContractorEmploymentResponse.data,
+              employment: {
+                ...mockContractorEmploymentResponse.data.employment,
+                status: 'created_awaiting_reserve',
+              },
+            },
+          });
+        }),
+      );
+
+      mockRender.mockImplementation(({ components }) => {
+        const { OnboardingInvite } = components;
+        return (
+          <OnboardingInvite
+            data-testid='onboarding-invite'
+            onSuccess={mockSuccess}
+            onError={mockError}
+            onSubmit={mockSubmit}
+            render={() => 'Invite Contractor'}
+          />
+        );
+      });
+
+      render(<ContractorOnboardingFlow {...defaultProps} />, {
+        wrapper: TestProviders,
+      });
+
+      const button = await screen.findByTestId('onboarding-invite');
+
+      await waitFor(() => {
+        expect(button).toBeDisabled();
+      });
+    });
   });
 
   describe('render prop functionality', () => {
@@ -352,16 +442,17 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
       expect(customButton).toBeInTheDocument();
       expect(customButton).toHaveTextContent('Custom Button Label');
 
-      // Verify custom button received correct props
-      expect(MockCustomButton).toHaveBeenCalledWith(
-        expect.objectContaining({
-          className: 'test-class',
-          disabled: false,
-          onClick: expect.any(Function),
-          children: 'Custom Button Label',
-        }),
-        {},
-      );
+      await waitFor(() => {
+        expect(MockCustomButton).toHaveBeenCalledWith(
+          expect.objectContaining({
+            className: 'test-class',
+            disabled: false,
+            onClick: expect.any(Function),
+            children: 'Custom Button Label',
+          }),
+          {},
+        );
+      });
     });
 
     it('should apply disabled state correctly to custom button', async () => {
@@ -418,7 +509,9 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
       });
 
       const customButton = await screen.findByTestId('custom-button');
-      expect(customButton).not.toBeDisabled(); // Initially not disabled
+      await waitFor(() => {
+        expect(customButton).not.toBeDisabled();
+      });
 
       fireEvent.click(customButton);
 
@@ -453,6 +546,15 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
         wrapper: customWrapper,
       });
 
+      await waitFor(() => {
+        expect(MockCustomButton).toHaveBeenCalledWith(
+          expect.objectContaining({
+            disabled: false,
+          }),
+          expect.anything(),
+        );
+      });
+
       const customButton = await screen.findByTestId('custom-button');
       fireEvent.click(customButton);
 
@@ -492,6 +594,15 @@ describe('ContractorOnboarding - OnboardingInvite', () => {
 
       await screen.findByTestId('custom-button');
 
+      await waitFor(() => {
+        expect(MockCustomButton).toHaveBeenCalledWith(
+          expect.objectContaining({
+            disabled: false,
+          }),
+          expect.anything(),
+        );
+      });
+
       expect(MockCustomButton).toHaveBeenCalledWith(
         expect.objectContaining({
           'data-testid': 'custom-button',