feat(contractor-onboarding) - handle file uploads (#713)

* feat(contractor-onboarding) - handle file uploads

* remove comment

* fix performance degradation

* add comment

Author: gabrielseco

example/src/ReviewOnboardingStep.tsx

@@ -121,13 +121,22 @@ export function ReviewMeta({
 
         // If this has a label and prettyValue, it's a field - render it
         if (label && prettyValue !== undefined && prettyValue !== '') {
+          let displayValue;
+
+          // Handle file uploads (array of File objects)
+          if (value?.inputType === 'file' && Array.isArray(prettyValue)) {
+            displayValue = prettyValue
+              .map((file: File) => file.name)
+              .join(', ');
+          }
           // Handle boolean prettyValue
-          const displayValue =
-            typeof prettyValue === 'boolean'
-              ? prettyValue
-                ? 'Yes'
-                : 'No'
-              : prettyValue;
+          else if (typeof prettyValue === 'boolean') {
+            displayValue = prettyValue ? 'Yes' : 'No';
+          }
+          // Handle other types
+          else {
+            displayValue = prettyValue;
+          }
 
           return (
             <pre key={key}>

src/flows/ContractorOnboarding/hooks.tsx

@@ -413,17 +413,22 @@ export const useContractorOnboarding = ({
     [stepFields.select_country, internalCountryCode, employmentCountryCode],
   );
 
+  // memoize file conversion to avoid re-converting the file on every render
+  // noticed performance issues when not doing memoizing individually
+  const convertedIr35File = useMemo(() => {
+    if (!ir35File?.content) return null;
+    return dataURLtoFile(ir35File.content as unknown as string, ir35File.name);
+  }, [ir35File?.content, ir35File?.name]);
+
   const basicInformationInitialValues = useMemo(() => {
     const initialValues = {
       provisional_start_date: provisionalStartDate,
       ...onboardingInitialValues,
       ...employmentBasicInformation,
       ir35: employment?.contract_details?.ir_35,
       saudi_nationality_status: employment?.contract_details?.nationality,
-      ...(ir35File?.content && {
-        ir35_sds_file: [
-          dataURLtoFile(ir35File.content as unknown as string, ir35File.name),
-        ],
+      ...(convertedIr35File && {
+        ir35_sds_file: [convertedIr35File],
       }),
     };
 
@@ -433,7 +438,7 @@ export const useContractorOnboarding = ({
     employmentBasicInformation,
     employment?.contract_details?.ir_35,
     employment?.contract_details?.nationality,
-    ir35File,
+    convertedIr35File,
     stepFields.basic_information,
   ]);