feat(contractor-onboarding) - add default legal entity (#727)

* feat(contractor-onboarding) - add default legal entity

* reorder

Author: gabrielseco

example/src/ContractorOnboarding.tsx

@@ -23,6 +23,7 @@ import {
   TabsTrigger,
   TabsList,
 } from '@remoteoss/remote-flows/internals';
+import Flag from 'react-flagpack';
 import React, { useState } from 'react';
 import { RemoteFlows } from './RemoteFlows';
 import { AlertError } from './AlertError';
@@ -311,29 +312,46 @@ const OnBoardingRender = ({
 
   return (
     <>
-      <div className='steps-contractor-onboarding-navigation'>
-        <ul>
-          {STEPS.map((step, index) => (
-            <li
-              key={index}
-              className={`step-contractor-onboarding-item ${index === currentStepIndex ? 'active' : ''}`}
-            >
-              {index + 1}. {step}
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      {contractorOnboardingBag.isLoading ? (
-        <div className='contractor-onboarding-form-layout'>
-          <p>Loading...</p>
+      {contractorOnboardingBag.defaultLegalEntity && (
+        <div className='contractor-onboarding-default-legal-entity'>
+          <div className='text-sm text-[#27272A] flex items-center justify-center gap-2 uppercase mb-2 font-medium'>
+            <Flag
+              size='s'
+              code={
+                contractorOnboardingBag.defaultLegalEntity
+                  .country_code as string
+              }
+            />
+            {contractorOnboardingBag.defaultLegalEntity.name}
+          </div>
         </div>
-      ) : (
-        <MultiStepForm
-          contractorOnboardingBag={contractorOnboardingBag}
-          components={components}
-        />
       )}
+      <Header />
+      <Card className='px-0 py-0'>
+        <div className='steps-contractor-onboarding-navigation'>
+          <ul>
+            {STEPS.map((step, index) => (
+              <li
+                key={index}
+                className={`step-contractor-onboarding-item ${index === currentStepIndex ? 'active' : ''}`}
+              >
+                {index + 1}. {step}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {contractorOnboardingBag.isLoading ? (
+          <div className='contractor-onboarding-form-layout'>
+            <p>Loading...</p>
+          </div>
+        ) : (
+          <MultiStepForm
+            contractorOnboardingBag={contractorOnboardingBag}
+            components={components}
+          />
+        )}
+      </Card>
     </>
   );
 };
@@ -364,29 +382,26 @@ export const ContractorOnboardingWithProps = ({
         proxy={{ url: window.location.origin }}
       >
         <div className='contractor-onboarding-content'>
-          <Header />
-          <Card className='px-0 py-0'>
-            <ContractorOnboardingFlow
-              render={OnBoardingRender}
-              employmentId={employmentId}
-              externalId={externalId}
-              options={{
-                jsfModify: {
-                  contract_details: {
-                    fields: {
-                      'payment_terms.payment_terms_type': {
-                        'x-jsf-presentation': {
-                          Component: (props: JSFCustomComponentProps) => (
-                            <Switcher {...props} />
-                          ),
-                        },
+          <ContractorOnboardingFlow
+            render={OnBoardingRender}
+            employmentId={employmentId}
+            externalId={externalId}
+            options={{
+              jsfModify: {
+                contract_details: {
+                  fields: {
+                    'payment_terms.payment_terms_type': {
+                      'x-jsf-presentation': {
+                        Component: (props: JSFCustomComponentProps) => (
+                          <Switcher {...props} />
+                        ),
                       },
                     },
                   },
                 },
-              }}
-            />
-          </Card>
+              },
+            }}
+          />
         </div>
       </RemoteFlows>
     </div>

src/common/api/legal-entities.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { getIndexCompanyLegalEntities } from '@/src/client';
+import { Client } from '@/src/client/client';
+import { useClient } from '@/src/context';
+
+/**
+ * Hook to get the legal entities for a company
+ * @param companyId - The company ID
+ * @returns The legal entities
+ */
+export const useLegalEntities = (companyId: string) => {
+  const { client } = useClient();
+  return useQuery({
+    queryKey: ['legal-entities'],
+    queryFn: () =>
+      getIndexCompanyLegalEntities({
+        client: client as Client,
+        path: {
+          company_id: companyId,
+        },
+      }),
+    select: (data) => data.data?.data?.legal_entities,
+    enabled: !!companyId,
+  });
+};
+
+export const useDefaultLegalEntity = (companyId: string) => {
+  const { data: legalEntities } = useLegalEntities(companyId);
+  return legalEntities?.find((legalEntity) => legalEntity.is_default);
+};

src/flows/ContractorOnboarding/hooks.tsx

@@ -58,6 +58,7 @@ import {
 import { useUploadFile } from '@/src/common/api/files';
 import { dataURLtoFile } from '@/src/lib/files';
 import { useEmploymentQuery } from '@/src/common/api/employment';
+import { useDefaultLegalEntity } from '@/src/common/api/legal-entities';
 
 type useContractorOnboardingProps = Omit<
   ContractorOnboardingFlowProps,
@@ -140,6 +141,10 @@ export const useContractorOnboarding = ({
     queryParams: { exclude_files: true },
   });
 
+  const defaultLegalEntity = useDefaultLegalEntity(
+    employment?.company_id as string,
+  );
+
   const { status: employmentStatus } = employment || {};
 
   const isEmploymentReadOnly =
@@ -982,5 +987,11 @@ export const useContractorOnboarding = ({
      * @returns {Employment}
      */
     employment,
+
+    /**
+     * Default legal entity
+     * @returns {CompanyLegalEntity}
+     */
+    defaultLegalEntity,
   };
 };