add preview employment step

example/src/Onboarding.tsx

@@ -90,6 +90,7 @@ const MultiStepForm = ({ components, onboardingBag }: MultiStepFormProps) => {
     BackButton,
     SelectCountryStep,
     EngagementAgreementDetailsStep,
+    PreviewEmploymentAgreementStep,
   } = components;
   const [errors, setErrors] = useState<{
     apiError: string;
@@ -268,6 +269,27 @@ const MultiStepForm = ({ components, onboardingBag }: MultiStepFormProps) => {
         </div>
       );
     }
+    case 'employment_agreement_preview': {
+      return (
+        <>
+          <PreviewEmploymentAgreementStep />
+          <div className='buttons-container'>
+            <BackButton
+              className='back-button'
+              onClick={() => setErrors({ apiError: '', fieldErrors: [] })}
+            >
+              Previous Step
+            </BackButton>
+            <SubmitButton
+              className='submit-button'
+              onClick={() => setErrors({ apiError: '', fieldErrors: [] })}
+            >
+              Continue
+            </SubmitButton>
+          </div>
+        </>
+      );
+    }
     case 'review':
       return (
         <ReviewOnboardingStep
@@ -415,7 +437,7 @@ const OnboardingWithProps = ({
       employmentId={employmentId}
       externalId={externalId}
       options={{
-        features: ['onboarding_reserves', 'dynamic_steps'],
+        features: ['onboarding_reserves', 'dynamic_steps', 'ea_preview'],
         jsonSchemaVersion: {
           employment_basic_information: 3,
         },

src/flows/Onboarding/OnboardingFlow.tsx

@@ -13,6 +13,7 @@ import { ReviewStep } from '@/src/flows/Onboarding/components/ReviewStep';
 import { SaveDraftButton } from '@/src/flows/Onboarding/components/SaveDraftButton';
 import { EngagementAgreementDetailsStep } from '@/src/flows/Onboarding/components/EngagementAgreementDetailsStep';
 import { PreOnboardingRequirements } from '@/src/flows/Onboarding/components/PreOnboardingRequirements';
+import { PreviewEmploymentAgreementStep } from '@/src/flows/Onboarding/components/PreviewEmploymentAgreementStep';
 
 export const OnboardingFlow = ({
   employmentId,
@@ -68,6 +69,7 @@ export const OnboardingFlow = ({
           SelectCountryStep: SelectCountryStep,
           ReviewStep: ReviewStep,
           PreOnboardingRequirements: PreOnboardingRequirements,
+          PreviewEmploymentAgreementStep: PreviewEmploymentAgreementStep,
         },
       })}
     </OnboardingContext.Provider>

src/flows/Onboarding/components/PreviewEmploymentAgreementStep.tsx

@@ -0,0 +1,14 @@
+import { useOnboardingContext } from '@/src/flows/Onboarding/context';
+import { OnboardingForm } from '@/src/flows/Onboarding/components/OnboardingForm';
+
+export function PreviewEmploymentAgreementStep() {
+  const { onboardingBag } = useOnboardingContext();
+
+  const handleSubmit = async () => {
+    onboardingBag?.next();
+  };
+
+  // this step in theory shouldn't be a form, not sure yet...
+
+  return <OnboardingForm defaultValues={{}} onSubmit={handleSubmit} />;
+}

src/flows/Onboarding/hooks.tsx

@@ -3,6 +3,7 @@ import {
   Employment,
   EmploymentCreateParams,
   EmploymentFullParams,
+  SuccessResponse,
 } from '@/src/client';
 import { JSFFields, NestedMeta } from '@/src/types/remoteFlows';
 import { useStepState, Step } from '@/src/flows/useStepState';
@@ -63,6 +64,7 @@ const stepToFormSchemaMap: Record<StepKeys, JSONSchemaFormType | null> = {
   engagement_agreement_details: null,
   contract_details: 'contract_details',
   benefits: null,
+  employment_agreement_preview: null,
   review: null,
 };
 
@@ -171,15 +173,22 @@ export const useOnboarding = ({
   ] = useState<boolean>(false);
 
   const useDynamicSteps = options?.features?.includes('dynamic_steps') ?? false;
+  const useEAPreview = options?.features?.includes('ea_preview') ?? false;
 
   const { steps, stepsArray } = useMemo(
     () =>
       buildSteps({
         includeSelectCountry: !skipSteps?.includes('select_country'),
         includeEngagementAgreementDetails,
         useDynamicSteps,
+        useEAPreview,
       }),
-    [includeEngagementAgreementDetails, skipSteps, useDynamicSteps],
+    [
+      includeEngagementAgreementDetails,
+      skipSteps,
+      useDynamicSteps,
+      useEAPreview,
+    ],
   );
 
   const onStepChange = useCallback(
@@ -260,12 +269,14 @@ export const useOnboarding = ({
     contract_details: NestedMeta;
     benefits: NestedMeta;
     engagement_agreement_details: NestedMeta;
+    employment_agreement_preview: NestedMeta;
   }>({
     select_country: {},
     basic_information: {},
     contract_details: {},
     benefits: {},
     engagement_agreement_details: {},
+    employment_agreement_preview: {},
   });
 
   const {
@@ -577,6 +588,7 @@ export const useOnboarding = ({
         engagementAgreementDetailsSchema?.fields || [],
       contract_details: contractDetailsForm?.fields || [],
       benefits: benefitOffersSchema?.fields || [],
+      employment_agreement_preview: [],
       review: [],
     }),
     [
@@ -598,6 +610,7 @@ export const useOnboarding = ({
       engagementAgreementDetailsSchema?.meta['x-jsf-fieldsets'],
     contract_details: contractDetailsForm?.meta['x-jsf-fieldsets'],
     benefits: null,
+    employment_agreement_preview: null,
     review: null,
   };
 
@@ -611,6 +624,7 @@ export const useOnboarding = ({
       engagementAgreementDetailsSchema?.meta?.['x-jsf-presentation'],
     contract_details: contractDetailsForm?.meta?.['x-jsf-presentation'],
     benefits: benefitOffersSchema?.meta?.['x-jsf-presentation'],
+    employment_agreement_preview: null,
     review: null,
   };
 
@@ -707,13 +721,15 @@ export const useOnboarding = ({
               )
             : contractDetailsInitialValues,
         benefits: benefitsInitialValues,
+        employment_agreement_preview: {},
       };
     }
     return {
       select_country: selectCountryInitialValues,
       basic_information: basicInformationInitialValues,
       contract_details: contractDetailsInitialValues,
       benefits: benefitsInitialValues,
+      employment_agreement_preview: {},
     };
   }, [
     selectCountryInitialValues,
@@ -792,6 +808,7 @@ export const useOnboarding = ({
           stepFields.benefits,
           { skipMoneyConversion: true },
         ),
+        employment_agreement_preview: {},
       };
 
       setStepValues({
@@ -800,6 +817,7 @@ export const useOnboarding = ({
         contract_details: contractDetailsInitialValues,
         benefits: benefitsInitialValues,
         engagement_agreement_details: engagementAgreementDetailsInitialValues,
+        employment_agreement_preview: {},
         review: {},
       });
 
@@ -960,6 +978,10 @@ export const useOnboarding = ({
           ...parsedValues,
         });
       }
+      case 'employment_agreement_preview': {
+        // in theory we shouldn't submit any info here...
+        return Promise.resolve({ data: { status: 'ok' } } as SuccessResponse);
+      }
     }
     return;
   }

src/flows/Onboarding/types.ts

@@ -16,6 +16,7 @@ import { ReviewStep } from '@/src/flows/Onboarding/components/ReviewStep';
 import { SaveDraftButton } from '@/src/flows/Onboarding/components/SaveDraftButton';
 import { EngagementAgreementDetailsStep } from '@/src/flows/Onboarding/components/EngagementAgreementDetailsStep';
 import { PreOnboardingRequirements } from '@/src/flows/Onboarding/components/PreOnboardingRequirements';
+import { PreviewEmploymentAgreementStep } from '@/src/flows/Onboarding/components/PreviewEmploymentAgreementStep';
 
 export type OnboardingRenderProps = {
   /**
@@ -40,6 +41,7 @@ export type OnboardingRenderProps = {
    * @see {@link ReviewStep}
    * @see {@link SaveDraftButton}
    * @see {@link PreOnboardingRequirements}
+   * @see {@link PreviewEmploymentAgreementStep}
    */
   components: {
     SubmitButton: typeof OnboardingSubmit;
@@ -53,10 +55,14 @@ export type OnboardingRenderProps = {
     ReviewStep: typeof ReviewStep;
     SaveDraftButton: typeof SaveDraftButton;
     PreOnboardingRequirements: typeof PreOnboardingRequirements;
+    PreviewEmploymentAgreementStep: typeof PreviewEmploymentAgreementStep;
   };
 };
 
-type OnboardingFeatures = 'onboarding_reserves' | 'dynamic_steps';
+type OnboardingFeatures =
+  | 'onboarding_reserves'
+  | 'dynamic_steps'
+  | 'ea_preview';
 
 /**
  * JSON schema version configuration for a specific country

src/flows/Onboarding/utils.ts

@@ -7,12 +7,14 @@ export type StepKeys =
   | 'engagement_agreement_details'
   | 'contract_details'
   | 'benefits'
+  | 'employment_agreement_preview'
   | 'review';
 
 type StepConfig = {
   includeSelectCountry?: boolean;
   includeEngagementAgreementDetails?: boolean;
   useDynamicSteps?: boolean;
+  useEAPreview?: boolean;
 };
 
 export function buildSteps(config: StepConfig = {}) {
@@ -46,6 +48,11 @@ export function buildSteps(config: StepConfig = {}) {
       label: 'Benefits',
       visible: true,
     },
+    {
+      name: 'employment_agreement_preview',
+      label: 'Preview Employment Agreement',
+      visible: Boolean(config?.useEAPreview),
+    },
     {
       name: 'review',
       label: 'Review',