@ram_28/kf-ai-sdk 1.0.9 → 1.0.11

package/sdk/components/hooks/useForm/useForm.ts

@@ -49,15 +49,16 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
     mode = "onBlur", // Validation mode - controls when errors are shown (see types.ts for details)
     enabled = true,
     userRole,
-    onSuccess,
-    onError,
     onSchemaError,
-    onSubmitError,
     skipSchemaFetch = false,
     schema: manualSchema,
     draftOnEveryChange = false,
+    interactionMode = "interactive",
   } = options;
 
+  // Derived interaction mode flags
+  const isInteractiveMode = interactionMode === "interactive";
+
   // ============================================================
   // STATE MANAGEMENT
   // ============================================================
@@ -65,10 +66,14 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
   const [schemaConfig, setSchemaConfig] =
     useState<FormSchemaConfig | null>(null);
   const [referenceData, setReferenceData] = useState<Record<string, any[]>>({});
-  const [submitError, setSubmitError] = useState<Error | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [lastFormValues] = useState<Partial<T>>({});
 
+  // Interactive mode state
+  const [draftId, setDraftId] = useState<string | null>(null);
+  const [isCreatingDraft, setIsCreatingDraft] = useState(false);
+  const [draftError, setDraftError] = useState<Error | null>(null);
+
   // Prevent infinite loop in API calls
   const isComputingRef = useRef(false);
   const computeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -77,25 +82,10 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
   // This allows us to detect changes since the last draft, not since form init
   const lastSyncedValuesRef = useRef<Partial<T> | null>(null);
 
-  // Stable callback refs to prevent dependency loops
-  const onSuccessRef = useRef(onSuccess);
-  const onErrorRef = useRef(onError);
-  const onSubmitErrorRef = useRef(onSubmitError);
+  // Stable callback ref to prevent dependency loops
   const onSchemaErrorRef = useRef(onSchemaError);
 
-  // Update refs when callbacks change
-  useEffect(() => {
-    onSuccessRef.current = onSuccess;
-  }, [onSuccess]);
-
-  useEffect(() => {
-    onErrorRef.current = onError;
-  }, [onError]);
-
-  useEffect(() => {
-    onSubmitErrorRef.current = onSubmitError;
-  }, [onSubmitError]);
-
+  // Update ref when callback changes
   useEffect(() => {
     onSchemaErrorRef.current = onSchemaError;
   }, [onSchemaError]);
@@ -201,18 +191,67 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
     }
   }, [schema, userRole]); // Removed onSchemaError - using ref instead
 
-  // Handle schema and record errors
+  // Handle schema error
   useEffect(() => {
     if (schemaError) {
       onSchemaErrorRef.current?.(schemaError);
     }
   }, [schemaError]);
 
+  // ============================================================
+  // INTERACTIVE MODE - INITIAL DRAFT CREATION
+  // ============================================================
+
+  // Create initial draft for interactive create mode
   useEffect(() => {
-    if (recordError) {
-      onErrorRef.current?.(recordError);
+    // Only run for interactive mode + create operation + schema loaded + no draft yet
+    if (
+      !isInteractiveMode ||
+      operation !== "create" ||
+      !schemaConfig ||
+      !enabled ||
+      draftId
+    ) {
+      return;
     }
-  }, [recordError]);
+
+    const createInitialDraft = async () => {
+      setIsCreatingDraft(true);
+      setDraftError(null);
+
+      try {
+        const client = api<T>(source);
+        // Call PATCH /{bdo_id}/draft with empty payload to get draft ID
+        const response = await client.draftInteraction({});
+
+        // Store the draft ID
+        setDraftId(response._id);
+
+        // Apply any computed fields returned from API
+        if (response && typeof response === "object") {
+          Object.entries(response).forEach(([fieldName, value]) => {
+            // Skip _id as it's the draft ID, not a form field
+            if (fieldName === "_id") return;
+
+            const currentValue = rhfForm.getValues(fieldName as any);
+            if (currentValue !== value) {
+              rhfForm.setValue(fieldName as any, value as any, {
+                shouldDirty: false,
+                shouldValidate: false,
+              });
+            }
+          });
+        }
+      } catch (error) {
+        console.error("Failed to create initial draft:", error);
+        setDraftError(error as Error);
+      } finally {
+        setIsCreatingDraft(false);
+      }
+    };
+
+    createInitialDraft();
+  }, [isInteractiveMode, operation, schemaConfig, enabled, draftId, source, rhfForm]);
 
   // ============================================================
   // COMPUTED FIELD DEPENDENCY TRACKING AND OPTIMIZATION
