feat(onboarding) - add engagement form for Germany (#946)

* feat(types) - update opeanpi types

* fix onboarding form abstraction

* more types

* add hooks && types

* changes for engagement

* add functionality to preload default field

* add submission

* format

* export payload type

* fix types

* fix type

* fix type

* fix type

* recover data

* fix step and title

* fix inclusion of the form

* fix agreement

* fix tests

* remove todo

* remove code

* add tests

* add description

* remove comments

Author: gabrielseco

example/package-lock.json

@@ -10,6 +10,9 @@ import {
   SelectCountrySuccess,
   SelectCountryFormPayload,
   NormalizedFieldError,
+  EngagementAgreementDetailsFormPayload,
+  ZendeskTriggerButton,
+  zendeskArticles,
 } from '@remoteoss/remote-flows';
 import React, { useState } from 'react';
 import { ReviewOnboardingStep } from './ReviewOnboardingStep';
@@ -49,6 +52,7 @@ const MultiStepForm = ({ components, onboardingBag }: MultiStepFormProps) => {
     SubmitButton,
     BackButton,
     SelectCountryStep,
+    EngagementAgreementDetailsStep,
   } = components;
   const [errors, setErrors] = useState<{
     apiError: string;
@@ -118,6 +122,35 @@ const MultiStepForm = ({ components, onboardingBag }: MultiStepFormProps) => {
           </div>
         </>
       );
+    case 'engagement_agreement_details':
+      return (
+        <>
+          <EngagementAgreementDetailsStep
+            onSubmit={(payload: EngagementAgreementDetailsFormPayload) =>
+              console.log('payload', payload)
+            }
+            onSuccess={(data: SuccessResponse) => console.log('data', data)}
+            onError={({ error, fieldErrors }) =>
+              setErrors({ apiError: error.message, fieldErrors })
+            }
+          />
+          <AlertError errors={errors} />
+          <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 'contract_details':
       return (
         <>
@@ -208,6 +241,42 @@ const MultiStepForm = ({ components, onboardingBag }: MultiStepFormProps) => {
   'Review & Invite',
 ];
  */
+
+const getStepTitle = (
+  step: OnboardingRenderProps['onboardingBag']['steps'][number],
+  selectedCountryCode: string | null,
+) => {
+  if (
+    selectedCountryCode === 'DEU' &&
+    step.name === 'engagement_agreement_details'
+  ) {
+    return 'Labor leasing in Germany';
+  }
+  return step.label;
+};
+
+const getStepDescription = (
+  step: OnboardingRenderProps['onboardingBag']['steps'][number],
+  selectedCountryCode: string | null,
+) => {
+  if (
+    selectedCountryCode === 'DEU' &&
+    step.name === 'engagement_agreement_details'
+  ) {
+    return (
+      <>
+        Provide some details about your <strong>current workforce</strong> to
+        make sure this employee is hired compliantly according to Germany’s AÜG
+        labor leasing model.
+        <ZendeskTriggerButton zendeskId={zendeskArticles.germanyLaborLeasing}>
+          Learn more
+        </ZendeskTriggerButton>
+      </>
+    );
+  }
+  return '';
+};
+
 const OnBoardingRender = ({
   onboardingBag,
   components,
@@ -217,12 +286,20 @@ const OnBoardingRender = ({
   // When using dynamic_steps feature, you need to filter and use step.index for comparison
   // Otherwise, you can use the steps array directly with sequential indices
   //const stepTitle = STEPS[currentStepIndex];
-  const stepTitle = onboardingBag.steps[currentStepIndex].label;
+  const stepTitle = getStepTitle(
+    onboardingBag.steps[currentStepIndex],
+    onboardingBag.selectedCountry?.code ?? null,
+  );
 
   if (onboardingBag.isLoading) {
     return <p>Loading...</p>;
   }
 
+  const stepDescription = getStepDescription(
+    onboardingBag.steps[currentStepIndex],
+    onboardingBag.selectedCountry?.code ?? null,
+  );
+
   return (
     <>
       <div className='steps-navigation'>
@@ -242,14 +319,22 @@ const OnBoardingRender = ({
                 key={step.name}
                 className={`step-item ${step.index === currentStepIndex ? 'active' : ''}`}
               >
-                {index + 1}. {step.label}
+                {index + 1}.{' '}
+                {getStepTitle(
+                  step,
+                  onboardingBag.selectedCountry?.code ?? null,
+                )}
               </li>
             ))}
         </ul>
       </div>
 
       <div className='card' style={{ marginBottom: '20px' }}>
         <h1 className='heading'>{stepTitle}</h1>
+
+        {stepDescription && (
+          <p className='text-sm text-[#71717A]'>{stepDescription}</p>
+        )}
         <MultiStepForm onboardingBag={onboardingBag} components={components} />
       </div>
     </>

example/src/Onboarding.tsx

@@ -243,6 +243,17 @@ export const ReviewOnboardingStep = ({
       >
         Edit Basic Information
       </button>
+      <h2 className='title'>Engagement Agreement Details</h2>
+      <ReviewMeta
+        meta={onboardingBag.meta.fields.engagement_agreement_details}
+      />
+      <button
+        className='back-button'
+        onClick={() => onboardingBag.goTo('engagement_agreement_details')}
+        disabled={onboardingBag.isEmploymentReadOnly}
+      >
+        Edit Engagement Agreement Details
+      </button>
       <h2 className='title'>Contract Details</h2>
       <ReviewMeta meta={onboardingBag.meta.fields.contract_details} />
       <button

example/src/ReviewOnboardingStep.tsx

@@ -12,5 +12,11 @@ export const countriesMock = {
       eor_onboarding: true,
       contractor_products_available: ['standard', 'plus', 'cor'],
     },
+    {
+      code: 'DEU',
+      name: 'Germany',
+      eor_onboarding: true,
+      contractor_products_available: ['standard', 'plus', 'cor'],
+    },
   ],
 };

src/common/api/fixtures/countries.ts

@@ -23,6 +23,12 @@ export const zendeskArticles = {
    * https://support.remote.com/hc/en-us/articles/4466822781709
    */
   extraPayments: 4466822781709,
+  /**
+   * Germany Labor Leasing
+   * Access: Private (Need Remote account to access)
+   * https://support.remote.com/hc/en-us/articles/43002165606541
+   */
+  germanyLaborLeasing: 43002165606541,
   /**
    * International Pricing
    * Access: Public (Everyone can access)

src/components/shared/zendesk-drawer/utils.ts

@@ -11,6 +11,7 @@ import { BenefitsStep } from '@/src/flows/Onboarding/components/BenefitsStep';
 import { SelectCountryStep } from '@/src/flows/Onboarding/components/SelectCountryStep';
 import { ReviewStep } from '@/src/flows/Onboarding/components/ReviewStep';
 import { SaveDraftButton } from '@/src/flows/Onboarding/components/SaveDraftButton';
+import { EngagementAgreementDetailsStep } from '@/src/flows/Onboarding/components/EngagementAgreementDetailsStep';
 
 export const OnboardingFlow = ({
   employmentId,
@@ -56,6 +57,7 @@ export const OnboardingFlow = ({
         onboardingBag,
         components: {
           BasicInformationStep: BasicInformationStep,
+          EngagementAgreementDetailsStep: EngagementAgreementDetailsStep,
           ContractDetailsStep: ContractDetailsStep,
           BenefitsStep: BenefitsStep,
           SubmitButton: OnboardingSubmit,

src/flows/Onboarding/OnboardingFlow.tsx

@@ -5,10 +5,13 @@ import {
   ConvertCurrencyParams,
   CreateContractEligibilityParams,
   EmploymentCreateParams,
+  EmploymentEngagementAgreementDetailsParams,
   EmploymentFullParams,
   getIndexBenefitOffer,
   getShowCompany,
   getShowCompanyEmploymentOnboardingReservesStatus,
+  getShowEmploymentEngagementAgreementDetails,
+  getShowEngagementAgreementDetailsCountry,
   getShowFormCountry,
   getShowSchema,
   patchUpdateEmployment2,
@@ -19,13 +22,17 @@ import {
   postCreateRiskReserve,
   postInviteEmploymentInvitation,
   PostInviteEmploymentInvitationData,
+  postUpdateEmploymentEngagementAgreementDetails,
   putUpdateBenefitOffer,
   UnifiedEmploymentUpsertBenefitOffersRequest,
 } from '@/src/client';
 
 import { useClient } from '@/src/context';
 import { selectCountryStepSchema } from '@/src/flows/Onboarding/json-schemas/selectCountryStep';
-import { OnboardingFlowProps } from '@/src/flows/Onboarding/types';
+import {
+  OnboardingFlowProps,
+  OnboardingJsfModify,
+} from '@/src/flows/Onboarding/types';
 import {
   JSONSchemaFormResultWithFieldsets,
   JSONSchemaFormType,
@@ -106,6 +113,36 @@ export const useBenefitOffers = (employmentId: string | undefined) => {
       ),
   });
 };
+
+export const useEmploymentEngagementAgreementDetails = (
+  employmentId: string | undefined,
+  queryOptions?: { enabled?: boolean },
+) => {
+  const { client } = useClient();
+  return useQuery({
+    queryKey: ['employment-engagement-agreement-details', employmentId],
+    retry: false,
+    enabled: queryOptions?.enabled ?? !!employmentId,
+    queryFn: async () => {
+      return getShowEmploymentEngagementAgreementDetails({
+        client: client as Client,
+        headers: {
+          Authorization: ``,
+        },
+        path: {
+          employment_id: employmentId as string,
+        },
+      }).then((response) => {
+        if (response.error || !response.data) {
+          throw new Error('Failed to fetch engagement agreement details');
+        }
+        return response;
+      });
+    },
+    select: ({ data }) => data?.data?.details,
+  });
+};
+
 /**
  * Use this hook to invite an employee to the onboarding flow
  * @returns
@@ -306,6 +343,30 @@ export const useUpdateEmployment = (
   });
 };
 
+export const useUpdateEmploymentEngagementAgreementDetails = () => {
+  const { client } = useClient();
+
+  return useMutation({
+    mutationFn: ({
+      employmentId,
+      ...payload
+    }: EmploymentEngagementAgreementDetailsParams & {
+      employmentId: string;
+    }) => {
+      return postUpdateEmploymentEngagementAgreementDetails({
+        client: client as Client,
+        headers: {
+          Authorization: ``,
+        },
+        body: payload,
+        path: {
+          employment_id: employmentId,
+        },
+      });
+    },
+  });
+};
+
 export const useUpdateBenefitsOffers = (
   options?: OnboardingFlowProps['options'],
 ) => {
@@ -459,3 +520,40 @@ export const useEmploymentOnboardingReservesStatus = (
     select: ({ data }) => data?.data?.status,
   });
 };
+
+export const useEngagementAgreementDetailsSchema = (
+  countryCode: string,
+  fieldValues: FieldValues,
+  options?: {
+    jsfModify?: OnboardingJsfModify;
+    queryOptions?: { enabled?: boolean };
+  },
+) => {
+  const { client } = useClient();
+  return useQuery({
+    queryKey: ['engagement-agreement-details', countryCode],
+    retry: false,
+    enabled: options?.queryOptions?.enabled ?? !!countryCode,
+    queryFn: async () => {
+      const response = await getShowEngagementAgreementDetailsCountry({
+        client: client as Client,
+        path: {
+          country_code: countryCode,
+        },
+      });
+
+      if (response.error || !response.data) {
+        throw new Error('Failed to fetch engagement agreement details');
+      }
+
+      return response;
+    },
+    select: ({ data }) => {
+      const jsfSchema = data?.data?.schema || {};
+
+      return createHeadlessForm(jsfSchema, fieldValues, {
+        jsfModify: options?.jsfModify?.engagement_agreement_details,
+      });
+    },
+  });
+};