feat(employment) - exclude files (#719)

* feat(employment) - exclude files

* fix paths

* fix hooks

Author: gabrielseco

src/common/api/employment.ts

@@ -0,0 +1,41 @@
+import { getShowEmployment, GetShowEmploymentResponse } from '@/src/client';
+import { useClient } from '@/src/context';
+import { $TSFixMe } from '@/src/types/remoteFlows';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { Client } from '@/src/client/client';
+
+/**
+ * Hook to retrieve employment details for a specific employment ID.
+ *
+ * @param {Object} params - The parameters for the query.
+ * @param {string} params.employmentId - The ID of the employment to fetch details for.
+ * @returns {UseQueryResult<any, unknown>} - The result of the query, including the employment details.
+ */
+export const useEmploymentQuery = ({
+  employmentId,
+  queryParams,
+}: {
+  employmentId: string;
+  queryParams?: $TSFixMe; // TODO: we need to generate openapi-ts types but it's broken at the moment
+}): UseQueryResult<
+  GetShowEmploymentResponse['data']['employment'],
+  unknown
+> => {
+  const { client } = useClient();
+  return useQuery({
+    queryKey: ['employment', employmentId],
+    retry: false,
+    queryFn: () => {
+      return getShowEmployment({
+        client: client as Client,
+        headers: {
+          Authorization: ``,
+        },
+        path: { employment_id: employmentId },
+        query: queryParams,
+      });
+    },
+    enabled: !!employmentId,
+    select: ({ data }) => data?.data?.employment,
+  });
+};

src/common/api/index.ts

@@ -1,41 +1,8 @@
-import {
-  getShowEmployment,
-  MagicLinkParams,
-  postGenerateMagicLink,
-} from '@/src/client';
+import { useMutation } from '@tanstack/react-query';
+import { MagicLinkParams, postGenerateMagicLink } from '@/src/client';
 import { useClient } from '@/src/context';
-import { ContractAmendmentParams } from '@/src/flows/ContractAmendment/types';
 
 import { Client } from '@/src/client/client';
-import { useMutation, useQuery } from '@tanstack/react-query';
-
-type UseEmployment = Pick<ContractAmendmentParams, 'employmentId'>;
-
-/**
- * Hook to retrieve employment details for a specific employment ID.
- *
- * @param {Object} params - The parameters for the query.
- * @param {string} params.employmentId - The ID of the employment to fetch details for.
- * @returns {UseQueryResult<any, unknown>} - The result of the query, including the employment details.
- */
-export const useEmploymentQuery = ({ employmentId }: UseEmployment) => {
-  const { client } = useClient();
-  return useQuery({
-    queryKey: ['employment', employmentId],
-    retry: false,
-    queryFn: () => {
-      return getShowEmployment({
-        client: client as Client,
-        headers: {
-          Authorization: ``,
-        },
-        path: { employment_id: employmentId },
-      });
-    },
-    enabled: !!employmentId,
-    select: ({ data }) => data?.data?.employment,
-  });
-};
 
 export const useMagicLink = () => {
   const { client } = useClient();

src/components/form/fields/default/RadioGroupFieldDefault.tsx

@@ -25,8 +25,10 @@ export const RadioGroupFieldDefault = ({
       <FormItem>
         <legend>{label}</legend>
         {description && (
-          <FormDescription>
-            {description} <HelpCenter helpCenter={fieldData.meta?.helpCenter} />
+          <FormDescription
+            helpCenter={<HelpCenter helpCenter={fieldData.meta?.helpCenter} />}
+          >
+            {description}
           </FormDescription>
         )}
         <FormControl>

src/components/ui/form.tsx

@@ -131,11 +131,13 @@ const FormControl = React.forwardRef<
 FormControl.displayName = 'FormControl';
 
 function FormDescription<T extends React.ElementType = 'p'>({
+  helpCenter,
   className,
   children,
   as,
   ...props
 }: React.ComponentProps<'p'> & {
+  helpCenter?: React.ReactNode;
   children?: React.ReactNode | (() => React.ReactNode);
   as?: T;
 } & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>) {
@@ -144,16 +146,19 @@ function FormDescription<T extends React.ElementType = 'p'>({
 
   if (typeof children === 'string') {
     return (
-      <Component
-        data-slot='form-description'
-        id={formDescriptionId}
-        className={cn('text-base-color text-xs', className)}
-        dangerouslySetInnerHTML={{
-          __html: sanitizeHtml(children),
-        }}
-        data-sanitized='true'
-        {...props}
-      />
+      <>
+        <Component
+          data-slot='form-description'
+          id={formDescriptionId}
+          className={cn('text-base-color text-xs', className)}
+          dangerouslySetInnerHTML={{
+            __html: sanitizeHtml(children),
+          }}
+          data-sanitized='true'
+          {...props}
+        />
+        {helpCenter && helpCenter}
+      </>
     );
   }
 
@@ -166,6 +171,7 @@ function FormDescription<T extends React.ElementType = 'p'>({
       {...props}
     >
       {typeof children === 'function' ? children() : children}
+      {helpCenter && helpCenter}
     </Component>
   );
 }

src/flows/ContractAmendment/hooks.ts

@@ -11,7 +11,7 @@ import { parseJSFToValidate } from '@/src/components/form/utils';
 import { mutationToPromise } from '@/src/lib/mutations';
 import { Client } from '@/src/client/client';
 import { createHeadlessForm } from '@/src/common/createHeadlessForm';
-import { useEmploymentQuery } from '@/src/common/api';
+import { useEmploymentQuery } from '@/src/common/api/employment';
 import { useClient } from '@/src/context';
 import { ContractAmendmentParams } from './types';
 import { useStepState } from '../useStepState';
@@ -130,6 +130,9 @@ export const useContractAmendment = ({
     error: errorEmployment,
   } = useEmploymentQuery({
     employmentId,
+    queryParams: {
+      exclude_files: true,
+    },
   });
 
   const {

src/flows/ContractorOnboarding/hooks.tsx

@@ -33,7 +33,6 @@ import {
 import {
   useCountriesSchemaField,
   useCreateEmployment,
-  useEmployment,
   useJSONSchemaForm,
   useUpdateEmployment,
 } from '@/src/flows/Onboarding/api';
@@ -58,6 +57,7 @@ import {
 } from '@/src/flows/ContractorOnboarding/jsfModify';
 import { useUploadFile } from '@/src/common/api/files';
 import { dataURLtoFile } from '@/src/lib/files';
+import { useEmploymentQuery } from '@/src/common/api/employment';
 
 type useContractorOnboardingProps = Omit<
   ContractorOnboardingFlowProps,
@@ -135,7 +135,10 @@ export const useContractorOnboarding = ({
     data: employment,
     isLoading: isLoadingEmployment,
     refetch: refetchEmployment,
-  } = useEmployment(internalEmploymentId);
+  } = useEmploymentQuery({
+    employmentId: internalEmploymentId as string,
+    queryParams: { exclude_files: true },
+  });
 
   const { status: employmentStatus } = employment || {};
 

src/flows/Onboarding/hooks.tsx

@@ -30,7 +30,6 @@ import {
   useCompany,
   useCountriesSchemaField,
   useCreateEmployment,
-  useEmployment,
   useJSONSchemaForm,
   useUpdateBenefitsOffers,
   useUpdateEmployment,
@@ -41,6 +40,7 @@ import { AnnualGrossSalary } from '@/src/flows/Onboarding/components/AnnualGross
 import { $TSFixMe, JSFField, JSFFieldset, Meta } from '@/src/types/remoteFlows';
 import { EquityPriceDetails } from '@/src/flows/Onboarding/components/EquityPriceDetails';
 import { useErrorReporting } from '@/src/components/error-handling/useErrorReporting';
+import { useEmploymentQuery } from '@/src/common/api/employment';
 
 type OnboardingHookProps = Omit<OnboardingFlowProps, 'render'>;
 
@@ -192,7 +192,10 @@ export const useOnboarding = ({
     data: employment,
     isLoading: isLoadingEmployment,
     refetch: refetchEmployment,
-  } = useEmployment(internalEmploymentId);
+  } = useEmploymentQuery({
+    employmentId: internalEmploymentId as string,
+    queryParams: { exclude_files: true },
+  });
 
   // if the employment is loaded, country code has not been set yet
   // we set the internal country code with the employment country code

src/flows/Termination/hooks.tsx

@@ -37,7 +37,7 @@ import { cn } from '@/src/internals';
 import { zendeskArticles } from '@/src/components/shared/zendesk-drawer/utils';
 import { PaidTimeOff } from '@/src/flows/Termination/components/PaidTimeOff/PaidTimeOff';
 import { PaidTimeOffContainer } from '@/src/flows/Termination/components/PaidTimeOff/PaidTimeOffContainer';
-import { useEmploymentQuery } from '@/src/common/api';
+import { useEmploymentQuery } from '@/src/common/api/employment';
 import { AcknowledgeInformationContainer } from '@/src/flows/Termination/components/AcknowledgeInformation/AcknowledgeInfomationContainer';
 import { AcknowledgeInformation } from '@/src/flows/Termination/components/AcknowledgeInformation/AcknowledgeInformation';
 import { AcknowledgeInformationFees } from '@/src/flows/Termination/components/AcknowledgeInformation/AcknowledgeInformationFees';
@@ -56,7 +56,7 @@ export const useTermination = ({
     useStepState<keyof typeof STEPS, TerminationFormValues>(STEPS);
 
   const { data: employment, isLoading: isLoadingEmployment } =
-    useEmploymentQuery({ employmentId });
+    useEmploymentQuery({ employmentId, queryParams: { exclude_files: true } });
 
   const { data: payrollCalendars } = usePayrollCalendars({
     query: {

src/index.tsx

@@ -78,7 +78,8 @@ export type { ContractPreviewStatementProps } from '@/src/flows/ContractorOnboar
 
 export type * from '@/src/flows/CostCalculator/types';
 
-export { useEmploymentQuery, useMagicLink } from '@/src/common/api';
+export { useMagicLink } from '@/src/common/api';
+export { useEmploymentQuery } from '@/src/common/api/employment';
 
 export {
   useTimeOffQuery,