@@ -278,21 +317,29 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
   // Manual computation trigger - called on blur after validation passes
   const triggerComputationAfterValidation = useCallback(
     async (fieldName: string) => {
-      if (!schemaConfig || computedFieldDependencies.length === 0) {
+      if (!schemaConfig) {
         return;
       }
 
-      // Check if this field is a dependency for any computed fields
-      // If draftOnEveryChange is true, trigger for all fields
-      // If false (default), only trigger for computed field dependencies
-      const shouldTrigger =
-        draftOnEveryChange ||
-        computedFieldDependencies.includes(fieldName as Path<T>);
+      // Determine if draft should be triggered based on interaction mode
+      // Interactive mode: Always trigger draft API on blur
+      // Non-interactive mode: Only trigger for computed field dependencies (legacy behavior)
+      const shouldTrigger = isInteractiveMode
+        ? true // Interactive mode: always trigger
+        : (computedFieldDependencies.length > 0 &&
+            (draftOnEveryChange ||
+              computedFieldDependencies.includes(fieldName as Path<T>)));
 
       if (!shouldTrigger) {
         return;
       }
 
+      // For interactive create, check that we have a draftId (except for initial draft creation)
+      if (isInteractiveMode && operation === "create" && !draftId) {
+        console.warn("Interactive create mode: waiting for draft ID");
+        return;
+      }
+
       // Prevent concurrent API calls
       if (isComputingRef.current) {
         return;
@@ -330,6 +377,11 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
               (changedFields as any)._id = (currentValues as any)._id;
             }
 
+            // For interactive create mode, include draft _id
+            if (isInteractiveMode && operation === "create" && draftId) {
+              (changedFields as any)._id = draftId;
+            }
+
             // Use lastSyncedValues if available, otherwise use recordData (for update) or empty object (for create)
             const baseline =
               lastSyncedValuesRef.current ??
@@ -382,10 +434,18 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
 
             lastSyncedValuesRef.current = baselineBeforeApiCall;
 
-            const computedFieldsResponse =
-              operation === "update" && recordId
-                ? await client.draftPatch(recordId, payload)
-                : await client.draft(payload);
+            // Choose API method based on operation and interaction mode
+            let computedFieldsResponse;
+            if (operation === "update" && recordId) {
+              // Update mode: use draftPatch (both interactive and non-interactive)
+              computedFieldsResponse = await client.draftPatch(recordId, payload);
+            } else if (isInteractiveMode && draftId) {
+              // Interactive create: use draftInteraction with _id
+              computedFieldsResponse = await client.draftInteraction(payload);
+            } else {
+              // Non-interactive create: use draft (POST)
+              computedFieldsResponse = await client.draft(payload);
+            }
 
             // Apply computed fields returned from API
             if (
@@ -438,6 +498,8 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
       rhfForm,
       computedFieldDependencies,
       draftOnEveryChange,
+      isInteractiveMode,
+      draftId,
     ]
   );
 
@@ -495,76 +557,149 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
   ]);
 
   // ============================================================
-  // FORM SUBMISSION
+  // HANDLE SUBMIT - RHF-style API with internal submission
   // ============================================================
 
