fix(onboarding): disable submit while the job title eligibility check runs

src/flows/Onboarding/api.ts

@@ -59,6 +59,7 @@ import {
   getContractDetailsSchemaVersion,
   getBasicInformationSchemaVersion,
   getBenefitOffersSchemaVersion,
+  withJobTitleEligibilityRiskAcknowledgement,
 } from '@/src/flows/Onboarding/utils';
 // oxlint-disable-next-line no-restricted-imports -- TODO: move onto useHeadlessForm, see docs/USE_HEADLESS_FORM_ROLLOUT.md
 import { createHeadlessForm } from '@/src/common/createHeadlessForm';
@@ -317,7 +318,8 @@ export const useLegacyContractDetailsSchema = ({
       return response;
     },
     enabled: options?.queryOptions?.enabled,
-    select: ({ data }) => data?.data || {},
+    select: ({ data }) =>
+      withJobTitleEligibilityRiskAcknowledgement(data?.data || {}),
   });
 
   const { form } = useHeadlessForm({
@@ -385,7 +387,8 @@ export const useContractDetailsSchema = ({
       return response;
     },
     enabled: options?.queryOptions?.enabled,
-    select: ({ data }) => data?.data,
+    select: ({ data }) =>
+      data?.data && withJobTitleEligibilityRiskAcknowledgement(data.data),
   });
 
   const { form, handleValidation, parseFormValues } = useHeadlessForm({

src/flows/Onboarding/components/OnboardingForm.tsx

@@ -2,6 +2,7 @@ import { JSONSchemaFormFields } from '@/src/components/form/JSONSchemaForm';
 import { Form } from '@/src/components/ui/form';
 import { useEffect } from 'react';
 import { useOnboardingContext } from '@/src/flows/Onboarding/context';
+import { JOB_TITLE_ELIGIBILITY_RESULT_FIELD } from '@/src/flows/Onboarding/utils';
 import { JSFFields } from '@/src/types/remoteFlows';
 import {
   BasicInformationFormPayload,
@@ -48,6 +49,15 @@ export function OnboardingForm({
     // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const syncJobTitleEligibility = async (values: Record<string, unknown>) => {
+    const eligibilityValues =
+      await onboardingBag.checkJobTitleEligibility(values);
+    Object.entries(eligibilityValues ?? {}).forEach(([name, value]) =>
+      form.setValue(name, value),
+    );
+    return eligibilityValues;
+  };
+
   const handleSubmit = async (
     values: Record<string, unknown>,
     event?: React.BaseSyntheticEvent,
@@ -92,7 +102,18 @@ export function OnboardingForm({
       }
     } else {
       // Handle normal form submission
-      await onSubmit(values);
+      const eligibilityValues = await syncJobTitleEligibility(values);
+      const hasVerdictChanged =
+        eligibilityValues &&
+        (values[JOB_TITLE_ELIGIBILITY_RESULT_FIELD] ?? null) !==
+          eligibilityValues[JOB_TITLE_ELIGIBILITY_RESULT_FIELD];
+      if (hasVerdictChanged) {
+        const isValidWithNewVerdict = await form.trigger();
+        if (!isValidWithNewVerdict) {
+          return;
+        }
+      }
+      await onSubmit({ ...values, ...eligibilityValues });
     }
   };
 
@@ -102,7 +123,7 @@ export function OnboardingForm({
         id={formId}
         onSubmit={form.handleSubmit(handleSubmit)}
         className='space-y-4 RemoteFlows__OnboardingForm'
-        onBlur={() => onboardingBag.checkJobTitleEligibility(form.getValues())}
+        onBlur={() => syncJobTitleEligibility(form.getValues())}
       >
         <JSONSchemaFormFields
           components={components}

src/flows/Onboarding/components/OnboardingSubmit.tsx

@@ -20,7 +20,11 @@ export function OnboardingSubmit({
     <CustomButton
       {...props}
       form={formId}
-      disabled={props.disabled || onboardingBag.isSubmitting}
+      disabled={
+        props.disabled ||
+        onboardingBag.isSubmitting ||
+        onboardingBag.isCheckingJobTitleEligibility
+      }
     >
       {children}
     </CustomButton>

src/flows/Onboarding/hooks.tsx

@@ -644,9 +644,6 @@ export const useOnboarding = ({
             },
           },
         },
-        employer_acknowledges_risk: {
-          presentation: { hidden: true },
-        },
         ...(isDailyScheduleEnabled
           ? {
               daily_schedule: {
@@ -1417,12 +1414,18 @@ export const useOnboarding = ({
     /**
      * Runs the job title eligibility check with the given contract details values when the
      * 'job_title_eligibility' feature is enabled, the current step is contract_details, and the
-     * role fields are filled. The prebuilt form calls it on blur; call it yourself from a custom
-     * UI to trigger the same check at another point (e.g. on step entry or before submitting).
+     * role fields are filled. The prebuilt form runs it on blur and again right before submitting,
+     * since a submit can happen without a blur (e.g. pressing Enter); a custom UI should do both.
      * @param values - Current form values
      */
     checkJobTitleEligibility: jobTitleEligibility.check,
 
+    /**
+     * True while the job title eligibility request is in flight. The prebuilt submit button is
+     * disabled meanwhile; use it to do the same in a custom UI.
+     */
+    isCheckingJobTitleEligibility: jobTitleEligibility.isFetching,
+
     /**
      * Function to handle form submission
      * @param values - Form values to submit

src/flows/Onboarding/hooks/useJobTitleEligibilityCheck.tsx

@@ -1,5 +1,9 @@
 import { ValidationResult } from '@remoteoss/remote-json-schema-form-kit';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  CancelledError,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import equal from 'fast-deep-equal';
 import { useRef, useState } from 'react';
 import { FieldValues } from 'react-hook-form';
@@ -9,9 +13,16 @@ import { useClient } from '@/src/context';
 import { jobTitleEligibilityCheckOptions } from '@/src/flows/Onboarding/api';
 import {
   getJobTitleEligibilityParams,
+  getJobTitleEligibilityValues,
+  JOB_TITLE_ELIGIBILITY_SLUG_FIELD,
   StepKeys,
 } from '@/src/flows/Onboarding/utils';
-import { JSFFields } from '@/src/types/remoteFlows';
+import { JSFField, JSFFields } from '@/src/types/remoteFlows';
+
+const CLEARED_JOB_TITLE_ELIGIBILITY_VALUES = getJobTitleEligibilityValues({
+  check_id: null,
+  verdict: 'not_assessed',
+});
 
 /**
  * Owns the state and query for the job title eligibility check.
@@ -92,7 +103,15 @@ export const useJobTitleEligibilityCheck = ({
   const jobTitle = submittedJobTitle ?? fallbackJobTitle;
 
   const check = async (values: FieldValues) => {
-    if (!enabled || !employmentId || currentStepName !== 'contract_details') {
+    const hasSlugField = (contractDetailsFields as JSFField[]).some(
+      (field) => field.name === JOB_TITLE_ELIGIBILITY_SLUG_FIELD,
+    );
+    if (
+      !enabled ||
+      !employmentId ||
+      currentStepName !== 'contract_details' ||
+      !hasSlugField
+    ) {
       return;
     }
     const validation = await handleValidation(values);
@@ -106,17 +125,23 @@ export const useJobTitleEligibilityCheck = ({
     if (!equal(paramsRef.current, nextParams)) {
       setParams(nextParams);
     }
-    if (nextParams) {
-      await queryClient
-        .query(getOptions(nextParams))
-        .catch(() =>
-          console.error('Failed to fetch job title eligibility check'),
-        );
+    if (!nextParams) {
+      return CLEARED_JOB_TITLE_ELIGIBILITY_VALUES;
+    }
+    try {
+      const result = await queryClient.query(getOptions(nextParams));
+      return getJobTitleEligibilityValues(result);
+    } catch (error) {
+      if (error instanceof CancelledError) {
+        return;
+      }
+      console.error('Failed to fetch job title eligibility check');
+      return CLEARED_JOB_TITLE_ELIGIBILITY_VALUES;
     }
   };
 
   return {
-    isFetching: query.isFetching,
+    isFetching: currentStepName === 'contract_details' && query.isFetching,
     check,
   };
 };