feat(save-draft-button) - add save draft button functionality (#791)

* add savedrafbutton

* add tests

* fix

* fix edge case

* revert

Author: gabrielseco

example/src/ContractorOnboarding.tsx

@@ -148,6 +148,7 @@ const MultiStepForm = ({
     ContractDetailsStep,
     ContractPreviewStep,
     ContractReviewButton,
+    SaveDraftButton,
   } = components;
   const [errors, setErrors] = useState<{
     apiError: string;
@@ -204,6 +205,19 @@ const MultiStepForm = ({
             >
               Back
             </BackButton>
+            <SaveDraftButton
+              className='submit-button'
+              onSuccess={() => {
+                console.log('Draft saved successfully');
+                setErrors({ apiError: '', fieldErrors: [] });
+              }}
+              onError={({ error, fieldErrors }) => {
+                console.log('Draft save failed', error);
+                setErrors({ apiError: error.message, fieldErrors });
+              }}
+            >
+              Save Draft
+            </SaveDraftButton>
             <SubmitButton
               className='submit-button'
               onClick={() => setErrors({ apiError: '', fieldErrors: [] })}
@@ -263,6 +277,19 @@ const MultiStepForm = ({
             >
               Back
             </BackButton>
+            <SaveDraftButton
+              className='submit-button'
+              onSuccess={() => {
+                console.log('Contract details draft saved successfully');
+                setErrors({ apiError: '', fieldErrors: [] });
+              }}
+              onError={({ error, fieldErrors }) => {
+                console.log('Contract details draft save failed', error);
+                setErrors({ apiError: error.message, fieldErrors });
+              }}
+            >
+              Save Draft
+            </SaveDraftButton>
             <SubmitButton
               className='submit-button'
               onClick={() => setErrors({ apiError: '', fieldErrors: [] })}

src/flows/ContractorOnboarding/ContractorOnboarding.tsx

@@ -13,6 +13,7 @@ import { ContractPreviewStep } from '@/src/flows/ContractorOnboarding/components
 import { OnboardingInvite } from '@/src/flows/ContractorOnboarding/components/OnboardingInvite';
 import { ContractReviewButton } from '@/src/flows/ContractorOnboarding/components/ContractReviewButton';
 import { EligibilityQuestionnaireStep } from '@/src/flows/ContractorOnboarding/components/EligibilityQuestionnaireStep';
+import { SaveDraftButton } from '@/src/flows/ContractorOnboarding/components/SaveDraftButton';
 
 export const ContractorOnboardingFlow = ({
   render,
@@ -56,6 +57,7 @@ export const ContractorOnboardingFlow = ({
           ContractPreviewStep: ContractPreviewStep,
           OnboardingInvite: OnboardingInvite,
           ContractReviewButton: ContractReviewButton,
+          SaveDraftButton: SaveDraftButton,
         },
       })}
     </ContractorOnboardingContext.Provider>

src/flows/ContractorOnboarding/components/ContractorOnboardingForm.tsx

@@ -12,6 +12,7 @@ import {
   PricingPlanFormPayload,
   ContractorOnboardingContractDetailsFormPayload,
 } from '@/src/flows/ContractorOnboarding/types';
+import { normalizeFieldErrors } from '@/src/lib/mutations';
 
 type ContractorOnboardingFormProps = {
   onSubmit: (
@@ -76,8 +77,39 @@ export function ContractorOnboardingForm({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleSubmit = async (values: Record<string, unknown>) => {
-    await onSubmit(values as $TSFixMe);
+  const handleSubmit = async (
+    values: Record<string, unknown>,
+    event?: React.BaseSyntheticEvent,
+  ) => {
+    const nativeEvent = event?.nativeEvent as $TSFixMe;
+
+    if (nativeEvent?.isDraftSubmission) {
+      const { onSuccess, onError } = nativeEvent.draftCallbacks;
+
+      try {
+        await contractorOnboardingBag.onSubmit(values);
+        onSuccess?.();
+      } catch (error: $TSFixMe) {
+        const currentStepName =
+          contractorOnboardingBag.stepState.currentStep.name;
+        const currentStepFields =
+          contractorOnboardingBag.meta?.fields?.[
+            currentStepName as keyof typeof contractorOnboardingBag.meta.fields
+          ];
+
+        const normalizedFieldErrors = normalizeFieldErrors(
+          error?.fieldErrors || [],
+          currentStepFields,
+        );
+        onError?.({
+          error: error?.error || (error as Error),
+          rawError: error?.rawError || (error as Record<string, unknown>),
+          fieldErrors: normalizedFieldErrors,
+        });
+      }
+    } else {
+      await onSubmit(values as $TSFixMe);
+    }
   };
 
   return (

src/flows/ContractorOnboarding/components/SaveDraftButton.tsx

@@ -0,0 +1,63 @@
+import { useFormFields } from '@/src/context';
+import { useContractorOnboardingContext } from '@/src/flows/ContractorOnboarding/context';
+import { ButtonHTMLAttributes } from 'react';
+import { NormalizedFieldError } from '@/src/lib/mutations';
+import { $TSFixMe } from '@/src/types/remoteFlows';
+
+type SaveDraftButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'onError'
+> & {
+  onSuccess?: () => void | Promise<void>;
+  onError?: ({
+    error,
+    rawError,
+    fieldErrors,
+  }: {
+    error: Error;
+    rawError: Record<string, unknown>;
+    fieldErrors: NormalizedFieldError[];
+  }) => void;
+};
+
+export const SaveDraftButton = ({
+  onSuccess,
+  onError,
+  className,
+  children,
+  disabled = false,
+  ...props
+}: SaveDraftButtonProps) => {
+  const { contractorOnboardingBag, formId } = useContractorOnboardingContext();
+
+  const { components } = useFormFields();
+
+  const handleSaveDraft = async () => {
+    const form = document.getElementById(formId);
+    if (form) {
+      const submitEvent = new Event('submit', {
+        bubbles: true,
+        cancelable: true,
+      });
+      (submitEvent as $TSFixMe).isDraftSubmission = true;
+      (submitEvent as $TSFixMe).draftCallbacks = { onSuccess, onError };
+      form.dispatchEvent(submitEvent);
+    }
+  };
+
+  const CustomButton = components?.button;
+  if (!CustomButton) {
+    throw new Error(`Button component not found`);
+  }
+
+  return (
+    <CustomButton
+      {...props}
+      onClick={handleSaveDraft}
+      disabled={disabled || contractorOnboardingBag.isSubmitting}
+      className={className}
+    >
+      {children}
+    </CustomButton>
+  );
+};

src/flows/ContractorOnboarding/hooks.tsx

@@ -997,7 +997,6 @@ export const useContractorOnboarding = ({
         return;
       }
       case 'contract_details': {
-        console.log('parsedValues', parsedValues);
         const shouldSkipAiChecks =
           fieldValues.services_and_deliverables_error_skippable === true;
         const payload: CreateContractDocument = {