-  const submit = useCallback(async (): Promise<void> => {
-    if (!schemaConfig) {
-      throw new Error("Schema not loaded");
-    }
+  /**
+   * handleSubmit follows React Hook Form's signature pattern:
+   *
+   * handleSubmit(onSuccess?, onError?) => (e?) => Promise<void>
+   *
+   * Internal flow:
+   * 1. RHF validation + Cross-field validation → FAILS → onError(fieldErrors)
+   * 2. Clean data & call API → FAILS → onError(apiError)
+   * 3. SUCCESS → onSuccess(responseData)
+   */
+  const handleSubmit = useCallback(
+    (
+      onSuccess?: (data: T, e?: React.BaseSyntheticEvent) => void | Promise<void>,
+      onError?: (
+        error: import("react-hook-form").FieldErrors<T> | Error,
+        e?: React.BaseSyntheticEvent
+      ) => void | Promise<void>
+    ) => {
+      return rhfForm.handleSubmit(
+        // RHF onValid handler - validation passed, now do cross-field + API
+        async (data, event) => {
+          if (!schemaConfig) {
+            const error = new Error("Schema not loaded");
+            onError?.(error, event);
+            return;
+          }
 
-    setIsSubmitting(true);
-    setSubmitError(null);
+          setIsSubmitting(true);
 
-    try {
-      // Validate form including cross-field validation
-      const isValid = await validateForm();
-      if (!isValid) {
-        throw new Error("Form validation failed");
-      }
+          try {
+            // Cross-field validation
+            const transformedRules = schemaConfig.crossFieldValidation.map(
+              (rule) => ({
+                Id: rule.Id,
+                Condition: { ExpressionTree: rule.ExpressionTree },
+                Message: rule.Message || `Validation failed for ${rule.Name}`,
+              })
+            );
 
-      const formValues = rhfForm.getValues();
+            const crossFieldErrors = validateCrossField(
+              transformedRules,
+              data as any,
+              referenceData
+            );
 
-      // Clean data for submission
-      // - For create: includes all non-computed fields
-      // - For update: includes only fields that changed from recordData
-      const cleanedData = cleanFormData(
-        formValues as any,
-        schemaConfig.computedFields,
-        operation,
-        recordData as Partial<T> | undefined
-      );
+            if (crossFieldErrors.length > 0) {
+              // Set cross-field errors in form state
+              crossFieldErrors.forEach((error, index) => {
+                rhfForm.setError(`root.crossField${index}` as any, {
+                  type: "validate",
+                  message: error.message,
+                });
+              });
+              // Call onError with current form errors
+              onError?.(rhfForm.formState.errors, event);
+              return;
+            }
 
-      // Submit data
-      const result = await submitFormData<T>(
-        source,
-        operation,
-        cleanedData,
-        recordId
-      );
+            // Clean data for submission
+            const cleanedData = cleanFormData(
+              data as any,
+              schemaConfig.computedFields,
+              operation,
+              recordData as Partial<T> | undefined
+            );
 
-      if (!result.success) {
-        throw result.error || new Error("Submission failed");
-      }
+            let result;
 
-      // Success callback
-      onSuccessRef.current?.(result.data || formValues);
+            if (isInteractiveMode) {
+              // Interactive mode submission
+              const client = api<T>(source);
 
-      // Reset form for create operations
-      if (operation === "create") {
-        rhfForm.reset();
-      }
-    } catch (error) {
-      const submitError = error as Error;
-      setSubmitError(submitError);
-      onSubmitErrorRef.current?.(submitError);
-      onErrorRef.current?.(submitError);
-      throw error;
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [schemaConfig, validateForm, rhfForm, source, operation, recordId, recordData]);
+              if (operation === "create") {
+                // Interactive create: must have draftId
+                if (!draftId) {
+                  throw new Error(
+                    "Interactive create mode requires a draft ID. Draft creation may have failed."
+                  );
+                }
+                // POST /{bdo_id}/draft with _id in payload
+                const response = await client.draft({
+                  ...cleanedData,
+                  _id: draftId,
+                } as any);
+                result = { success: true, data: response };
+              } else {
+                // Interactive update: POST /{bdo_id}/{id}/draft
+                const response = await client.draftUpdate(recordId!, cleanedData);
+                result = { success: true, data: response };
+              }
+            } else {
+              // Non-interactive mode: use existing submitFormData
+              result = await submitFormData<T>(
+                source,
+                operation,
+                cleanedData,
+                recordId
+              );
 
-  // ============================================================
-  // HANDLE SUBMIT - Simplified API
-  // ============================================================
+              if (!result.success) {
+                throw result.error || new Error("Submission failed");
+              }
+            }
 
-  // Simplified handleSubmit that always uses SDK's submit function
-  const handleSubmit = useCallback(() => {
-    return rhfForm.handleSubmit(async () => {
-      await submit();
-    });
-  }, [rhfForm, submit]);
+            // Reset form for create operations
+            if (operation === "create") {
+              rhfForm.reset();
+              // Clear draft state for interactive mode
+              if (isInteractiveMode) {
+                setDraftId(null);
+              }
+            }
+
+            // Success callback with response data
+            await onSuccess?.(result.data || data, event);
+          } catch (error) {
+            // API error - call onError with Error object
+            onError?.(error as Error, event);
+          } finally {
+            setIsSubmitting(false);
+          }
+        },
+        // RHF onInvalid handler - validation failed
+        (errors, event) => {
+          onError?.(errors, event);
+        }
+      );
+    },
+    [
+      rhfForm,
+      schemaConfig,
+      referenceData,
+      source,
+      operation,
+      recordId,
+      recordData,
+      isInteractiveMode,
+      draftId,
+    ]
+  );
 
   // ============================================================
   // FIELD HELPERS
@@ -623,18 +758,20 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
 
   const clearErrors = useCallback((): void => {
     rhfForm.clearErrors();
-    setSubmitError(null);
   }, [rhfForm]);
 
   // ============================================================
   // COMPUTED PROPERTIES
   // ============================================================
 
+  // Loading state includes interactive mode draft creation
   const isLoadingInitialData =
-    isLoadingSchema || (operation === "update" && isLoadingRecord);
+    isLoadingSchema ||
+    (operation === "update" && isLoadingRecord) ||
+    (isInteractiveMode && operation === "create" && isCreatingDraft);
   const isLoading = isLoadingInitialData || isSubmitting;
-  const loadError = schemaError || recordError;
-  const hasError = !!(loadError || submitError);
+  const loadError = schemaError || recordError || draftError;
+  const hasError = !!loadError;
 
   const computedFields = useMemo<Array<keyof T>>(
     () => (schemaConfig?.computedFields as Array<keyof T>) || [],
@@ -794,9 +931,12 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
     isLoadingRecord,
     isLoading,
 
+    // Interactive mode state
+    draftId,
+    isCreatingDraft,
+
     // Error handling
     loadError: loadError as Error | null,
-    submitError,
     hasError,
 
     // Schema information
@@ -813,7 +953,6 @@ export function useForm<T extends Record<string, any> = Record<string, any>>(
     isFieldComputed,
 
     // Operations
-    submit,
     refreshSchema,
     validateForm,
     clearErrors,