feat(contractor-management) - add validations (#691)

* refactor(contractor-onboarding): reorder steps to prioritize pricing plan before contract details

* feat(contractor-onboarding): add validation for pricing plan subscription step

* feat(contractor-onboarding): initialize pricing plan form with prettified values

* fix review tab

* add comment

* feat(contractor-onboarding): add meta and description fields to subscription options

* components

* feat(contractor-onboarding): add pricing plan card component with selection UI

* revert steps

* refactor(card): improve semantic HTML and add polymorphic component support

* fix order

* remove code

* fix tests

* test(contractor-onboarding): reorder steps to place pricing plan before contract details

* refactor(contractor-onboarding): extract product identifiers to constants and add pricing plan-based logic

* feat(contractor-onboarding): add backdate warning for non-standard pricing plans

* feat(form): support statement and extra fields in form components

* refactor(contractor-onboarding): move pricing plan default to hook and sort subscription options

* revert file

* revert tests

* remove export

* fix(contractor-onboarding) - fix selected product plan

* test(contractor-onboarding): add test for pre-selecting Contractor Management Plus

* improve code

* format

Author: gabrielseco

example/src/ContractorOnboarding.tsx

@@ -361,12 +361,6 @@ export const ContractorOnboardingWithProps = ({
               render={OnBoardingRender}
               employmentId={employmentId}
               externalId={externalId}
-              initialValues={{
-                pricing_plan: {
-                  subscription:
-                    'urn:remotecom:resource:product:contractor:standard:monthly',
-                },
-              }}
               options={{
                 jsfModify: {
                   contract_details: {

src/components/form/fields/DatePickerField.tsx

@@ -27,7 +27,7 @@ export function DatePickerField({
   let minDateValue: Date;
   if (rest.meta?.mot && typeof rest.meta.mot === 'number') {
     minDateValue = getMinStartDate(rest.meta.mot);
-  } else if (minDate) {
+  } else if (typeof minDate === 'string') {
     minDateValue = new Date(`${minDate}T00:00:00`);
   }
 

src/flows/ContractorOnboarding/hooks.tsx

@@ -46,6 +46,7 @@ import { $TSFixMe, JSFFieldset, Meta } from '@/src/types/remoteFlows';
 import {
   contractorStandardProductIdentifier,
   contractorPlusProductIdentifier,
+  corProductIdentifier,
 } from '@/src/flows/ContractorOnboarding/constants';
 import { ContractPreviewHeader } from '@/src/flows/ContractorOnboarding/components/ContractPreviewHeader';
 import { ContractPreviewStatement } from '@/src/flows/ContractorOnboarding/components/ContractPreviewStatement';
@@ -282,6 +283,22 @@ export const useContractorOnboarding = ({
     fieldValues?.service_duration?.provisional_start_date,
   ]);
 
+  const selectedPricingPlan = useMemo(() => {
+    if (!employment?.contractor_type) {
+      return undefined;
+    }
+    const subscriptions = {
+      standard: contractorStandardProductIdentifier,
+      plus: contractorPlusProductIdentifier,
+      cor: corProductIdentifier,
+    };
+    return (
+      subscriptions[
+        employment?.contractor_type as keyof typeof subscriptions
+      ] || contractorStandardProductIdentifier
+    );
+  }, [employment]);
+
   const {
     data: contractorOnboardingDetailsForm,
     isLoading: isLoadingContractorOnboardingDetailsForm,
@@ -295,6 +312,8 @@ export const useContractorOnboarding = ({
       jsfModify: buildContractDetailsJsfModify(
         options?.jsfModify?.contract_details,
         descriptionProvisionalStartDate,
+        selectedPricingPlan,
+        fieldValues,
       ),
     },
   });
@@ -464,20 +483,16 @@ export const useContractorOnboarding = ({
   }, [stepFields.contract_preview, onboardingInitialValues]);
 
   const pricingPlanInitialValues = useMemo(() => {
+    const preselectedPricingPlan = {
+      subscription: selectedPricingPlan,
+    };
     const initialValues = {
+      ...preselectedPricingPlan,
       ...onboardingInitialValues,
-      ...employmentContractDetails,
     };
 
-    return getInitialValues(
-      stepFields.pricing_plan,
-      (initialValues?.pricing_plan ?? {}) as Record<string, unknown>,
-    );
-  }, [
-    stepFields.pricing_plan,
-    employmentContractDetails,
-    onboardingInitialValues,
-  ]);
+    return getInitialValues(stepFields.pricing_plan, initialValues);
+  }, [stepFields.pricing_plan, onboardingInitialValues, selectedPricingPlan]);
 
   const initialValues = useMemo(() => {
     return {

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

@@ -1375,4 +1375,82 @@ describe('ContractorOnboardingFlow', () => {
       expect(elements.length).toBeGreaterThan(0);
     });
   });
+
+  it('should pre-select Contractor Management Plus when employment has contractor_type plus', async () => {
+    const employmentId = generateUniqueEmploymentId();
+
+    server.use(
+      http.get(`*/v1/employments/${employmentId}`, () => {
+        return HttpResponse.json({
+          ...mockContractorEmploymentResponse,
+          data: {
+            ...mockContractorEmploymentResponse.data,
+            employment: {
+              ...mockContractorEmploymentResponse.data.employment,
+              id: employmentId,
+              contractor_type: 'plus',
+            },
+          },
+        });
+      }),
+    );
+
+    mockRender.mockImplementation(
+      ({
+        contractorOnboardingBag,
+        components,
+      }: ContractorOnboardingRenderProps) => {
+        const currentStepIndex =
+          contractorOnboardingBag.stepState.currentStep.index;
+
+        const steps: Record<number, string> = {
+          [0]: 'Basic Information',
+          [1]: 'Pricing Plan',
+          [2]: 'Contract Details',
+          [3]: 'Contract Preview',
+          [4]: 'Review',
+        };
+
+        return (
+          <>
+            <h1>Step: {steps[currentStepIndex]}</h1>
+            <MultiStepFormWithoutCountry
+              contractorOnboardingBag={contractorOnboardingBag}
+              components={components}
+            />
+          </>
+        );
+      },
+    );
+
+    render(
+      <ContractorOnboardingFlow
+        employmentId={employmentId}
+        skipSteps={['select_country']}
+        {...defaultProps}
+      />,
+      { wrapper: TestProviders },
+    );
+
+    await screen.findByText(/Step: Basic Information/i);
+    await waitForElementToBeRemoved(() => screen.getByTestId('spinner'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Full name/i)).toBeInTheDocument();
+    });
+
+    const nextButton = screen.getByText(/Next Step/i);
+    nextButton.click();
+
+    await screen.findByText(/Step: Pricing Plan/i);
+    await waitForElementToBeRemoved(() => screen.getByTestId('spinner'));
+
+    // Verify that Contractor Management Plus is pre-selected
+    await waitFor(() => {
+      const plusRadio = screen.getByRole('radio', {
+        name: /Contractor Management Plus/i,
+      });
+      expect(plusRadio).toBeChecked();
+    });
+  });
 });

src/flows/ContractorOnboarding/utils.ts

@@ -1,5 +1,8 @@
+import { format } from 'date-fns';
 import { JSFModify } from '@/src/flows/types';
 import { Step } from '@/src/flows/useStepState';
+import { FieldValues } from 'react-hook-form';
+import { createStatementProperty } from '@/src/components/form/jsf-utils/createFields';
 import {
   contractorStandardProductIdentifier,
   contractorPlusProductIdentifier,
@@ -55,6 +58,29 @@ export const calculateProvisionalStartDateDescription = (
   return undefined;
 };
 
+const isStandardPricingPlan = (pricingPlan: string | undefined) => {
+  return pricingPlan === contractorStandardProductIdentifier;
+};
+
+const showBackDateWarning = (
+  isStandardPricingPlanSelected: boolean,
+  provisionalStartDate: string | undefined,
+) => {
+  const isStartDateBackdated =
+    provisionalStartDate &&
+    // Compare full days omitting time of the day
+    provisionalStartDate < format(new Date(), 'yyyy-MM-dd');
+
+  if (!isStandardPricingPlanSelected && isStartDateBackdated) {
+    return createStatementProperty({
+      severity: 'warning',
+      description:
+        'Backdating the service start date is not supported in the selected Contractor Management plan.',
+    });
+  }
+
+  return undefined;
+};
 /**
  * Merges internal jsfModify modifications with user-provided options for contract_details step
  * This abstracts the logic of applying internal field modifications (like dynamic descriptions)
@@ -63,18 +89,32 @@ export const calculateProvisionalStartDateDescription = (
 export const buildContractDetailsJsfModify = (
   userJsfModify: JSFModify | undefined,
   provisionalStartDateDescription: string | undefined,
+  selectedPricingPlan: string | undefined,
+  fieldValues: FieldValues,
 ): JSFModify => {
+  const isStandardPricingPlanSelected =
+    isStandardPricingPlan(selectedPricingPlan);
+  const provisionalStartDate =
+    fieldValues?.service_duration?.provisional_start_date;
+  const statement = showBackDateWarning(
+    isStandardPricingPlanSelected,
+    provisionalStartDate,
+  );
   return {
     ...userJsfModify,
     fields: {
       ...userJsfModify?.fields,
-      ...(provisionalStartDateDescription
-        ? {
-            'service_duration.provisional_start_date': {
-              description: provisionalStartDateDescription,
-            },
-          }
-        : {}),
+      ...{
+        'service_duration.provisional_start_date': {
+          description: provisionalStartDateDescription,
+          'x-jsf-presentation': {
+            minDate: !isStandardPricingPlanSelected
+              ? format(new Date(), 'yyyy-MM-dd')
+              : undefined,
+            ...statement,
+          },
+        },
+      },
     },
   };
 };