feat(contractor-management) - add eligibility questionnaire to the review step

example/src/ReviewContractorOnboardingStep.tsx

@@ -1,5 +1,6 @@
 import {
   ContractorOnboardingRenderProps,
+  corProductIdentifier,
   NormalizedFieldError,
   useMagicLink,
 } from '@remoteoss/remote-flows';
@@ -80,6 +81,29 @@ export const ReviewContractorOnboardingStep = ({
       >
         Edit Basic Information
       </button>
+      <h2 className='title'>Pricing plan</h2>
+      <ReviewMeta meta={onboardingBag.meta.fields.pricing_plan} />
+      <button
+        className='back-button'
+        onClick={() => onboardingBag.goTo('pricing_plan')}
+      >
+        Edit Pricing Plan
+      </button>
+      {onboardingBag.stepState.values?.pricing_plan?.subscription ===
+        corProductIdentifier && (
+        <>
+          <h2 className='title'>Eligibility Questionnaire</h2>
+          <ReviewMeta
+            meta={onboardingBag.meta.fields.eligibility_questionnaire}
+          />
+          <button
+            className='back-button'
+            onClick={() => onboardingBag.goTo('eligibility_questionnaire')}
+          >
+            Edit Eligibility Questionnaire
+          </button>
+        </>
+      )}
       <h2 className='title'>Contract Details</h2>
       <ReviewMeta meta={onboardingBag.meta.fields.contract_details} />
       <button
@@ -97,22 +121,15 @@ export const ReviewContractorOnboardingStep = ({
       >
         Edit Contract Preview
       </button>
-      <h2 className='title'>Pricing plan</h2>
-      <ReviewMeta meta={onboardingBag.meta.fields.pricing_plan} />
 
-      <button
-        className='back-button'
-        onClick={() => onboardingBag.goTo('pricing_plan')}
-      >
-        Edit Contract Preview
-      </button>
-
-      {invitedStatus === 'not_invited' && (
-        <InviteSection
-          title={`Ready to invite ${onboardingBag.employment?.basic_information?.name as string} to Remote?`}
-          description="If you're ready to invite this employee to onboard with Remote, click the button below."
-        />
-      )}
+      {invitedStatus === 'not_invited' &&
+        typeof onboardingBag.employment?.basic_information?.name ===
+          'string' && (
+          <InviteSection
+            title={`Ready to invite ${onboardingBag.employment?.basic_information?.name as string} to Remote?`}
+            description="If you're ready to invite this employee to onboard with Remote, click the button below."
+          />
+        )}
 
       {invitedStatus === 'invited' && (
         <div className='invite-successful'>

src/client/sdk.gen.ts

@@ -2569,8 +2569,9 @@ export const postCancelEmployeeTimeoff = <ThrowOnError extends boolean = false>(
  *
  * ```
  *
- * This endpoint requires a company access token, as forms are dependent on certain
- * properties of companies and their current employments.
+ * Most forms require a company access token, as they are dependent on certain
+ * properties of companies and their current employments. However, the `address_details`
+ * form can be accessed using client_credentials authentication (without a company).
  *
  *
  */
@@ -2585,6 +2586,7 @@ export const getShowFormCountry = <ThrowOnError extends boolean = false>(
     security: [
       { scheme: 'bearer', type: 'http' },
       { scheme: 'bearer', type: 'http' },
+      { scheme: 'bearer', type: 'http' },
     ],
     url: '/v1/countries/{country_code}/{form}',
     ...options,

src/client/types.gen.ts

@@ -3820,6 +3820,7 @@ export type MinimalEmployment = {
   work_address_details: {
     [key: string]: unknown;
   };
+  work_email: string | null;
 };
 
 /**
@@ -8914,6 +8915,10 @@ export type GetShowContractorContractDetailsCountryData = {
     country_code: string;
   };
   query?: {
+    /**
+     * Employment ID
+     */
+    employment_id?: string;
     /**
      * Version of the form schema
      */

src/common/api/fixtures/contractors-subscriptions.ts

@@ -57,7 +57,6 @@ export const mockContractorSubscriptionResponse = {
   ],
 };
 
-export const mockManageSubscriptionResponse = mockBaseResponse;
 export const mockContractorSubscriptionWithEligibilityResponse = {
   data: [
     {
@@ -123,3 +122,5 @@ export const mockContractorSubscriptionWithEligibilityResponse = {
     },
   ],
 };
+
+export const mockManageSubscriptionResponse = mockBaseResponse;

src/flows/ContractorOnboarding/api.ts

@@ -231,24 +231,31 @@ export const useCreateContractorContractDocument = () => {
  */
 export const useContractorOnboardingDetailsSchema = ({
   countryCode,
+  employmentId,
   fieldValues,
   options,
 }: {
   countryCode: string;
   fieldValues: FieldValues;
+  employmentId: string;
   options?: FlowOptions & { queryOptions?: { enabled?: boolean } };
   query?: Record<string, unknown>;
 }): UseQueryResult<JSONSchemaFormResultWithFieldsets> => {
   const { client } = useClient();
   return useQuery({
-    queryKey: ['contractor-onboarding-details-schema', countryCode],
+    queryKey: [
+      'contractor-onboarding-details-schema',
+      countryCode,
+      employmentId,
+    ],
     retry: false,
     queryFn: async () => {
       return getShowContractorContractDetailsCountry({
         client: client as Client,
         path: { country_code: countryCode },
         query: {
           json_schema_version: 1,
+          employment_id: employmentId,
         },
       });
     },

src/flows/ContractorOnboarding/hooks.tsx

@@ -32,6 +32,8 @@ import { ContractorOnboardingFlowProps } from '@/src/flows/ContractorOnboarding/
 import {
   buildSteps,
   calculateProvisionalStartDateDescription,
+  reviewStepAllowedEmploymentStatus,
+  disabledInviteButtonEmploymentStatus,
   StepKeys,
 } from '@/src/flows/ContractorOnboarding/utils';
 import {
@@ -40,10 +42,6 @@ import {
   useJSONSchemaForm,
   useUpdateEmployment,
 } from '@/src/flows/Onboarding/api';
-import {
-  disabledInviteButtonEmploymentStatus,
-  reviewStepAllowedEmploymentStatus,
-} from '@/src/flows/Onboarding/utils';
 import { FlowOptions, JSFModify, JSONSchemaFormType } from '@/src/flows/types';
 import { useStepState } from '@/src/flows/useStepState';
 import { mutationToPromise } from '@/src/lib/mutations';
@@ -445,24 +443,41 @@ export const useContractorOnboarding = ({
     fieldValues,
   ]);
 
-  const { data: eligibilityQuestionnaireForm } = useGetEligibilityQuestionnaire(
-    {
-      options: {
-        queryOptions: {
-          enabled: selectedPricingPlan === corProductIdentifier,
-        },
-        jsfModify: options?.jsfModify?.eligibility_questionnaire,
+  const isEligibilityQuestionnaireEnabled = useMemo(() => {
+    return (
+      (selectedPricingPlan === corProductIdentifier &&
+        stepState.currentStep.name === 'eligibility_questionnaire') ||
+      (Boolean(employmentId) &&
+        isEmploymentReadOnly &&
+        selectedPricingPlan === corProductIdentifier)
+    );
+  }, [
+    selectedPricingPlan,
+    stepState.currentStep.name,
+    employmentId,
+    isEmploymentReadOnly,
+  ]);
+
+  const {
+    data: eligibilityQuestionnaireForm,
+    isLoading: isLoadingEligibilityQuestionnaire,
+  } = useGetEligibilityQuestionnaire({
+    options: {
+      queryOptions: {
+        enabled: isEligibilityQuestionnaireEnabled,
       },
-      fieldValues: eligibilityFields,
+      jsfModify: options?.jsfModify?.eligibility_questionnaire,
     },
-  );
+    fieldValues: eligibilityFields,
+  });
 
   const {
     data: contractorOnboardingDetailsForm,
     isLoading: isLoadingContractorOnboardingDetailsForm,
   } = useContractorOnboardingDetailsSchema({
     countryCode: internalCountryCode as string,
     fieldValues: fieldValues,
+    employmentId: internalEmploymentId as string,
     options: {
       queryOptions: {
         enabled: isContractorOnboardingDetailsEnabled,
@@ -677,7 +692,8 @@ export const useContractorOnboarding = ({
     isLoadingContractorSubscriptions ||
     isLoadingDocumentPreviewForm ||
     isLoadingIR35File ||
-    isLoadingContractDocuments;
+    isLoadingContractDocuments ||
+    isLoadingEligibilityQuestionnaire;
 
   const isNavigatingToReview = useMemo(() => {
     return Boolean(
@@ -720,7 +736,6 @@ export const useContractorOnboarding = ({
           pricingPlanInitialValues,
           stepFields.pricing_plan,
         ),
-        // TODO: we have to check if this works well or not
         eligibility_questionnaire: prettifyFormValues(
           eligibilityQuestionnaireInitialValues,
           stepFields.eligibility_questionnaire,
@@ -731,11 +746,9 @@ export const useContractorOnboarding = ({
         select_country: selectCountryInitialValues,
         basic_information: basicInformationInitialValues,
         contract_details: contractDetailsInitialValues,
-        // TODO: we need to retrieve the contract preview data somehow from the BE, who signed the document
-        contract_preview: {},
+        contract_preview: contractPreviewInitialValues,
         pricing_plan: pricingPlanInitialValues,
-        // TODO: we need to retrieve information somehow only for COR though
-        eligibility_questionnaire: {},
+        eligibility_questionnaire: eligibilityQuestionnaireInitialValues,
         review: {},
       });
       goToStep('review');

src/flows/ContractorOnboarding/utils.ts

@@ -3,6 +3,7 @@ import {
   contractorStandardProductIdentifier,
   contractorPlusProductIdentifier,
 } from '@/src/flows/ContractorOnboarding/constants';
+import { Employment } from '@/src/flows/Onboarding/types';
 
 export type StepKeys =
   | 'select_country'
@@ -111,3 +112,17 @@ export const isCMOrCMPlus = (subscription: string | undefined): boolean => {
     subscription === contractorPlusProductIdentifier
   );
 };
+
+/**
+ * Array of employment statuses that are allowed to proceed to the review step.
+ * These statuses indicate that the employment is in a final state and the employment cannot be modified further.
+ * @type {Employment['status'][]}
+ * @constant
+ */
+export const reviewStepAllowedEmploymentStatus: Employment['status'][] = [
+  'invited',
+];
+
+export const disabledInviteButtonEmploymentStatus: Employment['status'][] = [
+  'invited',
+];